前端倒计时与Tab切换-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_6753/article/details/81934416

1、倒计时程序：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
 function CountDown(){
     var currTime = new Date();
	 var endTime = new Date("2010/11/16 00:00:00");
	 var cmill = endTime.getTime() - currTime.getTime();
	 var cday = Math.floor(cmill/(24*60*60*1000));
	 cmill = cmill - cday*(24*60*60*1000);
	 var chour = Math.floor(cmill/(60*60*1000));
	 cmill = cmill - chour*(60*60*1000);
	 var cm = Math.floor(cmill/(60*1000));
	 cmill = cmill - cm*(60*1000);
	 var cs = Math.floor(cmill/(1000));
	 cs = ((cs>9)? "":"0")+cs;
     document.getElementById("djs").innerHTML = "我的生日倒计时："+cday +"天"+chour+"时"+cm +"分"+cs+"秒";
     setTimeout("CountDown()",1000);
 }

</script>
</head>

<body οnlοad="CountDown()">
<div id="djs"></div>
</body>
</html>

2、tab表单切换-无后台数据传入

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tab切换</title>
<style type="text/css">
#tab{ position:relative; width:350px;}
#tab .caption{ position:relative; top:1px;}
#tab ul li{ float:left; height:26px; line-height:26px; text-align:center; display:block; width:50px; margin-right:3px; border:1px solid #FF6666; list-style:none; cursor:pointer;
font-size:12px; background:none repeat scroll #F3F3F3; position:relative;}
#tab .content{border:1px solid #FF6666; clear:both;padding:10px; height:154px;}
#tab .caption ul .curr{ top:1px; background-color:#ffffff; border-bottom:none; z-index:2;}
#tab p{ position:absolute;}
.hide{ visibility:hidden;}
.show{ visibility:visible;}
</style>
<script type="text/javascript" language="javascript">
 function tab(){
   var tagli = tag("li");
   var tagp = tag("p");
   for(var i = 0; i<tagli.length; i++){
     tagli[i].onmouseover = function(){
	   for(var j = 0; j < tagli.length; j++){
	     tagli[j].className = "";
	   }
	   this.className = "curr";
	   var no = this.getAttribute("no");
	   for(var k = 0; k<tagp.length;k++){
	      tagp[k].className = "hide";
	   }
	   $("ct"+no).className = "show";

           // $("ct"+no).innerHTML = "后台数据传入"+no; //后台传入数据的情况 
	 }
   }
   
 }
 function $(ID){
   return document.getElementById(ID);
 }
function tag(tagname){
  return document.getElementsByTagName(tagname);
}
</script>
</head>

<body οnlοad="tab()">
<div id="tab">
  <div class="caption">
     <ul>
	   <li class="curr" no="1">首页</li>
	   <li class="" no = "2">2</li>
	   <li class="" no="3">3</li>
	   <li class="" no="4">4</li>
	 </ul>
  </div>
  <div class="content">
     <p id="ct1" class="show">happy</p>
	 <p id="ct2" class="hide">every</p>
	 <p id="ct3" class="hide">day</p>
	 <p id="ct4" class="hide">my best friend!!</p>
  </div>
</div>
</body>
</html>

倒计时、tab页切换