摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>微博輸入</title>
<style type="text/css">
/* 設(shè)置body標(biāo)簽內(nèi)部的字體大小 */
body {
font-size: 12px;
}
/* 設(shè)置整個區(qū)域的寬度為600px,高度為160px,邊框厚度為10px、實線、加粗，
上外邊距和下外邊距是0px、右外邊距和左外邊距為自動，內(nèi)部為10px */
.box {
width: 600px;
height: 160px;
border: 10px solid pink;
margin: 0px auto;
padding: 10px;
}
/* 設(shè)置圖片向左浮動 */
img {
float: left;
}
/* 設(shè)置"還可以輸入*字"這一區(qū)域向左浮動，左外邊距255像素，寬度為150像素,高度為24像素,
向右對齊，字體大小為14像素，顏色為#888 */
.box1 {
float: left;
margin-left: 255px;
width: 150px;
height: 24px;
text-align: right;
font-size: 14px;
color: #888;
}
/* 設(shè)置"還可以輸入*字"這一區(qū)域中的"*" 的字體大小，并且加粗*/
.box1 span {
font-size: 16px;
font-weight: bold;
}
/* 設(shè)置文本輸入框內(nèi)的寬度為600像素，高度為100像素，邊框大小為1像素、實線、顏色為#ccc
，距離上部為5像素 */
#text {
width: 600px;
height: 100px;
border: 1px solid #ccc;
margin-top: 5px;
}
/* 設(shè)置六個圖片向左浮動，寬度為30像素，高度為32像素，行高為32像素，內(nèi)左邊距為26像素 */
.box #sp1,
#sp2,
#sp3,
#sp4,
#sp5,
#sp6 {
float: left;
width: 30px;
height: 32px;
line-height: 32px;
padding-left: 26px;
}
#sp1 {
background: url(images/an5.png) no-repeat left center;
}
#sp2 {
background: url(images/an4.png) no-repeat left center;
}
#sp3 {
background: url(images/an3.png) no-repeat left center;
}
#sp4 {
background: url(images/an2.png) no-repeat left center;
}
#sp5 {
background: url(images/an1.png) no-repeat left center;
width: 40px;
}
#sp6 {
margin-left: 100px;
margin-right: 15px;
color: #888;
}
/* 設(shè)置發(fā)布按鈕向左浮動，寬度為80像素，高度為30像素，沒有變款線，背景顏色為#ffc09f
字體顏色為#fff，圓滑程度為5px */
#bt {
float: left;
width: 80px;
height: 30px;
border: none;
background: #ffc09f;
color: #fff;
border-radius: 5px;
}
</style>
<script type="text/javascript">
var text,number,m;
window.onload=function (){
text=document.getElementById('text');
number=document.getElementById('number');
bt=document.getElementById('bt');
text.onkeyup=function aa(){
m=140-text.value.length;//微博限制字?jǐn)?shù)是140
if(m<0){
number.style.color="red";
}else{
number.style.color="#888";
}
number.innerHTML=m;
}
bt.onclick=function(){//對用戶輸入的字?jǐn)?shù)進(jìn)行限制
if(m==140){
alert("你還沒有輸入！");
text.focus();
}
else if(m<0){
alert("字?jǐn)?shù)過多！");
text.focus();
}
else{
alert("發(fā)布成功！");
}
}
aa();
}
</script>
</head>
<body>
<div >
<img src="images/12.png">
<div>
還可以輸入<span id="number"></span>字</div>
<textarea id="text"></textarea>
<span id="sp1">表情</span>
<span id="sp2">圖片</span>
<span id="sp3">視頻</span>
<span id="sp4">話題</span>
<span id="sp5">長微博</span>
<span id="sp6">公開</span>
<input type="button" value="發(fā)布" id="bt">
</div>
</body>
</html>
批改老師：韋小寶批改時間：2018-12-13 16:37:50
老師總結(jié)：控制字符輸入這個功能在很多的東西都可以用到！課后還要多練習(xí)哦！