您的位置：首页 > Web前端 > JavaScript
微博发布框

2016-05-26 12:37 519 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： javascript html css 微博发布
相关文章推荐
新的分享
章节导航