abstract：<!DOCTYPE html /><html> <head> <meta charset="utf-8" /> <title>练习-微博输入</title>
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<title>练习-微博输入</title>
<style>
*{
margin:0px;
padding:0px;
}
.box_a1{
width:600px;
height:160px;
margin:10px auto;
padding:10px 10px;
border:10px solid pink;
}
.box_c1{
float:right;
color:#888;
font-size:14px;
}
#textarea{
width:100%;
height:100px;
margin:8px 0px;
padding:3px;
}
.box_b3 a{
float: left;
font-size:13px;
line-height: 25px;
padding-left: 26px;
}
.a1{
background: url(images/wb/an5.png) no-repeat;
}
.a2{
background: url(images/wb/an4.png) no-repeat;
}
.a3{
background: url(images/wb/an3.png) no-repeat;
}
.a4{
background: url(images/wb/an2.png) no-repeat;
}
.a5{
background: url(images/wb/an1.png) no-repeat;
}
#bt{
float:right;
width:50px;
height:25px;
background:#FFC09F;
color:#fff;
border:none;
margin:0px 5px;
border-radius:5px;
}
</style>
<script>
var textarea,fon,x;
window.onload=function (){ //获取标签
textarea=document.getElementById("textarea");
fon=document.getElementById("fon");
bt=document.getElementById("bt");
textarea.onkeyup=function up(){ //计算剩余可输入的字数
x=140-textarea.value.length;
fon.innerHTML=x;
};
bt.onclick=function (){ //判断条件，只有字数在1-140之间才能显示发布成功
if (x==140){
alert("请输入内容");
textarea.focus();
}else if (x<0){
alert("输入内容过多");
textarea.focus();
}else{
alert("发布成功");
}
}
up();
}
</script>
</head>
<body>
<div class="box_a1">
<div class="box_b1">
<image src="images/wb/12.png">
<div class="box_c1">还可以输入<span id="fon""></span>字</div>
</div>
<div class="box_b2">
<textarea id="textarea" ></textarea>
</div>
<div class="box_b3">
<a class="a1">表情</a>
<a class="a2">图片</a>
<a class="a3">视频</a>
<a class="a4">话题</a>
<a class="a5">长微博</a>
<input type="button" value="发布" id="bt">
<a style="color:#aaa;float:right;margin-right:10px;">公开</a>
</div>
</div>
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-02-27 09:22:14
Teacher's summary：写的很不错 这节课主要也就是练习了对输入框的限制 还有一些样式布局等