倒计时和短信案例_项目倒计时短信-CSDN博客

本文链接：https://blog.csdn.net/m0_56844750/article/details/123773693

1.创建HTML元素

  css略

    <input type="text">
    <button>发送</button>
    <span></span>
    <span></span>
    <span></span>

2.短信发送按钮倒计时

短信发送按钮倒计时禁用代码

var time=5;//定义时间变量
 var btn = document.querySelector('button')//取得按钮
        btn.addEventListener('click', function() {//添加监听事件
            btn.disabled = true//点击后禁用按钮
            var timer = setInterval(function() {//添加计时器
                if (time == 0) {
                    clearInterval(timer)
                    btn.disabled = false
                    btn.innerHTML = '发送'
                    time = 5//将时间重置，否则按钮时间无法使用
                } else {
                    btn.innerHTML = '还剩' + time-- + '秒'
                }

            }, 1000)

        })

3.防京东倒计时

var spans = document.querySelectorAll('span');

        var date = +new Date('Sun Mar 27 2022 15:30:00 GMT+0800')//自定义时间
        fn()//先运行一次函数否则刷新会有空白时间
        setInterval(fn, 1000)

        function fn() {
            var date1 = +new Date()
            var h = parseInt((date - date1) / 1000 / 60 / 60 % 24)
            var m = parseInt((date - date1) / 1000 / 60 % 60)
            var s = parseInt((date - date1) / 1000 % 60)
            var hour = h < 10 ? '0' + h : h//时
            var min = m < 10 ? '0' + m : m//分
            var sec = s < 10 ? '0' + s : s//秒
            spans[0].innerHTML = hour
            spans[1].innerHTML = min
            spans[2].innerHTML = sec
        }