abstrak：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> &nbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 580px;
height: 200px;
border: 10px solid rgb(238, 170, 170);
margin: 0 auto;
box-shadow: 6px 5px 3px #cccc;
}
.box img{
margin: 8px 0px 0px 6px;
}
.box_right{
float: right;
height: 24px;
margin: 8px 15px 0px 0px;
font-size:15px; color: rgb(131, 122, 122);
}
.box_right b{
font-size: 10px;
}
#text{
height: 110px;
width: 550px;
margin: 0px 12px;
}
.box #foot_1, #foot_2 , #foot_3 ,#foot_4, #foot_5,#foot_6{
float: left;
width: 40px;
height: 20px;
padding-left: 25px;
font-size: 12px;
line-height: 20px;
padding-top:5px;
}
#foot_1{
background: url(/xuexi/static/images/images1/an5.png) no-repeat left center;
}
#foot_2{
background: url(/xuexi/static/images/images1/an4.png) no-repeat left center;
}
#foot_3{
background: url(/xuexi/static/images/images1/an3.png) no-repeat left center;
}
#foot_4{
background: url(/xuexi/static/images/images1/an2.png) no-repeat left center;
}
#foot_5{
background: url(/xuexi/static/images/images1/an1.png) no-repeat left center;
}
#foot_6{
padding-left: 130px;
}
#foot_7{
float: left;
background-color:darkorange;
width: 60px;
height: 25px;
color: aliceblue;
font-weight: bold;
border:none;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="box">
<img src="/xuexi/static/images/images1/12.png" />
<div class="box_right"> 還可以<b>輸入</b><span id="number"></span><b>字</b></div>
<textarea id="text"></textarea>
<span id="foot_1">表情</span>
<span id="foot_2">圖片</span>
<span id="foot_3">視頻</span>
<span id="foot_4">話題</span>
<span id="foot_5">長微博</span>
<span id="foot_6">公開</span>
<input type="submit" value="提交" id="foot_7">
</div>
<script type="text/javascript">
var a,b,m //a 為文本框變量，b顯示字?jǐn)?shù)變量，m為實時字?jǐn)?shù)
window.onload=function (){ //window.onload是所有頁面內(nèi)容加載完成執(zhí)行的事件函數(shù)
a=document.getElementById('text') //通過id的方式獲得文本框并賦值給變量a
b=document.getElementById('number') // 通過id的方式獲得到span并賦值給變量b；
bt=document.getElementById('foot_7') // 通過id的方式獲得提交框并復(fù)制給bt
a.onkeyup=function aa(){ //onkeyup按鍵被松開事件,a已經(jīng)是文本框了，此時就是文本框內(nèi)按鍵被松開時計算字?jǐn)?shù)；
//如果使用onkeydown就是按下時才會計算字?jǐn)?shù)，字?jǐn)?shù)在下一次按鍵時才會生效
m=140-a.value.length //a.value.length可以獲得文本框內(nèi)文字長度， m值就是140減去a.value.length的值，超過后就是負(fù)數(shù)。
if(m<0){ // 判斷d的數(shù)字是否小于零
b.style.color="red" //小于0則在b(span)樣式為紅色
}else{
b.style.color="#888" //否則大于0為灰色
}
b.innerHTML=m; // 把m實時字?jǐn)?shù)賦值給b(span)html增加改寫。
} //此時在文本框內(nèi)輸入文字，右上角顯示m的實時字?jǐn)?shù)，并且超過140之后顯示紅色
bt.onclick=function(){ //直接把if判斷語句復(fù)制給id點擊事件
if (m==140) { //這個地方使用等于或者小于都有可以
alert("你還沒有輸入")
a.focus() //獲得文本框內(nèi)焦點
}else if(m<0){
alert("字?jǐn)?shù)太多，不可以發(fā)布")
a.focus()
}else{
alert("發(fā)布成功")
}
aa() // a()可以調(diào)用也可以不用調(diào)
}
}
//方法2：需要在html提交按鈕增加點擊事件
// function d(){
// if (m==140) {
// alert("你還沒有輸入")
// a.focus()
// }else if(m<0){
// alert("字?jǐn)?shù)太多，不可以發(fā)布")
// a.focus()
// }else{
// alert("發(fā)布成功")
// }
// }
</script>
</body>
</html>
Guru membetulkan：滅絕師太Masa pembetulan：2019-01-31 09:25:54
Rumusan guru：完成的很好,代碼邏輯清晰,看的出來是自己用心完成的,繼續(xù)保持!aa()可以直接去掉,調(diào)用效果正常但是會有報錯