JavaScript中的Date标签——“模拟日历和倒计时”

最新推荐文章于 2022-05-05 19:36:59 发布

微子细

最新推荐文章于 2022-05-05 19:36:59 发布

阅读量409

点赞数

分类专栏：练习实例 JavaScript 文章标签： date JS 日历倒计时

原文链接：https://github.com/qianguyihao/web

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

练习实例

6 篇文章 0 订阅

订阅专栏

补充：

1、innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

2、innerText:

　　从起始位置到终止位置的内容, 但它去除Html标签

小结：innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用
innerText

3.效果图：

代码：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 1000px;
            margin: 100px auto;
            color: red;
            text-align: center;
            font: 700 30px/30px "宋体";
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>

    <script>
        // 项目1：日历
        // 步骤1
        var date = new Date();

        // 步骤2
        var year = date.getFullYear();
        var month = date.getMonth();
        var hao = date.getDate();
        var week = date.getDay();
        var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

        // 步骤3
        var doo = document.getElementsByTagName("div")[0];
        doo.innerText = "今天是：" + year + "年" + (month + 1) + "月" + hao + "日 " + arr[week];/* 内置文本 */

        // 项目2：倒计时
        var div2 = document.getElementsByTagName("div")[1];

        var timer = setInterval(fn, 1);//设置定时器，1毫秒跳动1次

        function fn() {
            //获取时间差：未来时间减去此刻的毫秒值
            var nowtime = new Date();
            var future = new Date("2019/10/01 00:00:00");
            var timeSum = future.getTime() - nowtime.getTime();

            //根据时间差分别计算天数，小时数等，parseInt() 函数可解析一个字符串，并返回一个整数。

            var day = parseInt(timeSum / 1000 / 60 / 60 / 24);
            var hour = parseInt(timeSum / 1000 / 60 / 60 % 24);
            var minu = parseInt(timeSum / 1000 / 60 % 60);
            var sec = parseInt(timeSum / 1000 % 60);
            var millsec = parseInt(timeSum % 1000);

            //问题处理：所有的时间小于10的时候，在前面自动补0，毫秒值要补双0（比如如，把 8 秒改成 08 秒）
            day = day < 10 ? "0" + day : day;  //day小于10吗？如果小于，就补0；如果不小于，就是day本身
            hour = hour < 10 ? "0" + hour : hour;
            minu = minu < 10 ? "0" + minu : minu;
            sec = sec < 10 ? "0" + sec : sec;
            if (millsec < 10) {
                millsec = "00" + millsec;
            } else if (millsec < 100) {
                millsec = "0" + millsec;
            }

            // 输出
            if (timeSum < 0) {
                div2.innerHTML = "距离建国70周年还有00天00小时00分00秒000毫秒";
                clearInterval(timer);/* 清除定时器 */
                return;
            }
            div2.innerHTML = "距离建国70周年还有" + day + "天" + hour + "小时" + minu + "分" + sec + "秒" + millsec + "毫秒";
        }
    </script>
</body>

</html>