您的位置：首页 > Web前端 > JavaScript

js倒计时大全（读取本地时间）

2012-07-01 09:08 543 查看

已测试，兼容各浏览器。

第一个：

<script language="JavaScript">
var timedate= new Date("January 1,2013");
var now = new Date();
var date = timedate.getTime() - now.getTime();
alert(now.getTime());
var startTime = new Date();
var EndTime=startTime.getTime()+60*1000;
var submitcount = 1;
function GetRTime(){
var NowTime = new Date();
var nMS =EndTime - NowTime.getTime();
var nH=Math.floor(nMS/(1000*60*60)) % 24;
var nM=Math.floor(nMS/(1000*60)) % 60;
var nS=Math.floor(nMS/1000) % 60;

document.getElementById("RemainH").innerHTML=nH;
document.getElementById("RemainM").innerHTML=nM;
document.getElementById("RemainS").innerHTML=nS;
if ((nM==0 && nS==0) || nS<0 || nM<0)
{
if (submitcount)
{
document.getElementById("allst").submit();
document.getElementById("jiaojuan").disabled='disabled';
submitcount=0;
}
}else{
if (submitcount) setTimeout("GetRTime()",1000);
}
}
window.onload=GetRTime;
</script>
<b>还剩：</b><strong id="RemainH">0</strong>时<strong id="RemainM">0</strong>分<strong id="RemainS">0</strong>秒

第二个：

<script type="text/javascript">
var $ = function(id){ return document.getElementById(id)};
function getDate(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('');
}

function getDiffDate(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+'秒';
}
window.onload = function(){
setInterval(function(){
$("ospanTime").innerHTML = getDate(new Date());
$("diffTime").innerHTML = getDiffDate(new Date('2012/12/24')-new Date());
}, 1000);
}
</script>
当前时间:<span id="ospanTime" style="color:#FF0000;font-weight:bold"></span><br/>
距离2012年12月24日:<span id="diffTime" style="color:#FF0000;font-weight:bold"></span>

第三个（需要在<body>中加入onload调用）：

<html>
<head>
<title>倒计时测试</title>
<!--倒计时设置代码-->
<script language="JavaScript">
<!-- hide script from old browser
var DifferenceHour = -1
var DifferenceMinute = -1
var DifferenceSecond = -1
var Tday = new Date("July 1, 2013 00:00:00")   //**倒计时时间点-注意格式
var daysms = 24 * 60 * 60 * 1000
var hoursms = 60 * 60 * 1000
var Secondms = 60 * 1000
var microsecond = 1000
function clock()
{
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var timevalue = ""+((hour > 12) ? hour-12:hour)
timevalue +=((minute < 10) ? ":0":":")+minute
timevalue +=((second < 10) ? ":0":":")+second
timevalue +=((hour >12 ) ? " PM":" AM")
// document.formnow.now.value = timevalue
var convertHour = DifferenceHour
var convertMinute = DifferenceMinute
var convertSecond = DifferenceSecond
var Diffms = Tday.getTime() - time.getTime()
DifferenceHour = Math.floor(Diffms / daysms)
Diffms -= DifferenceHour * daysms
DifferenceMinute = Math.floor(Diffms / hoursms)
Diffms -= DifferenceMinute * hoursms
DifferenceSecond = Math.floor(Diffms / Secondms)
Diffms -= DifferenceSecond * Secondms
var dSecs = Math.floor(Diffms / microsecond)
if(convertHour != DifferenceHour) document.formnow.dd.value=DifferenceHour
if(convertMinute != DifferenceMinute) document.formnow.hh.value=DifferenceMinute
if(convertSecond != DifferenceSecond) document.formnow.mm.value=DifferenceSecond
document.formnow.ss.value=dSecs

document.getElementById("ddd").innerHTML=DifferenceHour;
document.getElementById("hhh").innerHTML=DifferenceMinute;
document.getElementById("mmm").innerHTML=DifferenceSecond;
document.getElementById("sss").innerHTML=dSecs;

// document.formnow.Tnow.value= DifferenceHour DifferenceMinute + DifferenceSecond + dSecs
setTimeout("clock()",1000)
}
// end hiding -->
</script>
</head>
<!--BODY里面的ONLOAD注意-->
<body onload="clock();return true">
<!--实现显示-->

距离2013.07.01活动结束还有：
<div style="font-size:30px;background:#369">
<span id="ddd"></span>天<span id="hhh"></span>小时<span id="mm"></span>分钟<span id="ss"></span>秒
<form name="formnow">
<input name="dd" type="text" style="border:0; color:red; width:15px">天
<input name="hh" type="text" style="border:0; color:red; width:15px">时
<input name="mm" type="text" style="border:0; color:red; width:15px">分
<input name="ss" type="text" style="border:0; color:red; width:15px">秒
</form>
</div>
</body>
</html>

07月17日今天找到了一个更好的，分享（精确到毫秒，很酷）：

<script language="JavaScript">
function ShowTimes(){
var AfterTime= new Date("July 18 00:00:00  2012");
LeaveTime = AfterTime - new Date();
LeaveDays=Math.floor(LeaveTime/(1000*60*60*24));//天
LeaveHours=Math.floor(LeaveTime/(1000*60*60)%24);//时
LeaveMinutes=Math.floor(LeaveTime/(1000*60)%60);//分
LeaveSeconds=Math.floor(LeaveTime/1000%60);//秒
var c=new Date();
var q=c.getMilliseconds();
if(q<10){                               //因为毫秒为一位数时只占一个字符位置，会让毫秒二字变动位置
q="00"+c.getMilliseconds();
}
if(q>=10 && q<100){                     //因为毫秒为两位数时只占两个字符位置，会让毫秒二字变动位置
q="0"+c.getMilliseconds();
}
if(LeaveDays<0){
document.getElementById("tian").innerHTML='00';
}
else{
document.getElementById("tian").innerHTML=LeaveDays;
}

if(LeaveHours<0){
document.getElementById("shi").innerHTML='00';
}
else{
document.getElementById("shi").innerHTML=LeaveHours;
}

if(LeaveMinutes<0){
document.getElementById("fen").innerHTML='00';
}
else{
document.getElementById("fen").innerHTML=LeaveMinutes;
}

if(LeaveSeconds<0){
document.getElementById("miao").innerHTML='00';
}
else{
document.getElementById("miao").innerHTML=LeaveSeconds;
}
hxtime.innerHTML="<font color=red>"+LeaveDays+"</font>天<font color=red>"+LeaveHours+"</font>时<font color=red>"+LeaveMinutes+"</font>分<font color=red>"+LeaveSeconds+"</font>秒<font color=red>"+q+"</font>毫秒";
}
setInterval(ShowTimes,10);
</script>
<div id="hxtime"></div>
<div id="tian"></div>
<div id="shi"></div>
<div id="fen"></div>
<div id="miao"></div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 浏览器时间 js倒计时

相关文章推荐

新的分享

章节导航