摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>微博</title> <style type="text/css"> .weibomain { width: 600px; height: 200p
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微博</title>
<style type="text/css">
.weibomain
{
width: 600px;
height: 200px;
border: 8px solid pink;
margin: 0px auto;
}
img
{
float: left;
}
.inputtop
{
float: left;
margin-left: 200px;
font-size: 14px;
color: #888;
}
.inputtop span
{
font-size: 16px;
font-weight: bold;
}
#weibotxt
{
width: 580px;
height: 136px;
/*border:1px #888;*/
margin-top: 5px;
margin-left: 5px;
}
.weibomain #inputbut1,#inputbut2,#inputbut3, #inputbut4,#inputbut5,#inputbut6
{
width: 30px;
font-size: 12px;
float: left;
height: 30px;
padding-left: 20px;
line-height: 32px;
}
#inputbut1
{
background:url(img/face.png) no-repeat left center;
}
#inputbut2
{
background:url(img/face1.png) no-repeat left center;
}
#inputbut1
{
background:url(img/face2.png) no-repeat left center;
}
#inputbut3
{
background:url(img/face3.png) no-repeat left center;
}
#inputbut4
{
background:url(img/face4.png) no-repeat left center;
}
#inputbut5
{
background:url(img/face5.png) no-repeat left center;
width:40px;
}
#inputbut6
{
margin-left: 200px;
margin-right: 20px;
color: #888;
}
#fabu
{
border: none;
background: #ffc098;
color: #fff;
height: 25px;
border-radius: 5px;
}
</style>
<script type="text/javascript">
var txtinput,lblwl,m;
window.onload =function()
{
txtinput = document.getElementById("weibotxt");
lblwl = document.getElementById("wordnu");
btnsend = document.getElementById("fabu");
txtinput.onkeyup=function inputw()
{
m = 140 - txtinput.value.length;
if (m < 0)
{
lblwl.style.color="red";
}
else
lblwl.style.color="#888";
lblwl.innerHTML = m;
}
btnsend.onclick = function send()
{
if (m >0 )
alert("发布成功");
else
alert("字太多 减点呗!");
}
}
</script>
</head>
<body>
<div class="weibomain">
<img src="img/topl.png">
<div class="inputtop">还可以输入<span id="wordnu"></span>字</div>
<textarea id="weibotxt"></textarea>
<span id="inputbut1">表情</span>
<span id="inputbut2">图片</span>
<span id="inputbut3">视频</span>
<span id="inputbut4">话题</span>
<span id="inputbut5">长微博</span>
<span id="inputbut6">公开</span>
<input type="button" value="发布" id ="fabu">
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-01-08 09:28:50
老师总结：完成的不错，代码有自己的感觉，继续保持！
