摘要：<!DOCTYPE html /><html> <head> <meta charset="utf-8" /> <title>練習(xí)-微博輸入</title>
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<title>練習(xí)-微博輸入</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 (){ //獲取標(biāo)簽
textarea=document.getElementById("textarea");
fon=document.getElementById("fon");
bt=document.getElementById("bt");
textarea.onkeyup=function up(){ //計(jì)算剩余可輸入的字?jǐn)?shù)
x=140-textarea.value.length;
fon.innerHTML=x;
};
bt.onclick=function (){ //判斷條件，只有字?jǐn)?shù)在1-140之間才能顯示發(fā)布成功
if (x==140){
alert("請(qǐng)輸入內(nèi)容");
textarea.focus();
}else if (x<0){
alert("輸入內(nèi)容過(guò)多");
textarea.focus();
}else{
alert("發(fā)布成功");
}
}
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">長(zhǎng)微博</a>
<input type="button" value="發(fā)布" id="bt">
<a style="color:#aaa;float:right;margin-right:10px;">公開(kāi)</a>
</div>
</div>
</body>
</html>
批改老師：韋小寶批改時(shí)間：2019-02-27 09:22:14
老師總結(jié)：寫(xiě)的很不錯(cuò) 這節(jié)課主要也就是練習(xí)了對(duì)輸入框的限制 還有一些樣式布局等