摘要：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/cs
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.weibo{width: 600px;height:190px; padding: 5px; margin:30px auto;border:10px solid darkkhaki}
.weibo img{float: left}
.shuru{float:right;color:#808080;font-size: 13px;height:25px;line-height: 25px;margin-right: 5px;}
.shuru span{font-size: 14px;font-weight: bold;}
.weibo textarea{border: 1px #ccc solid;width:98%;margin:10px auto;height: 106px;}
.clear{clear:both}
.ico{width: 98%;margin: 0 auto}
.ico ul{margin: 0;padding: 0}
.ico li{list-style: none;float: left;font-size:12px;line-height:25px;position:relative;min-width:55px; margin-right:3px;}
.ico li i{width:20px;height:25px;display:block;background-color:red;float:left;margin-right: 2px;}
.ico li:nth-child(1) i{background:url("images/an5.png") no-repeat center center}
.ico li:nth-child(2) i{background:url("images/an4.png") no-repeat center center}
.ico li:nth-child(3) i{background:url("images/an3.png") no-repeat center center}
.ico li:nth-child(4) i{background:url("images/an2.png") no-repeat center center}
.ico li:nth-child(5) i{background:url("images/an1.png") no-repeat center center}
.fabu{width:150px;margin-right: 5px;float: right}
.fabu input{width:80px;height:30px;border-radius:10px;background-color:#ffc09f;float:right;border: none;outline: none;color: white}
.fabu span{float:left;height:30px;line-height:30px;font-size:12px;color: #c8c9cd}
</style>
<script type="text/javascript">
var text,num,bt,m
window.onload=function(){
text=document.getElementById('text')//定位到文本输入框
num=document.getElementById('number')//获取字数
bt=document.getElementById('bt')//发布按钮的获取
text.onkeyup=function aa(){//键盘输入的时候开始执行此函数
m=140-text.value.length//140字数减掉文本输入框里面的输入字符数
if(m<0){//当这个数字小于0的时候
num.style.color='red'//文字的颜色变红
}else{
num.style.color='#888'//如果数字没超过140个字的话 字体的颜色就是这样。
}
num.innerHTML=m //显示多少数字。
}
bt.onclick=function(){
if(m==140||m==null){
alert('请输入内容')
text.focus()
}else if(m<0){
alert('请删减内容')
text.focus()
}else{
alert('发布成功')
}
}
aa()
}
</script>
</head>
<body>
<div class="weibo">
<img src="images/12.png" alt=""/>
<div class="shuru">你还可以输入<span id="number"></span>字</div>
<div class="clear"></div>
<textarea id="text"></textarea>
<div class="weibo_bottom">
<div class="ico">
<ul>
<li><i></i>表情</li>
<li><i></i>图片</li>
<li><i></i>视频</li>
<li><i></i>话题</li>
<li><i></i>长微博</li>
</ul>
</div>
<div class="fabu">
<span>公开</span>
<input type="button" id="bt" value="发布"/>
</div>
</div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-01-06 16:23:24
老师总结：完成的不错，注意一点：老师代码中的aa()这个函数名可以去掉，这里text.onkeyup=function创建是是一个匿名函数，所以不需要调用也可以，你可以试试奥！
