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

补充:

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>

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值