摘要：<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>微博输入字数</title> <style> body{font-size:14px;} .box{he
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>微博输入字数</title>
<style>
body{font-size:14px;}
.box{height:160px; width:600px; border:10px solid pink;margin:0px auto; padding:10px;}
img{float:left;}
.box1{float:left; margin-left:255px; height:24px; width:150px; text-align:right; font-size: 14px; color:#888;}
#number{font-size:20px; font-weight:bold;}
#text{height:100px; width:600px; margin-top:5px;}
.box #cha1,#cha2,#cha3,#cha4,#cha5,#cha6{float:left; width:30px; height:38px; line-height:38px; padding-left:25px;}
#cha1{background:url(images/an5.png) no-repeat left center}
#cha2{background:url(images/an4.png) no-repeat left center}
#cha3{background:url(images/an3.png) no-repeat left center}
#cha4{background:url(images/an2.png) no-repeat left center}
#cha5{background:url(images/an1.png) no-repeat left center; width:55px;}
#cha6{margin-left:155px;}
#bt{float:right; margin-right:20px; margin-top:3px; width:55px; 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") //获取输入框ID
number=document.getElementById("number") //获取数字字数id
bt=document.getElementById("bt") //获取发布按钮ID
text.onkeyup=function tex(){ //输入框输入文字时调用函数
m=140-text.value.length //140-文本框输入文字长度的值赋值给m 文本框限制字数140
if(m<0){
number.style.color="red"
}else{
number.style.color="black"
}
number.innerHTML=m //数字的内容是M
}
bt.onclick=function (){
if(m==140){
alert("您还没有输入内容")
text.focus() //光标自动移动到输入框
}else if(m<0){
alert("输入字数超出限制，请修改")
text.focus()
}else{
alert("发布成功")
}
}
tex() //调用一下函数
}
</script>
</head>
<body>
<div class="box">
<img src="images/12.png">
<div class="box1">还可以输入<span id="number"></span>字</div>
<textarea id="text"></textarea>
<span id="cha1">表情</span>
<span id="cha2">图片</span>
<span id="cha3">视频</span>
<span id="cha4">话题</span>
<span id="cha5">长微博</span>
<span id="cha6">公开</span>
<input type="button" value="发布" id="bt">
</div>
</body>
</html>
批改老师：韦小宝批改时间：2019-01-07 16:12:10
老师总结：代码写的很规范 注册的也很清楚 不错不错 课后要记得练习哦 继续加油吧
