abstract:总结:发布微博先获取一下微博字数、编辑框、发布按钮的元素,然后使用键盘onkeyup事件绑定匿名函数函数内用140个长度减文本框值的长度赋值给zs如果zs小于0的时候,字数颜色是红色或者颜色是#999最后把zs的值赋值赋值给“l”也就是获取的字数标签,并且把内容修改为获取的值。点击发布按钮 把匿名函数赋值给按钮的点击事件,函数体内判断如果字数等于140说明是没有输入,如果字数小于0说明已
总结:发布微博
先获取一下微博字数、编辑框、发布按钮的元素,然后使用键盘onkeyup事件绑定匿名函数
函数内用140个长度减文本框值的长度赋值给zs
如果zs小于0的时候,字数颜色是红色
或者颜色是#999
最后把zs的值赋值赋值给“l”也就是获取的字数标签,并且把内容修改为获取的值。
点击发布按钮
把匿名函数赋值给按钮的点击事件,函数体内判断如果字数等于140说明是没有输入,如果字数小于0说明已经超过长度成为负值了,最后默认正常发布成功。
<!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(){ // 获取发布按钮 fb=document.getElementById('fb'); // 获取编辑框 text=document.getElementById('text'); // 获取字数span l= document.getElementById('zs'); text.onkeyup=function tj(){ // 字数等于140减去文本框内字数长度 zs = 140-text.value.length; // 字数如果小于0用红色表示超过限制 if(zs<0){ l.style.color='red' }else{ l.style.color='#999' } // 把字数值赋值给l的内容 l.innerHTML=zs; } // 提交发布 // 如果字数等于140说明没有输入内容 // 如果字数小于0说明是发布的字数超过限制不能发布 // 默认发布成功 fb.onclick = function(){ if(zs ==140){ alert('您还没有输入内容,不能发布'); text.focus(); }else if(zs <0){ alert('您输入内容过多,不能发布'); text.focus(); }else{ alert('恭喜,发布成功') } } // 提交发布 tj(); } </script> </head> <body> <div> <img src="images/12.png" alt="新鲜事"> <div>还可以输入<span id="zs">0</span>个字</div> <textarea name="" id="text"></textarea> <div>表情</div> <div>图片</div> <div>视频</div> <div>话题</div> <div>长微博</div> <input type="button" value="发布" id="fb"> <div>公开</div> </div> </body> </html>
Correcting teacher:天蓬老师Correction time:2019-03-26 16:53:07
Teacher's summary:下次放一张图吧, 实在不直观, 仅从代码看, 是正确的