检测微博输入字数完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width: 600px;margin:10px auto;border:8px solid pink;padding:10px;overflow: hidden;}
.tell{float:left;}
.number{float:right;}
#content{width: 600px;display:block;margin:10px auto;clear:both;}
#sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float:left;height:32px;line-height: 32px;padding-left:28px;}
#sp1{background: url(images/an5.png) no-repeat left center;}
#sp2{background: url(images/an4.png) no-repeat left center;}
#sp3{background: url(images/an3.png) no-repeat left center;}
#sp4{background: url(images/an2.png) no-repeat left center;}
#sp5{background: url(images/an1.png) no-repeat left center;float:left;}
#sp6{float:left;margin-left:120px;color:#888;font-size:13px;}
#sub{float:left;border-radius:10px;background: #ffc09f;border:none;color:#fff;text-align: center;width: 80px;height: 30px;margin-left:10px;cursor:pointer;}
</style>
<script>
window.onload=function(){
var num,content,sub;
num=document.getElementById('num');
content=document.getElementById('content');
sub=document.getElementById('sub');
content.onkeyup=function(){
var subcon=140-content.value.length;
if(subcon>=0){
num.style.color="#888";
}else{
num.style.color="red";
}
num.innerHTML=subcon;
}
sub.onclick=function(){
var subcon=140-content.value.length;
if(subcon==140){
alert('请输入一点内容');
content.focus();
}else if (subcon<0) {
alert('不能超过140个字符');
content.focus();
}else{
alert('发布成功');
}
}
}
</script>
</head>
<body>
<div id="box">
<img src="images/12.png" alt="">
<div>还可以输入<span id="num"></span></div>
<textarea name="content" id="content" cols="30" rows="10" ></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" value="发布" id="sub">
</div>
</body>
</html>