JS写的倒计时，版本1.1

最新推荐文章于 2025-08-14 17:31:00 发布

weixin_30748995

最新推荐文章于 2025-08-14 17:31:00 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/joyan/archive/2010/06/29/1767243.html

本文介绍了一个简单的自制倒计时器，用户可以根据需求输入特定日期，程序将计算并显示距离该日期的时间。在开发过程中遇到了变量引用及方法循环调用等问题，并进行了初步解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　工作之外又把前几天弄的一个倒计时改装了一下，用户可以自已设置要结束时间，水平有限，实现过程中还是遇到了一些问题，比如变量引用，方法循环调用等问题，虽说功能差不实现了，但解决问题的方法还不是最好的，还待以后改进，如果哪位朋友发现问题，可以告知我，不胜感激。

　　以下是效果（没有做验证，还请输入靠谱一点的日期，谢谢合作）

请输入要计算的日期

年--123456789101112月日

以下是源码

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>倒计时</title>
<style type="text/css">
body{font-size:12px;}
#years{width:40px; font-size:12px;}
select{font-size:12px;}
#days{font-size:12px; width:20px;}
label{margin:0 4px;}
#divYear{width:150px; padding:5px; border:1px solid #999; -moz-border-radius:5px; -moz-box-shadow:2px 2px 1px #ccc; word-wrap:break-word;}
#divYear a{cursor:pointer;padding:1px 4px;}
#divYear a:hover{background:#ccc; color:#fff;}
</style>
<script type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != "function") {
window.onload = func;
}
else {
window.onload = function(){
oldonload();
func();
}
}
}

function startTime()
{
var weekday = new Array(7);
weekday[0] = "星期日"
weekday[1] = "星期一"
weekday[2] = "星期二"
weekday[3] = "星期三"
weekday[4] = "星期四"
weekday[5] = "星期五"
weekday[6] = "星期六"

var today=new Date()
var year=today.getFullYear()
var month=today.getMonth()+1
var day=today.getDate()
var week= weekday[today.getDay()]
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
month=checkTime(month)
day=checkTime(day)
h=checkTime(h)
m=checkTime(m)
s=checkTime(s)
document.getElementById('today').innerHTML="今天是"+year+"年"+month+"月"+day+"日 "+week+" "+h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

keyYear = ""
keyNumMonth = ""
keyDay = ""
function fDate(){
keyYear = document.getElementById("years").value;
keyMonth = document.getElementById("months").value;
keyNumMonth = document.getElementById("months").selectedIndex;
keyDay = document.getElementById("days").value;
keyTime = keyMonth + " " + keyDay + "," + keyYear;
countDown(keyTime);
setTimeout("fDate()",500)

}

function countDown(j){
var nowDate = new Date();//实例化
var nowTime = nowDate.getTime();//获得当前日期的毫秒数
var newTime = Date.parse(j);//获得目标日期的毫秒数
var eTime = parseInt((Math.abs(newTime-nowTime))/1000) //得到秒数

var eS = eTime%60;//取余得到秒
var eM = parseInt(eTime/60)
var eMM = eM%60;//取余得到分钟，以后的方法就一样了
var eH = parseInt(eM/60);
var eD = parseInt(eH/24);
var eH = eH%24;
eS = checkTime(eS);
eMM = checkTime(eMM);
document.getElementById("txt").innerHTML="距离"+keyYear+"年"+keyNumMonth+"月"+keyDay+"日还有"+eD+"天"+eH+"小时"+eMM+"分"+eS+"秒"
}

function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
addLoadEvent(startTime)
</script>
</head>
<body>
<div id="today"></div>
<form>
<h3>请输入要计算的日期</h3>
<p><input type="text" value="" id="years" /><label>年</label><select id="months"><option>--</option><option value="jan" class="1">1</option><option value="feb">2</option><option value="mar">3</option><option value="apr">4</option><option value="may">5</option><option value="jun">6</option><option value="jul">7</option><option value="aug">8</option><option value="sep">9</option><option value="oct">10</option><option value="nov">11</option><option value="dec">12</option></select><label>月</label><input type="text" value="" id="days" /><label>日</label></p>
<p><input type="button" value="计算" onclick="fDate()" /></p>
</form>
<p id="txt" style="color:#f00"></p>
</body>
</html>

转载于:https://www.cnblogs.com/joyan/archive/2010/06/29/1767243.html