倒计时是笔试时候很可能出现的考题之一,虽然不是很难,但是需要记忆的不少,甚是烦人。
<!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; 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);//设置每一秒调用一次倒计时函数 //根据天,时,分,秒的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 08:33: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{ //指定的结束日期结束后,往后推迟3天,或者称之为:往后加3天 //在这里可以非常灵活的设置:比如往后推迟2天或往后加2天:2*24*60*60*1000 //比如往后推迟1天或往后加1天:1*24*60*60*1000 //比如往后推迟2小时或往后加2小时:2*60*60*1000 // 比如往后推迟40分钟或往后加40分钟:40*1000这里设置根据大家需要,灵活设置。 time_end=time_end+3*24*60*60*1000; setTimeout("count_down()",1000); } } </script> </body> </html>