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

男娘i 2021-12-15 06:34 310阅读 0赞

补充：

1、innerHTML:

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

2、innerText:

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

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

3.效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70][]

代码：

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70]: /images/20211214/76e06fdaf35a4abf971bfefd11b99707.png