Data内置对象

放假倒计时

一、涉及知识点：

内置对象Data的使用+定时器

二、关于内置对象Data：

• 何为内置对象？

内置对象是JS自带的对象。不需要声明，不需要创建，就可直接使用它，用它的属性来构建我们所需的效果。像window、document、Array等都是内置对象。
在JS中凡是涉及时间的对象都要运用到Data内置对象，如：轮播图、倒计时等等。

---

Data对象常用的函数：

getFullYear()	获取年份
getMonth()	获取月份 0-11
getDate()	获取日期 1-31
getDay()	获取星期 0-6
getHours()	获取小时 0-23
getMinutes()	获取分钟 0-59
getSeconds()	获取秒 0-59
getMilliseconds()	获取毫秒
getTime()	返回现在距1970/1/1的毫秒数

---

• 定时器：setInterval(‘event’,interval)

放在定时器里面的内容event每隔一段时间间隔interval（单位为：毫秒）就会进行刷新执行。

三、实现思路

1. 自定义当前时间，设置放假时间
2. 获取放假时间距当前时间的时间差（毫秒），再转化成天、小时、分钟、秒。
3. 对时间的显示进行优化

四、JS代码

可用new Data()来定义任意一个时间，根据参数的不同来定义过去、现在（无参数时默认是获取现在的时间）、未来。
过去的时间：var preData=new Data(‘2017/11/29 22:19:25’);
现在的时间：var currentData=new Data();
将来的时间：var nextData=new Data(‘2019/11/29 22:19:25’);

<script>
        window.onload = function () {
        // 1.获取需要的标签
        var time = document.getElementById('time');

        // 2. 自定义将来的时间（不变）
        var nextDate = new Date('2019/01/11 00:00:00');

        // 3. 开启定时器,不断获取当前的时间（变化）
        setInterval(function () {
            // 4. 获取现在的时间
            var currentDate = new Date();

            // 5. 5.获取时间戳(用量化的方式将时间转化成毫秒，利于求未来时间与当前时间的间隔)
            var currentTime = currentDate.getTime();
            var nextTime = nextDate.getTime();

            // 6.计算未来与现在的时间戳
            var Time = nextTime - currentTime;

            // 6.1将毫秒转化成秒并取整
            var Seconds = parseInt(Time / 1000);

            // 6.2将时间戳转化成年月日小时分钟秒
            var day=parseInt(Seconds/3600/24);
            var hour=parseInt(Seconds/3600%24);
            var minute=parseInt(Seconds/60%60);
            var second=parseInt(Seconds%60);

                //7.拼接
                time.innerText="距离放假还有"+day+"天"+hour+"小时"+minute+"分钟"+second+"秒";
            },1000)
    }
</script>

效果截图：

五、对时间的显示格式优化

1. 对时间的显示再进行优化，做一个简单的拼接，让时间显示两位数（对于天数默认两位数，三位数另行调整）

//让时间的显示位数固定
function size(number) {
            return number >= 10 ? number : '0' + number;

2. 将day、hour、minute、second进行包装：

var day = size(parseInt(Seconds/3600/24));
var hour = size(parseInt(Seconds/3600%24));
var minute = size(parseInt(Seconds/60%60));
var second = size(parseInt(Seconds%60));

效果截图：