js实现倒计时

最新推荐文章于 2024-05-22 01:53:01 发布

李现分现

最新推荐文章于 2024-05-22 01:53:01 发布

阅读量991

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_47828130/article/details/122729837

版权

js倒计时在前端经常会碰到，可将以下代码作为一个模板使用
素材：
在这里插入图片描述

效果图：
在这里插入图片描述
代码：

<!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>
        #container {
            text-align: center;
            border: 1px solid;
            width: 500px;
            height: auto;
            margin: 0px auto;
            font-size: 20px;
            font-weight: 600;
            background: url(./image/new.jpg) no-repeat;
            background-size: cover;
        }

        #newYear {

            margin: 0px auto;
            width: 350px;
            height: 100px;
            text-align: center;
            background-color: rgba(241, 55, 9, 0.5);

        }

        #newYear>p {
            position: relative;
            top: 70px;
        }

        label {
            color: red;
            padding-right: 5px;
        }

        input {
            margin-left: 40px;
        }

        input,
        button {
            border: 1px solid red;
            border-radius: 150px;

        }

        button {
            background-color: rgb(238, 14, 14);
            color: white;
        }

        input::placeholder {
            color: red;
            font-style: italic;
            letter-spacing: 10px;
            font-size: 10px;
        }
    </style>
</head>

<body>
    <div id="container">
        <p>距离春节还有
            <label class="day"></label>天
            <label class="hour"></label>时
            <label class="min"></label>分
            <label class="second"></label>秒
        </p>
        <div id="newYear">

            <p>
                <input type="text" placeholder="请输入祝福"> <button>发送</button>
            </p>
        </div>

    </div>
    <script>
        var input = document.querySelector('input')
        var btn = document.querySelector('button')
        var days = document.querySelector('.day')
        var hour = document.querySelector('.hour')
        var minture = document.querySelector('.min')
        var second = document.querySelector('.second')
        var currentTime = +new Date('2022-1-31 00:00:00')
        Timer()
        setInterval(Timer, 1000)
        function Timer() {
            var now = +Date.now()
            s = (currentTime - now) / 1000
            //相差天数
            var day = Math.floor(s / 60 / 60 / 24);
            days.innerHTML = day
            //相差小时数
            var hours = Math.floor(s / 60 / 60 % 24);
            hour.innerHTML = hours
            //相差分钟数
            var min = Math.floor(s / 60 % 60);
            minture.innerHTML = min
            //相差秒数
            var sec = Math.floor(s % 60);
            second.innerHTML = sec
        }
        var times = 3
        btn.addEventListener('click', function () {
            btn.disabled = true
            var timer = setInterval(function () {
                if (times == 0) {
                    clearInterval(timer)
                    btn.disabled = false
                    btn.innerHTML = '发送'
                    times = 3
                    confirm('对方回复：已收到祝福！')
                } else {
                    btn.innerHTML = '还剩' + times + '秒'
                    times--
                }
            }, 1000)
        })
    </script>
</body>

</html>