abstrait：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,&
<!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>微博輸入靜態(tài)頁(yè)面+JS</title>
<style>
body{font-size: 12px;}
/* 以下BOX盒子寬600px,高160px，外邊框10px直線粉，padding內(nèi)邊10px讓子級(jí)和父級(jí)的有個(gè)內(nèi)邊距的間隙10px */
.box{width: 600px;height: 160px;border:10px solid pink; padding:10px; margin:0 auto;}
/* 以下是BOX盒子內(nèi)的圖片靠左浮動(dòng) */
.box img{float: left;}
/* 以下是BOX盒子內(nèi)的右側(cè)文字區(qū)域，可顯示計(jì)算輸入框的字符串輸入的數(shù)量 */
.box_right{width: 595px;height:24px;text-align:right;font-size:14px;line-height: 25px;color:#888;}
/*以下box下的 text 文本域 */
#text{width: 600px;height: 100px;}
/* 以下設(shè)置多個(gè)span標(biāo)簽給相應(yīng)的圖片背景，寬30高32行高32全部左浮動(dòng)設(shè)置padding-left為26px目的讓span背景圖片與文字調(diào)整合適的距離 */
#ipc1,#ipc2,#ipc3,#ipc4,#ipc5,#ipc6{width: 30px;height: 32px;line-height: 32px;float: left;padding-left:26px;}
/* 以下設(shè)置圖標(biāo)背景 no-repeat不平鋪 left左靠齊 center居中顯示 */
#ipc1{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an5.png') no-repeat left center;}
#ipc2{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an4.png') no-repeat left center;}
#ipc3{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an3.png') no-repeat left center;}
#ipc4{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an2.png') no-repeat left center;}
#ipc5{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an1.png') no-repeat left center;width:45px;}
/* 以下這是 “公開(kāi)”文字距離設(shè)置讓他與左側(cè)的圖片設(shè)置間距右側(cè)設(shè)了右外邊距15px */
#ipc6{margin-left:158px;margin-right:15px;}
/* 以下這是發(fā)表按鈕的樣式，設(shè)置背景色，文字顏色，去除按鈕默認(rèn)border邊框， 設(shè)置寬70px高30px，圓角邊框5px*/
#publish{background:#ffc09f;color:#fff; width:70px;height: 30px;border:0;border-radius:5px;}
</style>
<script>
// 聲明變量名 text number m
var text,number,m;
//網(wǎng)頁(yè)加載完執(zhí)行該方法
window.onload = function (){
//開(kāi)始 三個(gè)方法是獲取到DOM元素
number = document.getElementById('number');
text = document.getElementById('text');
publish = document.getElementById('publish');
//text連接上用戶鍵盤事件
text.onkeyup = function Obt(){
//m = 140-用戶輸入長(zhǎng)度然后進(jìn)行下步判斷
m = 140-text.value.length;
//假如1：用戶輸入了150個(gè)字符- 140字符串限制 = 負(fù)10，那么負(fù)10<0這個(gè)條件成立！
if (m<0) {
//假如1成立執(zhí)行紅色文字
number.style.color = "red"
}else{
//假如1不成立執(zhí)行本次文字樣式
number.style.color = "#888"
}
//判斷后結(jié)果把m插入到HTML頁(yè)面
number.innerHTML = m;
}
//當(dāng)用戶點(diǎn)擊按鈕進(jìn)行判斷
publish.onclick = function(){
//當(dāng)m=140-0==140那么用戶點(diǎn)擊了提示，抱歉您沒(méi)有輸入！
if (m==140) {
alert("抱歉，您還沒(méi)有輸入")
//focus將輸入焦點(diǎn)移至輸入框上
text.focus()
//例如1成立彈出提醒 字?jǐn)?shù)太多····
}else if(m<0){
alert("字?jǐn)?shù)太多，不可以發(fā)表噢！")
//例如1不成立提示 發(fā)布成功！
}else{
alert("發(fā)布成功")
}
}
//判斷完執(zhí)行函數(shù)！
Obt()
}
//按師太視頻來(lái)的，但是發(fā)現(xiàn)個(gè)BUG就是不輸入也能發(fā)布，這是為什么呢？
</script>
</head>
<body>
<div>
<img src="https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/12.png">
<div>還可以輸入<span id="number"></span>字</div>
<textarea id="text"></textarea>
<span id="ipc1">表情</span>
<span id="ipc2">圖片</span>
<span id="ipc3">視頻</span>
<span id="ipc4">話題</span>
<span id="ipc5">長(zhǎng)微博</span>
<span id="ipc6">公開(kāi)</span>
<input id="publish" type="button" value="發(fā)表">
</div>
</body>
</html>感謝老師批改我的作業(yè)，辛苦您了！
Professeur correcteur：滅絕師太Temps de correction：2018-11-27 09:07:53
Résumé du professeur：這不是bug啦!本來(lái)這節(jié)課就是講輸入字符數(shù)的，不是說(shuō)輸入驗(yàn)證的，不過(guò)你可以再添加判斷語(yǔ)句，限制未輸入字符不允許發(fā)布??！