????：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>微博輸入框案例</title>
<style>
/* 先劃分頂部中部底部三部分，再適當(dāng)使用左右浮動(dòng)可以一定程度上降低外邊距和內(nèi)邊距的使用，在最后微調(diào)時(shí)再使用內(nèi)外邊距，整體布局會(huì)更模塊化 */
body{font-size: 12px;}
.box{margin:0px auto;width:600px;height:210px;border: 9px solid pink;padding: 8px 8px;}
.box_head{padding: 5px 10px;}
.box_head_left{float: left;}
.box_head_right{float:right;padding-top:5px;color:#888;font-size: 15px;}
.box_body textarea{width:590px;height:130px;margin-top: 5px;border: 2px solid #ccc;}
.box_bottom{padding: 5px;}
.box_bottom_left{float: left;}
.box_bottom_right{float:right;}
#bt{width:80px;height:30px;border: none;background-color:peachpuff;color:white;border-radius: 5px;}
#number{font-weight: bold;}
#sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float: left;height:32px;line-height: 32px;padding-left:26px;padding-right: 10px}
#sp1{background: url(static/images/an5.png) no-repeat left center;}
#sp2{background: url(static/images/an4.png) no-repeat left center;}
#sp3{background: url(static/images/an3.png) no-repeat left center;}
#sp4{background: url(static/images/an2.png) no-repeat left center;}
#sp5{background: url(static/images/an1.png) no-repeat left center;}
#sp6{color:#888;}
</style>
<script>
var box_body_text,number,tips,bt,m;
window.onload = function (){
bt = document.getElementById("bt");
tips = document.getElementById("tips");
box_body_text = document.getElementById("box_body_text");
number = document.getElementById("number");
box_body_text.onkeyup = function (){
m = 140 - box_body_text.value.length;
if (m<0) {
number.style.color = "red";
tips.innerHTML = "已超過";
number.innerHTML = m * -1;
} else {
number.style.color = "#888";
number.innerHTML = m;
}
}
bt.onclick = function(){
m = 140 - box_body_text.value.length;//再點(diǎn)擊按鈕時(shí)再驗(yàn)證一邊字?jǐn)?shù)，有些時(shí)候再輸入框無任何內(nèi)容時(shí)能夠直接發(fā)送并不會(huì)報(bào)錯(cuò)
if(m==140){
alert("您還沒輸入任何內(nèi)容！");
//box_body_text.focus();//自動(dòng)獲取textarea框體內(nèi)的焦點(diǎn),但測(cè)試無效果，不知道時(shí)為什么
}else if (m<0) {
alert("超過發(fā)布限制的字?jǐn)?shù)！");
// box_body_text.focus();//自動(dòng)獲取textarea框體內(nèi)的焦點(diǎn),但測(cè)試無效果，不知道時(shí)為什么
} else {
alert("發(fā)送成功！");
}
}
}
</script>
</head>
<body>
<div>
<div>
<div>
<img src="static/images/12.png" alt="">
</div>
<div>
<div><span id="tips">還可輸入</span><span id="number">140</span>字</div>
</div>
</div>
<div>
<textarea name="" id="box_body_text"></textarea>
</div>
<div>
<div>
<span id="sp1">表情</span>
<span id="sp2">圖片</span>
<span id="sp3">視頻</span>
<span id="sp4">話題</span>
<span id="sp5">長(zhǎng)微博</span>
</div>
<div>
<span id="sp6">公開</span>
<input type="button" value="發(fā)布" id="bt">
</div>
</div>
</div>
</body>
</html>
?? ???：查無此人?? ??：2019-01-14 09:57:24
???? ??：完成的不錯(cuò)。下次作業(yè)把代碼縮進(jìn)下，這樣方便查詢，也要養(yǎng)成好習(xí)慣。加油。