web後台倒計時js,網頁實現倒計時程序

本文目錄一覽：

• 1、javaWeb中如何做倒計時
• 2、JS 倒計時問題,手機網頁後台運行時，js會暫停
• 3、JS倒計時頁面代碼（要求讀取伺服器時間）
• 4、web後台這側登錄倒計時js怎麼用

javaWeb中如何做倒計時

input type=”button” value=”倒計時” id=”button1″

onClick=”timedMsg()”

script type=”text/javascript”

var c=5;

var t;

function timedMsg()

{

document.getElementById(‘button1’).value=”倒計時”+c;

document.getElementById(‘button1’).disabled=true;

if(c==0){

clearTimeout(t);

window.location.href=”url”;//為跳轉地址

}else{

t=setTimeout(‘timedMsg()’,1000);

}

c–;

}

/script

點擊按鈕開始倒計時，當計時為0的時候跳轉

setTimeout設置多少時間調用函數，返回值用於清除定時器

JS 倒計時問題,手機網頁後台運行時，js會暫停

如果我答得好請給我一點分

在html5中document新增了一個事件 visibilitychange,這個事件在頁面前台或後台切換時被觸發，你所說的問題就簡單了，它也有個對應的屬性visibilityState,用於檢測當前頁面的狀態值為hidden還是visible。

解法是，在hidden時記錄當前時間，在visible時用當前時間減去之前記錄的時間就為當前倒計時需要減去的時間，這也就不需要和後台溝通了，或者你直接在visible時刷新頁面也行，下面是小樣，你測試一下

var b=getTime();

function getTime()

{

return Date.now();

}

document.addEventListener(‘webkitvisibilitychange’,function()

{

if(document.webkitVisibilityState==’hidden’)

{

b=getTime();

}else

{

document.body.appendChild(document.createTextNode(‘間隔:’+(getTime()-b)))

}

})

document.addEventListener(‘mozvisibilitychange’,function()

{

if(document.mozVisibilityState==’hidden’)

{

b=getTime();

}else

{

document.body.appendChild(document.createTextNode(‘間隔:’+(getTime()-b)))

}

})

JS倒計時頁面代碼（要求讀取伺服器時間）

用JavaScript獲取伺服器時間，然後做頁面倒計時的程序代碼如下：

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “” 

html xmlns=”” xml:lang=”en” lang=”en”  

head  

meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/  

titleuntitled/title  

script type=”text/javascript”

get=function (id){

return document.getElementById(id)

}  

if(document.all){  

window.XMLHttpRequest=function(){  

var get=[‘Microsoft.XMLHTTP’,’Msxml2.XMLHTTP’];  

for(var i=0;iget.length;i++)

{

  try{

   return new ActiveXObject(get[i])

   }

  catch(e){}

};  

};  

}  

webDate=function(fn){  

var Htime=new XMLHttpRequest();  

Htime.onreadystatechange=function(){

  Htime.readyState==4(fn(new Date(Htime.getResponseHeader(‘Date’))))

  };  

  Htime.open(‘HEAD’, ‘/?_=’+(-new Date));  Htime.send(null);  

}  

window.time=new Date();  

targetTime=new Date();  

time2String=function (t){  

with(t)return [getFullYear(),’年’  ,(‘0’+(getMonth()+1)).slice(-2),’月’  ,(‘0’+getDate()).slice(-2),’日 ‘  ,(‘0’+getHours()).slice(-2),’: ‘  ,(‘0’+getMinutes()).slice(-2),’: ‘  ,(‘0’+getSeconds()).slice(-2)].join(”)  

}  

int2time=function (m){

  m-=(D=parseInt(m/86400000))*86400000;  m-=(H=parseInt(m/3600000))*3600000;  S=parseInt((m-=(M=parseInt(m/60000))*60000)/1000);  

  return D+’天’+H+’小時’+M+’分’+S+’秒’  

  }  

  setInterval(function (){ 

   webDate(function (webTime){  

         get(‘web’).innerHTML=time2String(time=webTime);  

         })  

   get(‘locale’).innerHTML=time2String(new Date);  

   get(‘time’).innerHTML=int2time(targetTime-time);  

   if ((targetTime-time)0) {  

   get(‘time’).innerHTML = ‘Game Over’;  

   }  },1000)  

/script  

/head  

body  

設定時間：2015年06月18日0時0分0秒br  伺服器時間:span id=’web’loading…/spanbr  

本地時間:span id=”locale”loading…/spanbr  

倒計時時間:span id=”time”loading…/span  

script type=”text/javascript” charset=”utf-8″  targetTime=new Date(2015,06,18,00,00,00);  /script  

/body 

/html

註：原理用xmlhttp來獲取伺服器上的時間，後台用js做倒計時顯示到頁面上，由於獲取伺服器時間這個在本地運行不一定能成功，最好是在伺服器上運行！

web後台這側登錄倒計時js怎麼用

var t=60;

var a=setInterval(daojishi,1000);//1000毫秒

function daojishi(){

t–;

//刷新時間顯示

if(t==0){

clearInterval(a);

//倒計時結束

}

}

描述:60秒倒計時