用于一些注册类的场景，点击发送验证码，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. 使用预设半透明鼠标Cursor

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  2. redis多实例与主从同步及高级特性(数据过期机制,持久化存储)

    redis多实例 创建redis的存储目录 vim /usr/local/redis/conf/redis.conf #修改redis的配置文件 dir /data/redis/ #将存储路径配置修改 ...

  3. mha之vip漂移 配置binlog-server备份服务器 Atlas

    MHAvip漂移 配置 通过MHA自带脚本方式,管理虚拟IP的漂移 获取管理脚本master_ip_failover cp master_ip_failover /usr/local/bin/ #脚本 ...

  4. vuex中的babel编译mapGetters/mapActions报错解决方法

    vex使用...mapActions报错解决办法 vuex2增加了mapGetters和mapActions的方法,借助stage2的Object Rest Operator 所在通过 methods ...

  5. openstack核心组件--nova计算服务（3）

    一.nova介绍:       Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源.OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nova ...

  6. 在SuSE安装wifidog认证服务器和网关

    在SuSE安装认证服务器和网关 在openSuSE 10.3安装wifidog 认证服务器和网关在同台设备中安装完毕.以下是openSuSE的详细安装指南.这个安装是非常初级的,所以请验证或更正. - ...

  7. powerDesigner关联数据库显示中文注释

    最近使用powerdesigner,遇到些问题,记录一下[安装过程就略过了] 一.安装odbc驱动 分享下驱动,百度网盘链接:https://pan.baidu.com/s/1UYPq_PEQkDOJ ...

  8. pig-csm 7.9修改记录

    PigCms\Lib\Action\System\UsersAction.class.php 存在页面广告跳转 bbs.go _pe.cn的问题 tpl\Home\weimob\public_head ...

  9. memcached命令行、Memcached数据导出和导入

    1.memcached命令行 telnet 127.0.0.1 11211set key2 0 30 2abSTOREDget key2VALUE key2 0 2abEND  如: set key3 ...

  10. Oracle-DQL 7- 集合操作

    集合操作: --将查询结果看作是一个集合,可以将多个查询结果之间用集合操作找出特点的数据--很多的集合操作可以使用条件的组合进行代替,集合操作的效率高于条件组合--某些复杂的查询结果只能通过集合操作得 ...