鼠标悬浮展开/选项卡/倒计时

选项卡

<script>
			 window.onload=function(){
			 	var otab=document.getElementById('tab');
			 	var lis=document.getElementsByTagName('li');
			 	var omenudiv=document.getElementById('box');
			 	var divs=omenudiv.children;
			    var lis_len=lis.length;
			    
			    for(var index=0;index<lis_len;index++){
			    	lis[index]._index=index;
			    	lis[index].onclick=function(){
			    		//先去掉所有酸度的类及特征
			    		for(var j=0;j<lis_len;j++){
			    			lis[j].className='';
			    			divs[j].style.display='none';
			    		}
			    		//为选定对象赋予特征
			    		this.className='off';
			    		divs[this._index].style.display="block";
			    	}
			    }
			 }
		</script>

<div id="tab">
			<div class="menu">
				<ul>
					<li class="off">标签1</li>
					<li>标签2</li>
					<li>标签3</li>
					<li>标签4</li>
				</ul>
			</div>
			<div class="menudiv" id="box">
				<div>
					<h4 style="color: #7FFFD4;">标签1-内容</h4>
				</div>
				<div style="display: none;">
					<h4 style="color: #AAAAAA;">标签2-内容</h4>
				</div>
				<div style="display: none;">
					<h4 style="color: black;">标签3-内容</h4>
				</div>
				<div style="display: none;">
					<h4 style="color: yellow;">标签4-内容</h4>
				</div>
			</div>
		</div>

== 鼠标悬浮展开==

<script>
			//声明一个变量用来存储定时器函数的标识
			var timer;
			
			 function startMove(){ 
		  clearInterval(timer);
		  var odiv=document.getElementById("box");
		  timer=setInterval(function(){
		  	//offsetLeft属性返回元素左侧距离参照元素左边界偏移量。
		    if(odiv.offsetLeft>=0){
		      clearInterval(timer);
		    }
		    else{ 
		      odiv.style.left=odiv.offsetLeft+10+"px";
		    }
		  },30);
		}	 
				function obMove(){ 
				  clearInterval(timer);
				  var odiv=document.getElementById("box");
				  timer=setInterval(function(){
				    if(odiv.offsetLeft<=-150){
				      clearInterval(timer);
				    }
				    else{ 
				      odiv.style.left=odiv.offsetLeft-10+"px";
				    }
				  },30); 
				} 
			
			window.onload=function(){
				document.getElementById('box').onmouseover=startMove;
				document.getElementById('box').onmouseout=obMove;
			}
		</script>
		<div id="box">
			<span id="span">分享到</span>
			<ul>
				<li><a href="#">sun xueying</a></li>
				<li><a href="#">femal</a></li>
				<li><a href="#">18</a></li>
			</ul>
		</div>

倒计时

	<div class="time">
			<span id="td">00天</span>
			<span id="th">00时</span>
			<span id="tm">00分</span>
			<span id="ts">00秒</span>
		</div>
		<script>
			function gettime(){
				var endtime=new Date('2021/05/01 00:00:00');
				var nowtime=new Date();
				//getTime方法返回指定时间日期的时间戳。
				var t=endtime.getTime()-nowtime.getTime();
				var d=0;var h=0;var m=0;var s=0;
				if(t>=0){
					    d=Math.floor(t/1000/60/60/24);
					    h=Math.floor(t/1000/60/60%24);
					    m=Math.floor(t/1000/60%60);
					    s=Math.floor(t/1000%60);
				}
				else {
					clearTimeout(timer);
					return;
				}
				document.getElementById('td').innerHTML=d+'天';
				document.getElementById('th').innerHTML=h+'时';
				document.getElementById('tm').innerHTML=m+'分';
				document.getElementById('ts').innerHTML=s+'秒';
				var timer=setTimeout(gettime,1000);
			}
			window.onload=function(){
				gettime();
			}
		</script>