摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>微博輸入</title> <style type="text/css"> #o{width: 405px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微博輸入</title>
<style type="text/css">
#o{width: 405px;height: 205px;margin:20px auto;border: 5px solid pink;}
#upL{float:left;height: 50px;line-height:50px;padding-left: 15px;}
#upR{float: right;height:50px;line-height:50px;padding-right: 15px;}
#cl{clear: both;}
#mid{width: 370px;height: 100px;margin:0px 15px;}
#down{width: 400px;height: 50px;}
#down span{height:50px;line-height:50px;width: 50px;;margin-left: 10px;}
#down input{margin-left: 40px;}
</style>
<script type="text/javascript">
var n_c//定義數(shù)字還剩多少變量對象
var f_c//發(fā)布標志
window.onload=function()
{
n_c=document.getElementById("upR")
}
function text(t)
{
console.log(t.value)
if (t.value.length==0)
{
n_c.style.color="#888"
n_c.innerHTML="請輸入內(nèi)容"
f_c=0
}else if(t.value.length>40)
{
n_c.style.color="red"
n_c.innerHTML="你輸入已經(jīng)超出：<b>"+(t.value.length-40)+"</b> 字"
f_c=2
}else
{
n_c.style.color="#888"
n_c.innerHTML="你還可以輸入："+(40-t.value.length)+" 字"
f_c=1
}
}
function fb()
{
switch(f_c)
{
case 0: alert("內(nèi)容為空")
break;
case 1: alert("發(fā)布成功")
break;
case 2: alert("超出字數(shù)")
break;
default: alert("出錯")
}
}
</script>
</head>
<body>
<div id="o">
<div id="upL">輸入內(nèi)容</div><div id="upR"></div>
<div id="cl"></div>
<textarea id="mid" onkeyup="text(this)"></textarea>
<div id="down">
<span id="d1">表情</span><span id="d1">圖片</span><span id="d1">視頻</span><span id="d1">話題</span><span id="d1">長微博</span><span id="d1">公開</span>
<input type="button" name="" value="發(fā)布" onclick="fb()">
</div>
</div>
</body>
</html>