功能：实现新浪微博输入字数提醒功能；最多输入140个字，当输入字时，上面提示部分字数发生变化，如果字数小于25，字体颜色变红；当可输入字数为0时，强制不能输入，如果用中文输入法
一次性输入很多字，那么将自动丢失后面的字。
原理：根据js中onkeyup()函数获取键盘监听事件，来改变文字的同时监听文本域中文字的数量。
效果图：
代码：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="css/home.css" rel="stylesheet" type="text/css"/>
<script src="js/home.js"></script>
<title>模仿新浪微博</title>
</head>
<body>
<div id="content">
<div id="cont_Right">
<div id="share">
<div id="word"><img src="data:images/send_weibo.png"/>
<div class="aviableCount">还可以输入<span id="sp">140</span>字</div>
</div>
<div id="box">
<div class="box1">
<!--设置最大输入字符长度为140-->
<textarea onkeyup="show()" cols="55" rows="25" style="resize: none" name="weiboTextArea" id="weiboTextArea" class="box2" maxlength="140"></textarea>
</div>
</div>
<div id="sub">
<input name="submit" type="button" value="广播"/>
</div>
</div>
</div>
</body>
</html>
js:
function show(){
var tarea=document.getElementById("weiboTextArea");
var maxlength=140;
var length=tarea.value.length;
var count=maxlength-length;
var sp=document.getElementById("sp");
sp.innerHTML=count;
if(count<=25){
sp.style.color="red";
}else{
sp.removeAttribute("style");
}
}
css:
@charset "utf-8";
body{
margin:0px;
padding:0px;
background-image:url(../images/mm_body_bg.jpg);
}
#content{
//border:#000 thin 2px;
width:850px;
margin:0px auto;
padding:45px 0px 0px 0px;
//background:#D2EAEE repeat;
}
#cont_Right{
background:#FFF;
width:605px;
height:auto;min-height:500px;
margin:0px auto;
padding:0px;
display:block;
float:right;
}
#share{
//background-color:#CCC;
width:550px;
height:175px;
margin:0px auto;
//border-bottom:1px solid #CCCCCC;
padding:0px;
}
#word{
margin:15px 0px 0px 20px;
padding:0px;
}
#box{
background-color:#063;
width:550px;
height:90px;
}
.box1{
width:542px;
height:50px;
margin:7px 0px 0px 0px;
padding:2px 3px 0px 3px;
}
.box2{
width:540px;
height:60px;
border: 1px solid #CCCCCC;
margin:0px;
padding:8px 0px 0px 4px;
font-family:Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 12px;
}
#sub{
float:right;
margin:5px 0px 0px 0px;
}
用到的图片：
1.
2.
