倒计时、tab页切换
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 onload="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 onload="tab()"><div id="tab"> <div no="1">首页</li> <li no = "2">2</li> <li no="3">3</li> <li no="4">4</li> </ul> </div> <div class="hide">my best friend!!</p> </div></div></body></html>