倒计时功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/u011175410/article/details/50318615

倒计时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)取整

JS倒计时