原生js实现自定义倒计时效果------Sestid

最新推荐文章于 2022-11-26 23:09:05 发布

Sestid

最新推荐文章于 2022-11-26 23:09:05 发布

阅读量473

点赞数 2

分类专栏： Js和jQuery实现的特效❤️

本文链接：https://blog.csdn.net/Sestid/article/details/101354105

版权

Js和jQuery实现的特效❤️ 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

倒计时的实现，主要使用了时间对象，定时器，计算时间戳

效果图：

全部代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 500px;
            height: 500px;
            background: #eee;
            text-align: center;
        }

        #box h1 {
            text-align: center;
            color: #fff;
            padding-top: 20px;
        }

        #box input {
            width: 100px;
        }

        #box div {
            line-height: 200px;
            width: 200px;
            text-align: center;
            border-radius: 50%;
            background: #000;
            color: yellow;
            font-size: 50px;
            margin: 30px auto;

        }

        #box .now {
            color: #000;
        }

        #box .time {
            color: #fff;
            font-size: 30px;
        }

        #box .now span {
            color: yellow;
            font-size: 25px;
        }

        #box .time span {
            color: yellow;
            font-size: 40px;
        }
    </style>
  
</head>

<body>
    <div id="box">
        <h1>倒计时</h1>
        请输入：
        <input type="text">年
        <input type="text">月
        <input type="text">日
        <div class="action">开始</div>
        <p class="now">现在距离-
            <span>xxxx年xx月xx日</span>-还剩</p>
        <p class="time">
            <span>0</span>天
            <span>0</span>小时
            <span>0</span>分
            <span>0</span>秒
        </p>
    </div>
</body>
  <script>
        window.onload = function () {
            //获取元素
            var txt = document.getElementsByTagName('input');
            var act = document.querySelector('.action');
            var span = document.getElementsByTagName('span');
            //初始化输入框内的值
            txt[0].value = '';
            txt[1].value = '';
            txt[2].value = '';
            //封装计时函数
            function auto(year, month, day) {
                var date = new Date();
                var date1 = new Date(year, month - 1, day, 0, 0, 0)
                //计算时间戳
                var sum = (date1 - date) / 1000;
                //计算天数，小时，分钟，秒
                var t = parseInt(sum / 86400);
                var h = parseInt(sum % 86400 / 3600);
                var m = parseInt(sum % 3600 / 60);
                var s = parseInt(sum % 60);
                //计算的值渲染到页面
                span[0].innerHTML = year + '年' + month + '月' + day + '日';
                span[1].innerHTML = toTwo(t);
                span[2].innerHTML = toTwo(h);
                span[3].innerHTML = toTwo(m);
                span[4].innerHTML = toTwo(s);
                if (t == 0 && h == 0 && m == 0 && s == 0) {
                    clearInterval(timer)
                }
                return sum;
            }
            //个位数补零
            function toTwo(time) {
                if (time < 10) {
                    return time = '0' + time;
                } else {
                    return time;
                }
            }
            
            var timer = null;
            // 点击事件
            act.onclick = function () {
                var year = txt[0].value;
                var month = txt[1].value;
                var day = txt[2].value;
                //调用计时函数
                var sum = auto(year, month, day)
                // 判断输入的时间是否正确
                if (sum >= 0 && month >= 1 && month <= 12 && day >= 1 && day <= 31) {
                    console.log(year, month, day)
                    auto(year, month, day);
                    clearInterval(timer)
                    timer = setInterval(function () {
                        auto(year, month, day);
                    }, 1000);
                } else {
                    alert('请输入正确日期')
                    txt[0].value = '';
                    txt[1].value = '';
                    txt[2].value = '';
                    span[0].innerHTML = 'xxxx年xx月xx日';
                    span[1].innerHTML = '0';
                    span[2].innerHTML = '0';
                    span[3].innerHTML = '0';
                    span[4].innerHTML = '0';

                }

            }
        }

    </script>
</html>