微博发布框

最新推荐文章于 2022-11-10 08:40:17 发布

小允子

最新推荐文章于 2022-11-10 08:40:17 发布

阅读量418

点赞数

分类专栏：小模块设计文章标签： javascript html css 微博发布

本文链接：https://blog.csdn.net/qq_26297581/article/details/51506231

版权

小模块设计专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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.οnfοcus=function(){
		if(bBtn){
			oP.innerHTML='打击虚假消息，建设文明微博，还可以输入<span>140</span>字';
			oP.style.color='#101234'
			bBtn=false;
		}
	
		
	};
	oT.οnblur=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.οninput=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.οnclick=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

收藏

觉得还不错? 一键收藏
0
评论
微博发布框

微博发布框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:
复制链接

扫一扫

专栏目录