abstrak：總結(jié)：發(fā)布微博先獲取一下微博字?jǐn)?shù)、編輯框、發(fā)布按鈕的元素，然后使用鍵盤onkeyup事件綁定匿名函數(shù)函數(shù)內(nèi)用140個(gè)長(zhǎng)度減文本框值的長(zhǎng)度賦值給zs如果zs小于0的時(shí)候，字?jǐn)?shù)顏色是紅色或者顏色是#999最后把zs的值賦值賦值給“l(fā)”也就是獲取的字?jǐn)?shù)標(biāo)簽，并且把內(nèi)容修改為獲取的值。點(diǎn)擊發(fā)布按鈕 把匿名函數(shù)賦值給按鈕的點(diǎn)擊事件，函數(shù)體內(nèi)判斷如果字?jǐn)?shù)等于140說(shuō)明是沒(méi)有輸入，如果字?jǐn)?shù)小于0說(shuō)明已
總結(jié)：發(fā)布微博
先獲取一下微博字?jǐn)?shù)、編輯框、發(fā)布按鈕的元素，然后使用鍵盤onkeyup事件綁定匿名函數(shù)
函數(shù)內(nèi)用140個(gè)長(zhǎng)度減文本框值的長(zhǎng)度賦值給zs
如果zs小于0的時(shí)候，字?jǐn)?shù)顏色是紅色
或者顏色是#999
最后把zs的值賦值賦值給“l(fā)”也就是獲取的字?jǐn)?shù)標(biāo)簽，并且把內(nèi)容修改為獲取的值。
點(diǎn)擊發(fā)布按鈕
把匿名函數(shù)賦值給按鈕的點(diǎn)擊事件，函數(shù)體內(nèi)判斷如果字?jǐn)?shù)等于140說(shuō)明是沒(méi)有輸入，如果字?jǐn)?shù)小于0說(shuō)明已經(jīng)超過(guò)長(zhǎng)度成為負(fù)值了，最后默認(rèn)正常發(fā)布成功。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 12px;
}
.weibo{
width: 600px;
height: 160px;
border:5px solid #ccc;
border-radius:5px;
margin:40px auto;
padding: 10px;
}
img{
display: inline-block;
float: left;
}
.in{
float: right;
margin-left: 255px;
width: 150px;
height: 24px;
text-align: right;
font-size: 14px;
color:#888;
}
#text{
margin-top: 5px;
height: 100px;
width:600px;
border: 1px solid #ccc;
}
.tu1,.tu2,.tu3,.tu4,.tu5,.gk{
padding-left: 26px;
height: 32px;
line-height: 32px;
width: 36px;
float: left;
}
.tu1{
background: url(images/an5.png) no-repeat left center;
}
.tu2{
background: url(images/an4.png) no-repeat left center;
}
.tu3{
background: url(images/an3.png) no-repeat left center;
}
.tu4{
background: url(images/an2.png) no-repeat left center;
}
.tu5{
background: url(images/an1.png) no-repeat left center;
}
.gk{
margin-right:15px;
color: #888;
float: right;
}
#fb{
float: right;
width: 80px;
height: 30px;
border: none;
border-radius: 5px;
background: #0a8;
color: #fff;
}
</style>
<script type="text/javascript">
var text,l,num;
window.onload=function(){
// 獲取發(fā)布按鈕
fb=document.getElementById('fb');
// 獲取編輯框
text=document.getElementById('text');
// 獲取字?jǐn)?shù)span
l= document.getElementById('zs');
text.onkeyup=function tj(){
// 字?jǐn)?shù)等于140減去文本框內(nèi)字?jǐn)?shù)長(zhǎng)度
zs = 140-text.value.length;
// 字?jǐn)?shù)如果小于0用紅色表示超過(guò)限制
if(zs<0){
l.style.color='red'
}else{
l.style.color='#999'
}
// 把字?jǐn)?shù)值賦值給l的內(nèi)容
l.innerHTML=zs;
}
// 提交發(fā)布
// 如果字?jǐn)?shù)等于140說(shuō)明沒(méi)有輸入內(nèi)容
// 如果字?jǐn)?shù)小于0說(shuō)明是發(fā)布的字?jǐn)?shù)超過(guò)限制不能發(fā)布
// 默認(rèn)發(fā)布成功
fb.onclick = function(){
if(zs ==140){
alert('您還沒(méi)有輸入內(nèi)容，不能發(fā)布');
text.focus();
}else if(zs <0){
alert('您輸入內(nèi)容過(guò)多，不能發(fā)布');
text.focus();
}else{
alert('恭喜，發(fā)布成功')
}
}
// 提交發(fā)布
tj();
}
</script>
</head>
<body>
<div>
<img src="images/12.png" alt="新鮮事">
<div>還可以輸入<span id="zs">0</span>個(gè)字</div>
<textarea name="" id="text"></textarea>
<div>表情</div>
<div>圖片</div>
<div>視頻</div>
<div>話題</div>
<div>長(zhǎng)微博</div>
<input type="button" value="發(fā)布" id="fb">
<div>公開</div>
</div>
</body>
</html>
Guru membetulkan：天蓬老師Masa pembetulan：2019-03-26 16:53:07
Rumusan guru：下次放一張圖吧, 實(shí)在不直觀, 僅從代碼看, 是正確的