js-倒计时 + 发送短信

原创已于 2022-02-14 12:07:35 修改 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-02-11 19:03:15 首次发布

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现一个倒计时功能，从复杂函数到简化版的HTML代码展示，并附带了一个发送短信的简单计时器示例。

一、js倒计时

function countDown(time) {
    var nowTime = +new Date();
    var oddTime = +new Date(time);
    var times = (nowTime - oddTime) / 1000;
    var d = parseInt(times / 60 / 60 / 24);
    var h = parseInt(times / 60 / 60 % 24);
    var m = parseInt(times / 60 % 60);
    var s = parseInt(times % 60);
    d = d < 10 ? '0' + d : d;
    h = h < 10 ? '0' + h : h;
    m = m < 10 ? '0' + m : m;
    s = s < 10 ? '0' + s : s;
    return d + '天 ' + h + '时 ' + m + '分 ' + s + '秒';
}
console.log(countDown(new Date('2022-02-10 19:00:00')));

简易版

<!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>
        div {
            display: flex;
            justify-content: space-around;
            width: 200px;
            height: 250px;
            padding-top: 150px;
            box-sizing: border-box;
            background-color: pink;
        }
        span {
            width: 40px;
            height: 40px;
            line-height: 50px;
            font-size: 24px;
            text-align: center;
            background-color: gainsboro;
        }
    </style>
</head>
<body>
    <div>
        <span class="d"></span>
        <span class="h"></span>
        <span class="m"></span>
        <span class="s"></span>
    </div>
    <script>
        var day_txt = document.querySelector('.d');
        var hour_txt = document.querySelector('.h');
        var minute_txt = document.querySelector('.m');
        var second_txt = document.querySelector('.s');

        var time = new Date('2022-02-21 08:00:00');
        countDown(time);
        setInterval(function() {
            countDown(time);
        },1000)

        function countDown(time) {
            var oddTime = +new Date();
            var nowTime = +new Date(time);
            var times = (nowTime - oddTime) / 1000;
            var d = parseInt(times / 60 / 60 / 24);
            var h = parseInt(times / 60 / 60 % 24);
            var m = parseInt(times / 60 % 60);
            var s = parseInt(times % 60);
            d = d < 10 ? '0' + d : d;
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            day_txt.innerHTML = d;
            hour_txt.innerHTML = h;
            minute_txt.innerHTML = m;
            second_txt.innerHTML = s;
        }
    </script>
</body>
</html>

二、发送短信

<body>
    手机号
    <input type="text">
    <button>发送</button>
</body>
<script>
    var btn = document.querySelector('button');
    var timeCount = 5;
    var timer = null;
    btn.addEventListener('click', function() {
        btn.disabled = true;
        timer = setInterval(function() {
            if(timeCount == 0) {
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
                timeCount = 5;
            }else {
                btn.innerHTML = timeCount + '秒后可点击再次发送短信';
                timeCount--;
            }
        }, 1000)
    })
</script>