提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript逻辑练习案例：实现倒计时和显示打开时间

JavaScript案例逻辑 实现 时间 显示 打开 练习
2023-09-11 14:19:17 时间 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: #f3c;
            font-weight: 700;
            font-size: 28px;
        }

        .red {
            color: rgb(202, 18, 86);
            font-weight: 700;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <div id="showtime"></div>
    <div id="djs"></div>
</body>
<script>
    function fun() {
        var oDiv = document.getElementById("showtime");

        var mydate = new Date();
        var yeAr = mydate.getFullYear();  // 年
        var moNth = mydate.getMonth() + 1;  // 月
        var daTe = mydate.getDate();  //日
        var d = mydate.getDay(); // 星期
        var daY;
        // 让阿拉伯数字变成大写的数字
        switch (d) {
            case 0:
                daY = "日"
                break;
            case 1:
                daY = "一"
                break;
            case 2:
                daY = "二"
                break;
            case 3:
                daY = "三"
                break;
            case 4:
                daY = "四"
                break;
            case 5:
                daY = "五"
                break;
            case 6:
                daY = "六"
                break;
        }

        //赋值  时 分 毫秒
        var hoHrs = mydate.getHours();
        var minuTes = mydate.getMinutes();
        var miao = mydate.getSeconds();
        var amPm = hoHrs >= 12 ? 'PM' : 'AM'; // 判断上下午

        hoHrs = setNum(hoHrs);
        minuTes = setNum(minuTes);
        miao = setNum(miao);
        function setNum(n) {
            return n < 10 ? "0" + n : n;
        }

        var shiFenMiao = hoHrs + ":" + minuTes + ":" + miao + "&nbsp;" + amPm;

        oDiv.innerHTML = (`<div class="box">今天是 <span>${yeAr}</span>年 <span>${moNth}</span>月 <span>${daTe}</span>日 星期<span>${daY}</span> <span>${shiFenMiao}</span>`);
    }
    fun()
    setInterval(fun, 1000);

    //求倒计时：
    function miaoSha() {
        var nowTime = new Date().getTime();
        var futureTime = new Date('2022/10/1').getTime();
        var factTime = (futureTime - nowTime) / 1000;
        var day = parseInt(factTime / 86400);
        var h = parseInt(factTime / 3600) - 24 * day;
        var m = parseInt(factTime % 3600 / 60);
        var s = parseInt(factTime % 60);

        h = secNum(h);//时
        m = secNum(m);//分
        s = secNum(s);//秒

        function secNum(n) {
            return n < 10 ? "0" + n : n;
        }
        //djs.innerHTML = day + "天" + h + "小时" + m + "分" + s + "秒";

        djs.innerHTML = `距离2022年10月1日还有 <span class="red">${day}</span>天 <span class="red">${h}</span>小时 <span class="red">${m}</span>分钟 <span class="red">${s}</span>秒`;
    }
    miaoSha();
    setInterval(miaoSha, 1000);


</script>

</html>

运行结果

 注意：

  1. 有颜色的字体是会动的，因为加了属性；
  2. 如果过了这个倒计时时间，会显示负数，因为没有设置

相关文章