完成微博输入字数案例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding: 0px;font-size: 11px;}
.box{height: 200px;width: 600px;border:8px solid #ccc;margin:10px auto;}
.imge{float: left;margin-left: 15px;margin-top: 10px;}
.box1{float: right;margin-right: 15px;margin-top: 10px;color: #525252;}
#box2{font-weight: bold;}
#text{width: 575px;height: 110px;margin:10px 10px;}
.box #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float: left;width:36px;height: 20px;line-height: 20px;padding-left:27px;}
#sp1{background: url(img/an5.png) no-repeat left center;margin-left:10px}
#sp2{background: url(img/an4.png) no-repeat left center;}
#sp3{background: url(img/an3.png) no-repeat left center;}
#sp4{background: url(img/an2.png) no-repeat left center;}
#sp5{background: url(img/an1.png) no-repeat left center;}
#sp6{color:#525252;padding-left: 140px;}
#button{border:none;background-color: #8A4B66;width: 80px;height: 25px;float: right;margin-right: 10px;margin-top: -5px;color: #fff;border-radius: 5px;}
</style>
<script type="text/javascript">
var text,num,btun,m;
window.onload =function(){
text = document.getElementById('text');
num = document.getElementById('box2');
btun = document.getElementById('button');
text.onkeyup = function keyup(){
m=140-text.value.length;
if(m<0){
num.style.color = "red";
}else{
num.style.color = "#525252";
}
num.innerHTML = m;
}
btun.onclick=function(){
if(m==140){
alert("您还没有输入");
text.focus();
}else if(m<0)
{
alert("您输入的字数太多，不可以发布")
text.focus();
}else{
alert("发布成功")
}
}
keyup();
}
</script>
</head>
<body>
<div>
<img src="img/12.png" alt="">
<div>还可以输入 <span id="box2">140</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" id="button" value="发布">
</div>
</body>
</html>
经过本节课的学习js体会到它的强大。对前端开发技能有所提升，往后课外还需深入学习让前端开发运用起来更加灵活。
