用于一些注册类的场景，点击发送验证码，xx秒后重新发送。

利用 setTimeout 方法，xx秒后执行指定的方法，修改button的属性值，disabled为true时为灰色，不可点击。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>-->

<script type="text/javascript">

var countdown=60;

function settime(obj) {

    if (countdown == 0) {

        obj.removeAttribute("disabled");

        obj.value="获取验证码";

        countdown = 60;

        return;

    } else {

        obj.setAttribute("disabled", true);

        obj.value="重新发送(" + countdown + ")";

        countdown--;

    }

setTimeout(function() {

        settime(obj);

    }

    ,1000);

}

</script>

<body>

<label>

    <input type="text" name="textfield">

</label>

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

</body>

</html>

js点击发送验证码 xx秒后重新发送的更多相关文章

  1. Hbuilder MUI 注册短信验证60秒后重新发送

    <div class="mui-input-row"> <label class="iconfont_log_reg icon-youjian" ...

  2. JS 60秒后重发送验证码

    //settime($("#getPhoneCode"),60); function settime($obj, time) { if (time == 0) { $obj.att ...

  3. JS获取短信验证码60秒

    <script language="javascript">    function get_mobile_code(){        $.post("{{ ...

  4. 15分XX秒后订单自动关闭（倒计时）

    //订单记录 function get_order(){ //请求订单ajax方法 XX.send_api("method",{data},function(){ var date ...

  5. 用JavaScript写一个简单的倒计时，可以应用在发送短信验证码的“59秒后重新发送验证短信”

    倒计时——从10倒数到0,点击按钮会还原倒计时 <body> <!-- 将textvalue值设为10,从10倒数 --> <input type="text& ...

  6. 发送验证码（××s后重新发送）

    html: <input class="tel" type="text" name="tel" placeholder="手 ...

  7. SQL Server 2008 R2中配置作业失败后邮件发送通知

    SQL Server日常维护中难免会遇到作业失败的情况.失败后自然需要知道它失败了,除了例行检查可以发现出错以外,有一个较实时的监控还是很有必要的.比较专业的监控系统比如SCOM虽然可以监控作业执行情 ...

  8. js弹框3秒后自动消失

    开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...

  9. JS实现的一个验证码，可以在前端验证后在提交action

    js实现的一个验证码功能,可以在前端判断验证码输入是否正确 输入的邮箱格式是否正确 验证成功后才提交action到后台 <!DOCTYPE html PUBLIC "-//W3C//D ...

随机推荐

  1. 使用PYTHON统计项目代码行数

    目录 一 使用PYTHON统计项目代码行数 二 应用实例 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 使用PYTHON统计项目代码行数 遇到一个非常小的需求:统计一个项目里头的各类源代码 ...

  2. ThreadUtils

    import android.os.Handler; import android.os.Looper; import java.util.concurrent.ExecutorService; im ...

  3. 阿里云轻应用服务器配置Ubuntu的JDK、Tmocat、Mysql和Redis

    1.与服务器建立连接(达到效果:XShell和Xftp均可连接到服务器)   阿里云管理控制台提供的三种建立服务器连接方式: 使用浏览器发起安全连接(推荐) 客户端使用密钥进行连接 客户端使用账号密码 ...

  4. 解决Ubuntu MySQL服务无法远程登录

    一.10061错误 Ubuntu安装MySQL . sudo apt-get install mysql-server . apt-get isntall mysql-client . sudo ap ...

  5. spark学习中一些小问题---1

    1.linux文件查找命令.这个很关键 find / -name employees.json 2.hdfs命令上传整个文件夹或文件 hadoop dfs -put /home/root/apache ...

  6. React Native初始化项目0.47.1报错

    首先看一下安卓和iOS报错: iOS终端运行报错: Xcode运行报错: 解决办法一: 将版本降到0.44.3,修改package,具体请看我的另一篇博客: http://www.cnblogs.co ...

  7. HashPump用法

    做哈希长度扩展攻击的时候用到这个工具,但是没找到这个工具详解办法 我这篇不算是详解,只是收集例子做出的一个用法 HashPump一种在各种散列算法中利用散列长度扩展攻击的工具.目前支持的算法:MD5, ...

  8. Django-Form组件-forms.Form

    forms.Form ​ 在之前的示例HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时很多时候都需要对用户的输入做校验,比如校验用 ...

  9. curl and wget

    写在前面: a.  对比curl 和 wget 的相同和不同点 来记忆 a-1 curl url  直接将请求内容输出到标准输出. 如果下载不是瞬时间完成,会显示下载进度条,如果向取消,加-s : w ...

  10. sqlalchemy 的操作

    使用PyMySQL的前提: 1. 先建好表 2. 自己动手需要手动去写多条SQL语句 改进: 类 ------>  表 实例化 -> 数据 这种思想叫:ORM(Object Relatio ...