摘要：<!DOCTYPE html> <html> <head> <title>微博输入</title> </head> <style type="text/css"> .box{width: 600px; height: 165px; b
<!DOCTYPE html>
<html>
<head>
<title>微博输入</title>
</head>
<style type="text/css">
.box{width: 600px; height: 165px; background: #fff; border: 1px solid #ccc; border-radius: 3px; margin: 200px auto; }
.new{display: inline-block;height: 30px; line-height: 30px;font-size: 15px; color: #2e9cc7;font-family: "WBswficon"; float: left;margin-left: 10px;}
.box1{width: 140px; float: right; height: 30px; line-height: 30px;font-size: 15px;color: #2e9cc7; text-align: right;margin-right: 10px;}
#text{width: 574px; height: 76px; margin: 0px; box-shadow: 0px 0px 3px rgba(0,0,0,0.15)inset; border-radius: 3px;border: none;}
.textarea{width: 578px; height: 80px;border-radius: 3px;float: left; margin: 10px;border: 1px solid #ccc;}
.pic_1,.pic_2,.pic_3,.pic_4,.pic_5{ width: 47px; height: 30px; line-height: 30px; font-size: 15px; float: left; margin: 0px 0px 0px 10px; letter-spacing: 1px; }
.pic_1{color: #ffa405;}
.pic_2{color: #84c002;}
.pic_3{color: #32a2d5; }
.pic_4{color: #5a8ce6}
.pic_5{color: #ff8200; width: 75px;}
.text_1{font-size: 10px; color: #636363;}
.nec{ height: 30px; line-height: 30px; float: left; font-size: 11px; color: #636363; margin-left: 135px; }
.next{ width: 65px; height: 25px; background: #ff8d00; border-radius: 3px; float: right; color: #fff;font-size: 10px; line-height: 20px; margin-right: 10px; border: none;}
.pic_6{ line-height: 30px; font-size: 20px; float: left;color: #636363; margin-left: 15px; }
</style>
<body>
<div class="box">
<span class="new">有什么新鲜事想告诉大家？</span>
<div class="box1">还可以输入<span id='number'></span>字!</div>
<div class="textarea"><textarea id="text"></textarea></div>
<div class="pic_1">☺<span class="text_1"> 表情</span></div>
<div class="pic_2">✉<span class="text_1"> 图片</span></div>
<div class="pic_3">♬<span class="text_1"> 音乐</span></div>
<div class="pic_4">♯<span class="text_1"> 话题</span></div>
<div class="pic_5">✹<span class="text_1"> 头条文章</span></div>
<span class="pic_6">···</span>
<span class="nec">公开 <span class="bottom">∨</span></span>
<input type="button" class="next" value="发布" id="bt">
</div>
<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 Abc(){
m=140-text.value.length//微博限制字数是140
if(m<0){
number.style.color='red'
}else{
number.style.color='#888'
}
number.innerHTML=m
}
bt.onclick=function(){
if(m==140){
alert('您还没有输入！')
text.focus()
}else if(m<0){
alert('字数过多不可以发布！')
text.focus()
}else{
alert('发布成功！')
}
}
Abc()
}
</script>
</body>
</html>
批改老师：韦小宝批改时间：2018-11-07 09:03:34
老师总结：写的很不错哦！下次可以加点总结进去！例如微博输入用到了js中的哪里函数啊！思路是怎样的啊！都可以！继续加油吧！
