文档章节

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

史文帝
 史文帝
发布于 2016/11/28 20:47
字数 98
阅读 4
收藏 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>

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
点击按钮 倒计时60秒方可再次点击发送的Js代码

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

Carl_
2014/08/06
0
0
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

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

damon风
2017/11/23
0
0
ajax异步登录和跨域刷新页面

对于子页面刷新父页面,比如在a.html中嵌套了一个iframe,里面是b.html。如果a.html和b.html是同一个域,则操作b.html时要刷新父页面a.html时,很简单,通过js就能完成,在b.html中要刷新父页...

wangrikui
2014/01/20
0
0
Javascript 实现倒计时(10秒)自动关闭网页

JS倒计时10秒 实现功能 实例代码一: <html> <title>倒计时关闭网页</title> <head> <script language="javascript"> var cTime=10;//这个变量是倒计时的秒数设置为10就是10秒 function Tim......

leiboo
2014/04/27
0
0
Ubuntu9.04 正式版发布时间的WEB倒计时代码

在Ubuntu 8.10 正式版发布之前 Ubuntu 官方提供正式版发布时间的WEB倒计时,不知道各位站长是否有加入官方提供的代码到你的网站或者Blog中没有。现在Ubuntu 9.04 正式版也准备发布了,估计是...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring详解

Spring详解(一)------概述 目录 1、什么是 Spring ? 2、Spring 起源 3、Spring 特点 4、Spring 框架结构 5、Spring 框架特征 6、Spring 优点   本系列教程我们将对 Spring 进行详解的介绍...

DemonsI
10分钟前
0
0
CentOS7系统Nginx安装

1、下载nginx,官方网站https://nginx.org wget https://nginx.org/download/nginx-1.14.0.tar.gz 2、下载Nginx Sticky Module,官方网站https://bitbucket.org/nginx-goodies/nginx-sticky-......

m_lm
13分钟前
0
0
使用zTree树控件(二)

1:treeNode.checked用于判断是勾选还是取消勾选。(treeNode指的是节点)

uug
13分钟前
0
0
export, import 和 export default的区别

ES6的两个功能: export 和 import export 对外输出模块 import 引入(加载)进来一个模块 一、export => import 单个变量 export var name = "lishi" 在其他文件里引用 import {name} f...

Js_Mei
18分钟前
1
0
打造RecyclerView的n级列表

先上效果图: 1.该多级列表的优势: 支持无限级列表展开 基于一个recyclerView实现 可以自定义每一级item的样式,定制化更强 2.设计的思路 数据结构List<ItemBean>,ItemBean类中有变量List<...

WelliJohn
27分钟前
1
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部