文档章节

纯js发送验证码,简单的倒计时

史文帝
 史文帝
发布于 2016/11/28 20:47
字数 98
阅读 5
收藏 0

<!DOCTYPE html >

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>按钮倒计时</title>
    </head>

    <body>

        <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />

        <script type="text/javascript">
            var countdown = 60;

            function settime(val) {
                
                var int = setTimeout(function() {
                    settime(val)
                }, 1000)
                
                if(countdown == 0) {
                    val.removeAttribute("disabled");
                    val.value = "免费获取验证码";
                    self.clearInterval(int);
                    countdown = 60;

                } else {
                    val.setAttribute("disabled", true);
                    val.value = "重新发送(" + countdown + ")";
                    countdown--;
                }

            }
        </script>
    </body>

</html>

© 著作权归作者所有

共有 人打赏支持
上一篇: jQuery毫秒倒计时
下一篇: MUI 上拉加载
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
点击按钮 倒计时60秒方可再次点击发送的Js代码

本节内容: Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果。 比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果。 本文用Javas...

Carl_
2014/08/06
0
0
190. 定时之后 才允许送请求

用途及效果 用途:提醒用户倒计时 2.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>倒计时10s</title> <script type="text/javascript" src="js/jquery-2.1.4.min.js"......

Lucky_Me
2018/10/23
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

前言:   此事例是在vue组件中,使用canvas实现倒计时动画的效果。其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了   canvas动画的原理:利用定时器...

damon风
2017/11/23
0
0
【免费精选】从零基础到进阶,免费在线精选课程集合

如果你关注前端开发,本文收集了值得你关注的免费在线中文系列课程。纯干货,由业界前端专家精心设计。这些课程的内容浅显易懂,授课方式有视频,也有小任务实战推进的学习方式。边学边练,摆...

曾经灬静默者
2014/07/09
9.3K
18

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(11.9)hive操作基础知识

上一篇博客分享了hive的简介和初体验,本节博主将继续分享一些hive的操作的基础知识。 DDL操作 (1)创建表 #建表语法CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name ...

em_aaron
今天
2
0
OSChina 周四乱弹 —— 我家猫真会后空翻

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @我没有抓狂 :#今天听这个# 我艇牛逼,百听不厌,太好听辣 分享 Led Zeppelin 的歌曲《Stairway To Heaven》 《Stairway To Heaven》- Led Z...

小小编辑
今天
3
0
node调用dll

先安装python2.7 安装node-gyp cnpm install node-gyp -g 新建一个Electron-vue项目(案例用Electron-vue) vue init simulatedgreg/electron-vue my-project 安装electron-rebuild cnpm ins......

Chason-洪
今天
3
0
scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
今天
3
0
通俗易懂解释网络工程中的技术,如STP,HSRP等

导读 在面试时,比如被问到HSRP的主备切换时间时多久,STP几个状态的停留时间,自己知道有这些东西,但在工作中不会经常用到,就老是记不住,觉得可能还是自己基础不够牢固,知识掌握不够全面...

问题终结者
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部