【Javascript】之时间例子与倒计时

最新推荐文章于 2023-02-11 19:36:45 发布

夹心776655

最新推荐文章于 2023-02-11 19:36:45 发布

阅读量97

点赞数

分类专栏： js交互设计代码实例文章标签： javascript

本文链接：https://blog.csdn.net/qq_37086980/article/details/110426279

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

在这里插入图片描述

描述: 时间格式如图所示, 且一直在变化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time Format</title>
</head>

<body>

    <script>
        auto();

        // 每一秒都更新一次页面
        setInterval(auto, 1000);
        function auto() {
            // 获取时间
            var date = new Date();
            console.log(date);

            // 单个时间
            var y = date.getFullYear();
            console.log(y);
            var m = date.getMonth() + 1;
            var d = date.getDate();

            var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var w = date.getDay();

            console.log(m, d, w, week[w]);

            var hh = date.getHours();
            var mm = date.getMinutes();
            var ss = date.getSeconds();
            console.log(hh, mm, ss);
            document.body.innerHTML = '' + y + '年' + add0(m) + '月' + add0(d) + '日  ' + week[w] + '  ' + add0(hh) + ':' + add0(mm) + ':' + add0(ss);
        }

        // 当数字<10的时候需要补0
        // 函数---专门给一个数字补0
        var num = 8;
        console.log(add0(num));

        function add0(n){
            if(n < 10){
                return '0' + n;
            } else {
                return n;
            }
        }
    </script>
</body>

</html>

倒计时

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.倒计时</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            width: 500px;
            height: 500px;
            margin: 20px auto;
            background-color: #eeeeee;
            text-align: center;
            overflow: hidden;
        }
        #wrap > h3{
            font: bold 33px/1 "微软雅黑";
            color: #fff;
            margin: 35px 0 65px 0;
        }
        #wrap .futuretime > input{
            width: 108px;
            height: 20px;
            text-indent: 5px;
            outline: none;
        }
        #wrap > button{
            width: 160px;
            height: 160px;
            border-radius: 50%;
            margin-top: 30px;
            background-color: #000000;
            color:#ffff00;
            font: 40px/1 "微软雅黑";
            outline: none;
        }
        #wrap > p{
            margin-top: 20px;
        }
        #wrap > p > span{
            font-size: 25px;
            color:#ffff00;
        }
        #wrap > p > b{
            font: 40px/1 'Arial';
            color:#ffff00;
        }
        #wrap > p > i{
            font: 30px/1 "微软雅黑";
            color:#fff;
        }
    </style>
</head>
<body>
    <!-- 1. 布局 -->
    <div id="wrap">
        <h3>倒计时</h3>

        <!-- 输入框输入年、月、日 -->
        <div class="futuretime">
            <label>请输入 : </label>
            <input type="text" name="year" id="year">年
            <input type="text" name="month" id="month">月
            <input type="text" name="day" id="day">日
        </div><br>
        <!-- 开始按钮 -->
        <button>开始</button>
        <!-- 倒计时面板 -->
        <p>
            现在距离-<span>0000</span>-还剩:<br><br>
            <b>00</b><i>天</i><b>00</b><i>小时</i><b>00</b><i>分</i>
            <b>00</b><i>秒</i>
        </p>
    </div>
    <!-- 引入function函数 -->
    <script src="./function.js"></script>
    <script>
        /* 
            2. 倒计时  点击开始 计算输入框的时间到现在的倒计时   
            点击的时候注意定时器不能叠加  创建未来时间的时候注意月份
        */
        // 2.1 获取父元素、开始按钮和三个输入框(年, 月, 日)
        var wrap = document.getElementById('wrap');
        var btn = wrap.getElementsByTagName('button')[0];
        var futuredate = wrap.getElementsByTagName('input');
        var content = wrap.getElementsByTagName('p')[0];
        console.log(btn, futuredate, content);

        // 2.2 点击开始按钮,
        btn.onclick = function(){
            // 2.3 获取输入的三个年、月、日时间, 并拼接字符串
            var futureyear = futuredate[0].value;
            var futuremonth = futuredate[1].value;
            var futureday = futuredate[2].value;
            var futurntime = futureyear + '年' + futuremonth + '月' + futureday + '日';
            console.log(futurntime);

            // 2.4 创建未来时间
            var fur = new Date(futureyear, futuremonth-1, futureday,0 ,0, 0);
            console.log(fur);

            // 2.6 调用倒计时函数
            auto(fur, content);

            // 2.7 间隔计时器不断调用倒计时函数
            // 2.8 清除定时器, 利用自定义属性
            clearInterval(content.t);
            content.t = setInterval(function(){
                auto(fur, content);
            }, 1000);

            // 2.5 封装倒计时函数
            function auto(fur, ele){
                // 创建现在时间
                var cur = new Date();
                console.log(cur);

                // 计算 时间差 = 未来毫秒数 - 现在毫秒数
                var difference = fur.getTime() - cur.getTime();
                console.log(difference);

                // 计算时间 1s = 1000ms 1m = 60s 1h = 60m 1d = 24h
                // second
                var s = Math.floor(difference / 1000 % 60);
                console.log(s);

                // minute
                var m = Math.floor(difference / 1000 / 60 % 60);
                console.log(m);

                // hour
                var h = Math.floor(difference / 1000 / 60 / 60 % 24);
                console.log(h);

                // day
                var d = Math.floor(difference / 1000 / 60 / 60 / 24);
                console.log(d);

                // show in the window
                ele.innerHTML= '现在距离-'+'<span>'+futurntime+'</span>' +'-还剩: '+ '<br><br>'+
                '<b>'+add0(d)+'</b>' +'<i>'+'天'+'</i>'+'<b>'+add0(h)+'</b>' +'<i>'+'小时'+'</i>'+ '<b>'+add0(m)+'</b>'+'<i>'+'分'+'</i>'+'<b>' + add0(s) +'</b>'+'<i>'+'秒'+'</i>';
            }
        }
    </script>
</body>
</html>

夹心776655

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】之时间例子与倒计时

描述: 时间格式如图所示, 且一直在变化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><bo.
复制链接

扫一扫

专栏目录