JS倒计时

来源：互联网发布：mac os虚拟机性能优化编辑：程序博客网时间：2024/06/05 17:20

倒计时1：输出当前系统时间：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>获取当前系统时间</title>    <script>    window.onload = function(){        // 获取body元素        var oBody = document.body;        // 设置定时器，每隔1秒执行一次该函数        setInterval(fnTime,1000);        //页面加载完先执行日期函数，防止刷新时显示空白        fnTime();        // 将小于两位的数字变成两位的数字        function toDouble(num){            return num < 10 ? '0' + num : '' + num;        };        // 时间函数体        function fnTime(){            // 获取日期对象            var myDate = new Date();            // 获取年月日时分秒            var iYear = myDate.getFullYear();            var iMonth = myDate.getMonth()+1;            var iDay = myDate.getDay();            var iHour = myDate.getHours();            var iMin = myDate.getMinutes();            var iSec = myDate.getSeconds();            var str = '';            // 将iDay的值对应iWeek数组的下标来获取星期            var iWeek = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];            // 将当前的年月日时分秒保存在字符串str中            str = '今天是：' + iYear + '年' + iMonth + '月' + iWeek[iDay] + ',' + toDouble(iHour) + ':' + toDouble(iMin) + ':' + toDouble(iSec);            // 将时间直接输出到body页面上显示出来            oBody.innerHTML = str;        };    };    </script></head><body>    </body></html>

注意点：
1）getMonth()返回值是 0——11

在获取月份的时候就得在后面加1，不然获取到的是上一个月的月份。

2）getDay()返回星期几（0——6）
0 ——> 星期日
1 ——> 想起一
2 ——> 星期二
3 ——> 星期三
4 ——> 星期四
5 ——> 星期五
6 ——> 星期六
思想：放入数组iWeek = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];，利用数组下标与getDay()的值对应取值

3）细节问题：将一位数处理成两位数的表示

通过toDouble函数三目运算判断或者用if else 判断

倒计时限时抢购1：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>倒计时</title><script>window.onload = function(){var timer = null;timer = setInterval(countDown,1000);countDown();function countDown(){var  oTime = document.getElementById('time');// 获取当前时间(不变)var oNow = new Date();// 获取未来时间(在变) 【如果时间过期，可以修改下面参数】var oNew = new Date('2016/1/1,00:00:00');// 获取剩余时间的秒数// var t = Math.floor((oNew - oNow)/1000);var t = Math.floor((oNew.getTime() - oNow.getTime())/1000);// console.log(t);// 获取天时分秒var d = Math.floor(t/(60*60*24));var h = Math.floor(t/(60*60)%24);var m = Math.floor(t/60%60);var s = Math.floor(t%60);// console.log(m);var str = '距离2016年倒计时：' + d + '天' + toDouble(h) + '时' + toDouble(m) + '分' + toDouble(s) + '秒';oTime.innerHTML = str;if(t<=0){clearInterval(timer);}// 将一位数字转成两位数字function toDouble(num){return num < 10 ? '0' + num : '' + num;};};};</script></head><body><p id='time'></p></body></html>

倒计时限时抢购1-2：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>倒计时</title><style>#time{ font-size: 30px; font-weight: bold;}</style><script>window.onload = function(){var oDay = document.getElementById('day');var oHour = document.getElementById('hour');var oMin = document.getElementById('min');var oSec = document.getElementById('sec');var timer = null;timer = setInterval(countDown,1000);countDown();function countDown(){// 获取当前时间(不变)var oNow = new Date();// 获取未来时间(在变) 【如果时间过期，可以修改下面参数】var oNew = new Date('2016/1/1,00:00:00');// 获取剩余时间的秒数var t = Math.floor((oNew.getTime() - oNow.getTime())/1000);// console.log(t);// 获取天时分秒var d = Math.floor(t/(60*60*24));var h = Math.floor(t/(60*60)%24);var m = Math.floor(t/60%60);var s = Math.floor(t%60);if(t<=0){clearInterval(timer);}oDay.innerHTML = toDouble(d);oHour.innerHTML = toDouble(h);oMin.innerHTML = toDouble(m);oSec.innerHTML = toDouble(s);// 将一位数字转成两位数字function toDouble(num){return num < 10 ? '0' + num : '' + num;};};};</script></head><body><p id='time'>距离2016年倒计时：<span id="day">0</span>天<span id="hour">0</span>时<span id="min">0</span>分<span id="sec">0</span>秒</p></body></html>

倒计时关键点：

1）知道当前时间new Date()和结束时间new Date("2015,6,10"); 可通过new Date("2015,6,10");自定义时间

2）调用getTime()将时间转换成毫秒来进行运算

3）将毫秒转换成天的计算

1天 = 24h, 1h=60m, 1m=60s, 1s=1000ms

4)Math.floor()用于取整，只取数字的整数部分，即省掉小数部分。如果是字符串就只取字符串中开头的数字，如果开头没有数字就返回NaN。

5）计算剩余小时，分钟，秒需要注意的问题：

需要采用求余，整数部分是比其大一单位的，所以需要取余数部分，采用Math.floor()再取整数部分，是因为小数部分是比其小一单位的来计算。

比如求还剩多少小时：times的单位是秒，先把times换算成小时，即times/(60*60)，总的剩余times/(60*60)小时，但是现在要除去天的时间，所以times/(60*60)%24 去掉

了天的部分，取余得到小时，此时times/(60*60)%24可能为小时，调用Math.floor(times/(60*60)%24)取整

0 0