摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微博輸入框</title> <link rel="stylesheet" type="text/css&q
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微博輸入框</title>
<link rel="stylesheet" type="text/css" href="../css/css.css">
<link rel="shortcut icon" type="image/x-icon" href="../picture/mi.png">
<style type="text/css">
/*body內(nèi)容里字體大小*/
body{font-size:12px;}
.box{width: 521px;height: 130px;border: 6px solid pink;margin: 5px auto;padding: 10px;}/*整個微博輸大體框架*/
.box img{float: left;}
.box1{width: 100px;height: 24px;color: #ccc;font-size:12px;font-weight: bold;float: left;margin-left: 220px;line-height: 24px;text-align: right;}
/*.clear{clear: both;}*/
#number{font-size: 14px;font-weight: bold;}
#text{width: 521px;height: 70px;margin-top: 3px;}/*微博內(nèi)容輸入框*/
#sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float: left; width: 30px;height: 25px;margin-top: 5px;padding-left: 26px; line-height: 25px;}/*通過浮動把行內(nèi)span元素變成行內(nèi)塊元素
/*背景圖片靠padding-left：26px寄出來*/
#sp1{background: url(../picture/images/an5.png) no-repeat left;}
#sp2{background: url(../picture/images/an4.png) no-repeat left;}
#sp3{background: url(../picture/images/an3.png) no-repeat left;}
#sp4{background: url(../picture/images/an2.png) no-repeat left;}
#sp5{background: url(../picture/images/an1.png) no-repeat left;width: 40px;}
#sp6{margin-left: 100px;}
#bt{width: 75px;height: 25px;margin-top: 5px;line-height: 25px;border: none;background: #FFC7A0;}/*發(fā)表按鈕屬性*/
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function (){
var number,text,min;
number=document.getElementById("number");
text=document.getElementById("text");
bt=document.getElementById("bt");
text.focus();//頁面加載完成后輸入光標就在輸入文本域
text.onkeyup=function myKeyup(){//該函數(shù)通過onkeyup() 事件統(tǒng)計輸入字數(shù)和改變顏色
min=140-text.value.length;
if (min<0){
number.style.color="red";
}else{
number.style.color="#888";
}
number.innerHTML=min;//通過innerHTML改變字數(shù)
}
bt.onclick=function tiJiao(){//該函數(shù)判斷發(fā)表是否成功
min=140-text.value.length;//通過mykeyup函數(shù)傳給變量min然后給tiJiao函數(shù)使用
if (min==140){
alert("提交內(nèi)容為空，請重新輸入");
text.focus();//光標自動回到文本域
}else if (min<0){
alert("超出提交字數(shù)上線，請重新輸入")
text.focus();
}else{
alert("發(fā)表成功");
}
}
}
</script>
<!-- 最外層Div -->
<div class="box">
<img src="../picture/images/12.png">
<!-- 計算輸入字數(shù)的Div -->
<div class="box1">還可以輸入<span id="number"></span>字</div>
<!-- <div class="clear"></div> -->
<!-- 清除浮動影響div -->
<!-- 輸入文本域 -->
<textarea id="text"></textarea>
<span id="sp1">表情</span>
<span id="sp2">圖片</span>
<span id="sp3">視頻</span>
<span id="sp4">話題</span>
<span id="sp5">長微博</span>
<span id="sp6">公開</span>
<!-- 提交按鍵 -->
<input type="button" value="發(fā)表" id="bt">
</div>
</body>
</html>
通過該實例的練習是自己之前有點迷惑的只是點也明白了，還有就是我看老師講的最后需要調(diào)用一個函數(shù)才能用，但是
我感覺tiJiao（）這個函數(shù)其實只是需要用到mykeup（）這個函數(shù)邊變量min變動的值，
因為min是全局變量，所以只要把該變量引用到tiJiao（）函數(shù)就可以了，沒必要直接再把函數(shù)調(diào)用，不知道這樣對不對？
運行結(jié)果是對的，還請老師給點意見！
批改老師：天蓬老師批改時間：2018-11-30 10:45:17
老師總結(jié)：其實,微博早已不再限制用戶輸入的字數(shù)了,但這仍是一個非常棒的練習項目, 檢測用戶輸入的字數(shù)的同時, 其實還可以檢測用戶輸入的內(nèi)容,例如檢測敏感詞等