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秒倒计时