微博发布框

来源：互联网发布：有域名怎么免费建网站编辑：程序博客网时间：2024/04/29 00:50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>微博发布框</title><style>body{ font-size:12px;}#div1{ width:400px; margin:20px auto;}#div1 p{ float:right; margin:0;color: brown;}#div1 textarea{ width:400px; height:100px;}#div1 span{font-family: arial;font-size: 14px;}#div1 a{ width:50px; height:30px; font-size:16px; line-height:30px; text-align:center; float:right; background:#00FF00; color:#FFFFFF;}#div1 a.dis{ background:#CCCCCC; color:#666666;}</style><script>//onchange : 当光标消失的时候，只能触发一次//ie : onpropertychange : 输入连续触发//标准：oninput : 也是连续触发window.onload = function(){var oDiv = document.getElementById('div1');var oP = oDiv.getElementsByTagName('p')[0];var oT = oDiv.getElementsByTagName('textarea')[0];var oA = oDiv.getElementsByTagName('a')[0];var ie = !-[1,];//判断是否为ie浏览器var timer=null;var iNum=0;var bBtn=true;//相当于一个开关oT.onfocus=function(){if(bBtn){oP.innerHTML='打击虚假消息，建设文明微博，还可以输入<span>140</span>字';oP.style.color='#101234'bBtn=false;}};oT.onblur=function(){if(oT.value==''){oP.innerHTML='《新浪微博社区公约(征求意见稿)》意见征求';oP.style.color='brown' bBtn=true;}};function getLength(str){//^\x00-\xff]表示非0-255之间的字节，即中文字，把中文字随便用2个字节代替return String(str).replace(/[^\x00-\xff]/g,'aa').length;}//ie及标准浏览器下，连续触发文本域时，span区域的数字跟着变化if(ie){oT.npropertychange =toChange;oDiv.getElementsByTagName()}else{oT.oninput=toChange;}//获取span区域数字的变化function toChange(){var num=Math.ceil(getLength(oT.value)/2);var oSpan=oDiv.getElementsByTagName('span')[0];//这里的0不能省略哦if(num<140){oSpan.innerHTML=140-num;oSpan.style.color='';}else{oSpan.innerHTML=num-140;oSpan.style.color='red';}if(oT.value==''||num>140){oA.className='dis';}else{oA.className='';}};oA.onclick=function(){if(this.className=='dis'){clearInterval(timer);timer=setInterval(function(){//当不符合发布要求，点击发布，文字域背景自动闪两次，也就是，我们iNum定为5,当iNum=2或4时，背景自动变红色if(iNum==5){clearInterval(timer);iNum=0;}else{iNum++;}if(iNum%2){oT.style.background='red';}else{oT.style.background='';}},100);}else{alert("发布成功")}};};</script></head><body><div id="div1"><p>《新浪微博社区公约(征求意见稿)》意见征求</p>    <textarea></textarea>    <a class="dis" href="javascript:;">发布</a></div></body></html>
0 0