微博输入字数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>03.微博输入字数</title>
	<style type="text/css" media="screen">
		body{font-size:12px;}
		.box{width:600px;height:160px;border:10px solid pink;margin:10px auto;padding:10px;}
		img{float:left;width:190px;height:24px;}
		.box1{float:left;margin-left:255px;width:150px;height:24px;text-align:right;font-size:14px;color:#888;}
		.box1 span{font-size:16px;font-weight:bold;}
		#text{width:600px;height:100px;border:1px solid #888;margin-top:5px;}
		.box #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float:left;width:30px;height:32px;line-height:32px;padding-left:26px;}
		#sp1{background:url(![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fb26d344543472e856c14ff957ac49c~tplv-k3u1fbpfcp-zoom-1.image)) no-repeat left center;}
		#sp2{background:url(![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa52e74c69dd479cb5fe99f8a9e4eb90~tplv-k3u1fbpfcp-zoom-1.image)) no-repeat left center;}
		#sp3{background:url(![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbd2ef6dd3ff4e8d8a6f82379d729732~tplv-k3u1fbpfcp-zoom-1.image)) no-repeat left center;}
		#sp4{background:url(![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b267081e00c84365a2b9e95742ff63d8~tplv-k3u1fbpfcp-zoom-1.image)) no-repeat left center;}
		#sp5{background:url(![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b8cf67de8344d349fd19f640def050c~tplv-k3u1fbpfcp-zoom-1.image)) no-repeat left center;width:40px;}
		#sp6{margin-left:150px;margin-right:15px;color:#888;}
		#bt{float:left;width:80px;height:30px;border:none;background:#ffc09f;color:#fff;border-radius:5px;}
	</style>
	<script type="text/javascript">
		var text,number,bt,m;
		window.onload=function(){
			text=document.getElementById('text');
			number=document.getElementById('number');
			bt=document.getElementById('bt');
			text.onkeyup=function aa(){
				m=140-text.value.length;
				if(m<0){
					number.style.color="red";
				}else{
					number.style.color="#888";
				}
				number.innerHTML=m;
			}
			bt.onclick=function(){
				if(m>0&&m<140){
					// alert("您还没输入！！！");
					// text.focus();
					alert("发布成功！");
				}else if(m<0){
					alert("您输入的字数过多！！");
					text.focus();
				}else{
					alert("您还没输入！！！");
					text.focus();
					// alert("发布成功！");
				}
			}
			// aa();
		}
	</script>
</head>
<body>
	<div class="box">
		<img src="![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31110851473847b3b96096c8f4dc83d7~tplv-k3u1fbpfcp-zoom-1.image)">
		<div class="box1">还可以输入<span id="number"></span>字</div>
		<textarea id="text"></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="bt">
	</div>
	


	
	
</body>
</html>
微博输入字数案例

微博输入字数
