博客发布作业
总结：发布微博
先获取一下微博字数、编辑框、发布按钮的元素，然后使用键盘onkeyup事件绑定匿名函数
函数内用140个长度减文本框值的长度赋值给zs
如果zs小于0的时候，字数颜色是红色
或者颜色是#999
最后把zs的值赋值赋值给“l”也就是获取的字数标签，并且把内容修改为获取的值。
点击发布按钮
把匿名函数赋值给按钮的点击事件，函数体内判断如果字数等于140说明是没有输入，如果字数小于0说明已经超过长度成为负值了，最后默认正常发布成功。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 12px;
}
.weibo{
width: 600px;
height: 160px;
border:5px solid #ccc;
border-radius:5px;
margin:40px auto;
padding: 10px;
}
img{
display: inline-block;
float: left;
}
.in{
float: right;
margin-left: 255px;
width: 150px;
height: 24px;
text-align: right;
font-size: 14px;
color:#888;
}
#text{
margin-top: 5px;
height: 100px;
width:600px;
border: 1px solid #ccc;
}
.tu1,.tu2,.tu3,.tu4,.tu5,.gk{
padding-left: 26px;
height: 32px;
line-height: 32px;
width: 36px;
float: left;
}
.tu1{
background: url(images/an5.png) no-repeat left center;
}
.tu2{
background: url(images/an4.png) no-repeat left center;
}
.tu3{
background: url(images/an3.png) no-repeat left center;
}
.tu4{
background: url(images/an2.png) no-repeat left center;
}
.tu5{
background: url(images/an1.png) no-repeat left center;
}
.gk{
margin-right:15px;
color: #888;
float: right;
}
#fb{
float: right;
width: 80px;
height: 30px;
border: none;
border-radius: 5px;
background: #0a8;
color: #fff;
}
</style>
<script type="text/javascript">
var text,l,num;
window.onload=function(){
// 获取发布按钮
fb=document.getElementById('fb');
// 获取编辑框
text=document.getElementById('text');
// 获取字数span
l= document.getElementById('zs');
text.onkeyup=function tj(){
// 字数等于140减去文本框内字数长度
zs = 140-text.value.length;
// 字数如果小于0用红色表示超过限制
if(zs<0){
l.style.color='red'
}else{
l.style.color='#999'
}
// 把字数值赋值给l的内容
l.innerHTML=zs;
}
// 提交发布
// 如果字数等于140说明没有输入内容
// 如果字数小于0说明是发布的字数超过限制不能发布
// 默认发布成功
fb.onclick = function(){
if(zs ==140){
alert('您还没有输入内容，不能发布');
text.focus();
}else if(zs <0){
alert('您输入内容过多，不能发布');
text.focus();
}else{
alert('恭喜，发布成功')
}
}
// 提交发布
tj();
}
</script>
</head>
<body>
<div>
<img src="images/12.png" alt="新鲜事">
<div>还可以输入<span id="zs">0</span>个字</div>
<textarea name="" id="text"></textarea>
<div>表情</div>
<div>图片</div>
<div>视频</div>
<div>话题</div>
<div>长微博</div>
<input type="button" value="发布" id="fb">
<div>公开</div>
</div>
</body>
</html>