abstract：<!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//定义数字还剩多少变量对象
var f_c//发布标志
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="请输入内容"
f_c=0
}else if(t.value.length>40)
{
n_c.style.color="red"
n_c.innerHTML="你输入已经超出：<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("内容为空")
break;
case 1: alert("发布成功")
break;
case 2: alert("超出字数")
break;
default: alert("出错")
}
}
</script>
</head>
<body>
<div id="o">
<div id="upL">输入内容</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="发布" onclick="fb()">
</div>
</div>
</body>
</html>