点击按钮进行倒计时

最新推荐文章于 2023-03-25 13:12:50 发布

ZXH0122

最新推荐文章于 2023-03-25 13:12:50 发布

阅读量414

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/ZXH0122/article/details/105099740

版权

前端专栏收录该内容

84 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <title>按钮</title>
</head>
<body>
        <button type="button" class="btn btn-info" data-loading-text="已发送" id="send">发送验证码</button>
    </form>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script>
        $(function(){
            $('#send').on('click',function(){
               var $btn = $(this).button('loading');
                var num = 60;
                var timer = setInterval(()=>{
                    $btn.text(--num);    
                    if(num < 1){
                        clearInterval(timer);
                        $btn.button('reset')
                    }
                },1000)
            })
        })
    </script>
</body>
</html>

聪明的你学会了吗？
欢迎留言欧

ZXH0122

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击按钮进行倒计时

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-sca...
复制链接

扫一扫

专栏目录