摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>微博输入数字</title> <style type="text/css"> .box{ width:640px; border:8px solid pink; border-radius: 20px; margin: 20px auto; padding: 10px 8px; } .box img{ float:left; } .box div{ width:150px; text-align: right; float: left; margin-left:280px; color:#999; } .box textarea{ margin:10px 5px; /* 设置文本域不可拖动 */ resize: none; border-radius: 3px; } .box > span { float:left; width:50px; padding-left:30px; } #span1{background: url(../image/an5.png) no-repeat left center;} #span2{background: url(../image/an4.png) no-repeat left center;} #span3{background: url(../image/an3.png) no-repeat left center;} #span4{background: url(../image/an2.png) no-repeat left center;} #span5{background: url(../image/an1.png) no-repeat left center;} #span6{padding-left:90px;} .box input{ width:80px;height:30px; background: pink; border-radius: 5px; color: #fff; font-weight: bold; } </style> </head> <body> <div class="box"> <img src="../image/12.png" > <div>还可以输入<span class="num"></span>字 </div> <textarea id="text" rows="10" cols="96"></textarea> <span id="span1">表情</span> <span id="span2">图片</span> <span id="span3">视频</span> <span id="span4">话题</span> <span id="span5">长微博</span> <span id="span6">公开</span> <input type="button" name="" id="" value="发布" onclick="Draw()"/> </div> <script> //文本域、span数字、可以输入的次数 var text,number,m; window.onload=function(){ text = document.getElementById('text'); number = document.getElementsByClassName('num')[0]; text.onkeyup = function aa(){ m = 140 - text.value.length; if(m>0){ number.style.color = "#999" }else{ number.style.color = "red" } number.innerHTML = m; } } //点击 function Draw(){ if(m>0){ alert("发布成功!"); }else{ alert("字数超过最大限制,失败!") } } </script> </body> </html>