js(javascript)倒计时源码
开始倒计时效果：如下图效果
倒计时结束效果：如下图效果
<!-----------------------------------------源码------------------------------------------------------------->
<!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>js倒计时源码</title>
</head>
<body>
<div id="times_container" style="border:1px; border-color:#999999; border-style:solid; background:#333333; color:#ffffff; width:500px; height:40px; line-height:40px; font-size:24px">
距离活动结束还有：<span id="times_day"> </span>天
<span id="times_hour"> </span>时
<span id="times_minute"> </span>分
<span id="second"> </span>秒
</div>
<script type="text/javascript" language="javascript">
settimeout("count_down()",1000);//设置每一秒调用一次倒计时函数
//获取容器元素 var times_container = document.getelementbyid("times_container");
//根据天，时，分，秒的id找到相对应的元素
var time_day = document.getelementbyid("times_day");
var time_hour = document.getelementbyid("times_hour");
var time_minute = document.getelementbyid("times_minute");
var time_second = document.getelementbyid("second");
var time_end = new date("2013/10/04 09:21:00"); // 设定活动结束结束时间
time_end = time_end.gettime();
//定义倒计时函数
function count_down(){
var time_now = new date(); // 获取当前时间
time_now = time_now.gettime();
var time_distance = time_end - time_now; // 时间差：活动结束时间减去当前时间
var int_day, int_hour, int_minute, int_second;
if(time_distance >= 0){
// 相减的差数换算成天数
int_day = math.floor(time_distance/86400000)
time_distance -= int_day * 86400000;
// 相减的差数换算成小时
int_hour = math.floor(time_distance/3600000)
time_distance -= int_hour * 3600000;
// 相减的差数换算成分钟
int_minute = math.floor(time_distance/60000)
time_distance -= int_minute * 60000;
// 相减的差数换算成秒数
int_second = math.floor(time_distance/1000)
// 判断小时小于10时，前面加0进行占位
if(int_hour < 10)
int_hour = "0" + int_hour;
// 判断分钟小于10时，前面加0进行占位
if(int_minute < 10)
int_minute = "0" + int_minute;
// 判断秒数小于10时，前面加0进行占位
if(int_second < 10)
int_second = "0" + int_second;
// 显示倒计时效果
time_day.innerhtml = int_day;
time_hour.innerhtml = int_hour;
time_minute.innerhtml = int_minute;
time_second.innerhtml = int_second;
settimeout("count_down()",1000);
}else{
//如果您想在活动结束后提示什么信息，就写在下边的单引号内
times_container.innerhtml="对不起，活动结束，倒计时完毕!!";
}
}
</script>
</body>
</html>
PC.Zx98.com
网友评论：