一个简单的倒计时函数

最新推荐文章于 2021-05-20 05:51:54 发布

weixin_33834910

最新推荐文章于 2021-05-20 05:51:54 发布

阅读量133

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mr-yuan/p/6753292.html

版权

今天写app的注册页面, 牵扯到了发送验证吗的间隔时间, 就要写一个倒计时函数, 倒计时期间禁用发送验证码的按钮, 页面显示倒计时秒数

JIrMGsjioBPIqD84pPTroNWBHIFAeWXXIFZG1EEfBIB5RefnHYdtCKQKwj8P0qo9dG8MBuOAAAAAElFTkSuQmCC

APICloud的方法

 // 倒计时
    function countDown() {
        var n = 60;
        var inta = setInterval(function(){
            // 设置.time的文本
            $api.text($api.dom('.time'), n);
            // 显示倒计时标签
            $api.css($api.dom('p'), 'display:block');
            // 禁用发送验证码按钮
             $api.attr($api.dom('.hqyzm'), 'disabled', 'true');
             // 修改发送验证码按钮颜色
            $api.css($api.dom('.hqyzm'), 'border: 1px solid #d0d0d0;color: #9d9d9d;');
            // 减去倒计时
            n--;
            if (n < -1) {
                // 清除定时器
                clearInterval(inta);
                // 倒计时完毕后修改按钮颜色
                iptChange();
                // 隐藏倒计时标签
                $api.css($api.dom('p'), 'display:none');
                // 把倒计时标签清空
                $api.text($api.dom('.time'), '');
                // 初始化时间
                n = 60;
            }
        },1000)
    }

可以设置页面中的倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<input id="ipt" type="text" placeholder="你要设置多少秒倒计时？" name="">
<button onclick="countDown()">开始</button>
<div id="time"></div>
<body>
    <script type="text/javascript">
    // 倒计时
    function countDown() {
        var n = document.getElementById('ipt').value;
        var inta = setInterval(function(){
            document.getElementById('time').innerHTML = n;
            // 减去倒计时
            n--;
            if (n < -1) {
                // 清除定时器
                clearInterval(inta);
                // 初始化时间
                n = document.getElementById('ipt').value;
            }
        },1000)
    }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/mr-yuan/p/6753292.html

weixin_33834910

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的倒计时函数

今天写app的注册页面, 牵扯到了发送验证吗的间隔时间, 就要写一个倒计时函数, 倒计时期间禁用发送验证码的按钮, 页面显示倒计时秒数APICloud的方法 // 倒计时 function countDown() { var n = 60; var inta = setInterval(function(){ // 设置.t...
复制链接

扫一扫