zoukankan      html  css  js  c++  java
  • 仿新浪微博发布

    <script>
    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,];
    	var iNum=0;
    	var bBtn=true;//默认是true的
    	var timer=null;
    	oT.onfocus=function(){
    		oP.innerHTML="发言请遵守社区公约,还可以输入<span>140</span>字";
    		
    	}
    	oT.onblur=function(){
    		if(oT.value==''){
    			oP.innerHTML="高一男生寝室照走红,整齐优雅很小资(图) 热门微博";
    		}
    	}
    	//连续点击事件 ie和标准不一样
    	if(ie){
    		oT.onpropertychange=toChange;//连续点击触发toChange事件
    	}else{
    		oT.oninput=toChange;
    	}
    	
    	function toChange(){
    		var num=Math.ceil(getLength(oT.value)/2)///有多少个字
    		var oSpan=oDiv.getElementsByTagName("span")[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='';	
    			
    		}
    	}
    	//双字节转换为单字节 求的他们的length 
    	function getLength(str){
    		return String(str).replace(/[^\x00-\xff]/g,"aa").length;
    	}
    	oA.onclick=function(){
    		
    		if(this.className=="dis"){
    			
    			clearInterval(timer);
    			
    			timer=setInterval(function(){
    				if(iNum==5){
    					clearInterval(timer);
    					iNum=0;
    				}else{
    					iNum++;
    				}
    				if(iNum%2){//一次红色一次白色  和奇偶一个道理
    					oT.style.background="red";
    					
    				}else{
    					oT.style.background="";
    				}
    				
    			},100);
    		}else{
    			alert("发布成功")	
    		}
    	}
    }
    
    </script>
    
  • 相关阅读:
    【转载】CSS的inline、block与inline-block
    MySQL常用语法
    JS模态对话框
    CS3常用属性手记
    画布常用手记
    CSS属性常用手记
    H5试题
    window对象常用手记
    js对象常用手记
    常用DOM对象手记
  • 原文地址:https://www.cnblogs.com/xiaomier/p/2998336.html
Copyright © 2011-2022 走看看