這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡(jiǎn)單頁面倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)簡(jiǎn)單頁面倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下

話不多說，直接貼代碼

body

{

color:red;

text-align: center;

}

.one{

color:black;

text-align:center;

}

日期倒計(jì)時(shí)

請(qǐng)輸入目標(biāo)日期并點(diǎn)擊按鈕，實(shí)現(xiàn)目標(biāo)日期的倒計(jì)時(shí)！

年

月

日

時(shí)

分

秒

function getdate(clock){

var now=new Date();

var y=now.getFullYear()

var m=now.getMonth()

var d=now.getDate()

var day=now.getDay()

var h=now.getHours()

var minu=now.getMinutes()

var s=now.getSeconds()

m+=1;

var array=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")

var nowtime=y+"年"+m+"月"+d+"日 "+array[day]+" "+h+"時(shí)"+minu+"分"+s+"秒";

clock.innerHTML="當(dāng)前時(shí)間："+nowtime;

}

window.οnlοad=function(){

window.setInterval("getdate(time)",1000)

}

:

距離目標(biāo)日期還有：

var flag=1;var t;

function leftTime(){

if(flag==0){flag=1;}

year=document.getElementById("a").value;

month=document.getElementById("b").value;

day=document.getElementById("c").value;

hour=document.getElementById("d").value;

minute=document.getElementById("e").value;

second=document.getElementById("f").value;

var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date());

//計(jì)算剩余的毫秒數(shù)

if(leftTime>0){

var days = parseInt(leftTime/1000/60/60/24,10); //計(jì)算剩余的天數(shù)

var hours = parseInt(leftTime/1000/60/60%24,10); //計(jì)算剩余的小時(shí)

var minutes = parseInt(leftTime/1000/60%60,10);//計(jì)算剩余的分鐘

var seconds = parseInt(leftTime/1000%60,10);//計(jì)算剩余的秒數(shù)

document.getElementById("cha").value=days+"天" + hours+"小時(shí)" + minutes+"分"+seconds+"秒";

}

else{

document.getElementById("cha").value="0天0小時(shí)0分0秒";

alert("主人，時(shí)間到啦！")

flag=0;clearInterval(t);

}

if(flag==1){

t=setInterval("leftTime()",1000);

flag=2;

}

}

第一次寫完測(cè)試的時(shí)候，發(fā)現(xiàn)時(shí)間到了之后頁面一直不斷彈出提示框，后面百度了下發(fā)現(xiàn)每調(diào)用一次setInterval周期性調(diào)用函數(shù)就要設(shè)置一次clearInterval來關(guān)閉，于是通過設(shè)置flag來實(shí)現(xiàn)；最終代碼如上所示。運(yùn)行結(jié)果如下：

時(shí)間到：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持炫H5(xyhtml5.com)。

總結(jié)

以上是生活随笔為你收集整理的js实现html页面倒计30秒,javascript实现简单页面倒计时的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。