1. 程式人生 > >JS實現倒計時(天數,時,分,秒)

JS實現倒計時(天數,時,分,秒)

HR var HA art spl OS UNC true oop

<!DOCTYPE html>

<html> <head> <meta charset="utf-8" > <title>JS實現倒計時(天數,時,分,秒)</title> <link rel="stylesheet" type="text/css" href="../css/reset.css"> <link rel="stylesheet" type="text/css" href="../css/index.css"></head> <script type="text/javascript" src="../js/jquery1.9.min.js"></script> <body> <img src="../images/btlogo.png" class="logo"> <div id="carousel"> <div id="tabpic"> <div name="tablink" ><img src="../images/1.png"></div> <div name="tablink" ><img src="../images/2.png"></div> <div name="tablink" ><img src="../images/3.png"></div> <!-- <div name="tablink" ><img src="../images/4.png"></div> --> </div> </div> <div class="content"> <div class="title1"> <span class="ccga">&nbsp;CCGA&nbsp;</span> <span class="ccganame">發布</span> </div> <div id="timer"></div> <div id="localtime"></div> </div> <audio controls="true" autoplay="true" loop="loop"> <source src="../media/2.mp3" type="audio/mpeg" /> </audio> <!-- <embed src="media/1.mp3" hidden="true" autostart="true" loop="loop"> --> <script language="javascript" type="text/javascript"> function leftTimer(year,month,day,hour,minute,second){ var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //計算剩余的毫秒數 var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //計算剩余的天數 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //計算剩余的小時 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計算剩余的分鐘 var seconds = parseInt(leftTime / 1000 % 60, 10);//計算剩余的秒數 days = checkTime(days); hours = checkTime(hours); minutes = checkTime(minutes); seconds = checkTime(seconds); setTimeout("leftTimer(2018,04,28,17,30,61)",1000); document.getElementById("timer").innerHTML = "倒計時:&nbsp;" +days+"&nbsp;天&nbsp;" + hours+"&nbsp;時&nbsp;" + minutes+"&nbsp;分&nbsp;"+seconds+"&nbsp;秒&nbsp;"; } function checkTime(i){ //將0-9的數字前面加上0,例1變為01 if(i<10) { i = "0" + i; } return i; } function div_tab(tabName){ var tabLinkArr=document.getElementsByName("tablink"); var tabPicArr=document.getElementById("tabpic").getElementsByTagName("div"); for(var i=0;i<tabLinkArr.length;i++){ if(i==tabName){ tabLinkArr[i].style.color="#ff0000"; tabPicArr[i].style.display="block"; } else{ tabLinkArr[i].style.color="#0000ff"; tabPicArr[i].style.display="none"; } } } var i=0; function auto_tab_div(){ //如果切換到最後一張圖片則重新從第一張開始 if(i>2){ i=0; } //每5秒自動讀取下一張圖片 div_tab(i); i++; setTimeout(auto_tab_div,5000); } $(leftTimer); $(auto_tab_div); function showLocale(objD){ var str,colorhead,colorfoot; var yy = objD.getYear(); if(yy<1900) yy = yy+1900; var MM = objD.getMonth()+1; if(MM<10) MM = ‘0‘ + MM; var dd = objD.getDate(); if(dd<10) dd = ‘0‘ + dd; var hh = objD.getHours(); if(hh<10) hh = ‘0‘ + hh; var mm = objD.getMinutes(); if(mm<10) mm = ‘0‘ + mm; var ss = objD.getSeconds(); if(ss<10) ss = ‘0‘ + ss; var ww = objD.getDay(); if ( ww==0 ) colorhead="<font>"; if ( ww > 0 && ww < 6 ) colorhead="<font>"; if ( ww==6 ) colorhead="<font>"; if (ww==0) ww="星期日"; if (ww==1) ww="星期一"; if (ww==2) ww="星期二"; if (ww==3) ww="星期三"; if (ww==4) ww="星期四"; if (ww==5) ww="星期五"; if (ww==6) ww="星期六"; colorfoot="</font>" str = colorhead + "當前時間:&nbsp;" + yy + "年" + MM + "月" + dd + "日" + hh + "時" + mm + "分" + ss + "秒&nbsp;&nbsp;" + ww + colorfoot; return(str); } function tick(){ var today; today = new Date(); document.getElementById("localtime").innerHTML = showLocale(today); window.setTimeout("tick()", 1000); } tick(); </script></body> </html>

JS實現倒計時(天數,時,分,秒)