前端开发系列021-基础篇之日期类型和计时器

本文介绍JavaScript语言中的Date日期类型，常见的日期格式处理方式以及计时器相关方法(主要包含setInterval以及setTimeOut)。

倒计时实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="timeID"></div>
<script>

   var endTimeStr = "2018/10/30 20:00:00";
   var oDiv = document.querySelector("#timeID");

   function count() {

       //获取当前时间
       var now = new Date().getTime();
       //获取截止时间
       var end = new Date(endTimeStr).getTime();

       //计算时间差
       var leftTime = end - now;

       //定义变量 d,h,m,s保存倒计时的时间
       var d, h, m, s, timeResult = "已结束";

       if (leftTime >= 0) {

        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        m = Math.floor(leftTime / 1000 / 60 % 60);
        s = Math.floor(leftTime / 1000 % 60);
        timeResult="距离结束的时间为：" + d + " 天 " + h + " 小时 " + m + " 分钟 " + s + " 秒"
       }

       //更新页面信息
       oDiv.innerHTML = timeResult;
   }

   setInterval(count,1000);
</script>
</body>
</html>

这里给出实现的效果

数据填充 | 补零处理

我们在真实的开发场景中可能需要在对一些数据进行处理的时候进行补零操作。什么意思呢，譬如在上面实现倒计时效果的案例中如果我需要得到的倒计时效果是：05天 04小时 27分钟 32秒的格式，那么就需要在最后进行拼接之前再进行额外的格式化处理。

我们在显示一个数字的时候(比如是5)，那么想要呈现出的结果可以是5也可以是05，这里我们主要探讨后一种情况。这里给出三种具体的实现方案，推荐使用最后一种(更高效也更直接)。

    //参数说明：
    //第一个参数:num   要具体处理的数据
    //第二个参数:length  目标数据的长度

    // 第一种实现方案
    // function PrefixInteger(num, length) {
    //     return (num/Math.pow(10,length)).toFixed(length).substr(2);
    // }

    //第二种实现方案
    // function PrefixInteger(num, length) {
    //     return ( "0000000000000000" + num ).substr( -length );
    // }

    //第三种实现方案
    function PrefixInteger(num, length) {
        return (Array(length).join('0') + num).slice(-length);
    }

    console.log(PrefixInteger(4, 2));       //04
    console.log(PrefixInteger(41, 10));     //0000000041

如果前面示例程序中倒计时中具体的时间数值需要2位对齐，不够两位的补零，那么就可以考虑在最终拼接之前调用PrefixInteger方法并指定length的值为2来进行格式化操作。这里给出对具体时间进行格式化的调用代码和结果示例。

    d = PrefixInteger(Math.floor(leftTime / 1000 / 60 / 60 / 24),2);
    h = PrefixInteger(Math.floor(leftTime / 1000 / 60 / 60 % 24),2);
    m = PrefixInteger(Math.floor(leftTime / 1000 / 60 % 60),2);
    s = PrefixInteger(Math.floor(leftTime / 1000 % 60),2);

    timeResult = "距离结束的时间为：" + d + " 天 " + h + " 小时 " + m + " 分钟 " + s + " 秒";

    //timeResult的结果示例：距离结束的时间为：08 天 04 小时 27 分钟 07 秒