js仿微博输入框

说明：微博输入框限制，字数不能超过140，超过140number显示为红色负数。

1.html部分

<div class="box">
	<div class="box1">还可以输入<span id='number'></span>字</div>
	<textarea id="text"> </textarea>
	<input type="button" value="发布" id='bt'>
</div>

2.js部分

<script type="text/javascript">
	var text,number,m,bt;
	// window.onload:页面加载完成后执行里面的js代码
	window.onload = function(){
		text  = document.getElementById('text');
		number = document.getElementById('number');
		bt = document.getElementById('bt');
		text.onkeyup = function(){
			m = 140-text.value.length;//获取text输入框的值得长度
			if(m<0){
				//number.style.color:number的字体样式变为红色
				number.style.color="red";
			}else{
				number.style.color="#888";
			}
			//number.innerHTML:number的内容为
			number.innerHTML=m;
		}
		bt.onclick = function(){
			if(m==140){
				alert('输入为空');
				text.focus();
			}else if(m<0){
				alert('字数超出限制');
				text.focus();
			}else{
				alert('发布成功');
			}
		}
}
</script>

3.css部分

<style type="text/css">
		.box{
			border: 6px solid pink;
			margin: 0px auto;
			width: 600px;
			height:170px;
			padding: 10px;
		}
		.box1
		{
			float: left;
			margin-left:255px;
			width: 150px;
			height: 24px;
			font-size: 14px;
			color: #888;
		}
		.box span{
			font-size: 16px;
			font-weight: bold;
		}
		#text{
			width:  600px;
			height: 100px;
			border: 1px solid #888;
			margin-top: 6px;
		}
		#bt{
			float: right;
			width: 50px;
			height: 30px;
			border: none;
			background: #ffc09f;color: #fff;
			border-radius: 5px;
		}
	</style>

4.结果