用于一些注册类的场景，点击发送验证码，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. apache整合tomcat中的一些注意事项

    1.整合完毕后,需要把项目同时部署在apache和tomcat中,不然会报错找不到资源 2.可以把tomcat和apcahe的项目路径设置为同一个 3.使用java框架时容易出现异常:The requ ...

  2. Oracle 中的进制转换

    Oracle 中的进制转换 */--> Oracle 中的进制转换 Table of Contents 1. 进制名 2. 10进制与16进制互相转换 2.1. 10进制转换为16进制 2.2. ...

  3. hibernate对连接池的支持

    连接池, 作用: 管理连接:提升连接的利用效率! 常用的连接池: C3P0连接池   Hibernate 自带的也有一个连接池,且对C3P0连接池也有支持!   Hbm 自带连接池:          ...

  4. Python多进程库multiprocessing创建进程以及进程池Pool类的使用

    问题起因最近要将一个文本分割成好几个topic,每个topic设计一个regressor,各regressor是相互独立的,最后汇总所有topic的regressor得到总得预测结果.没错!类似bag ...

  5. C# WPF ASP.net 上传多文件和数据

    C# WinForm 上传多文件和数据 public static class HttpHelper { private static readonly Encoding DEFAULTENCODE ...

  6. jsp+UEditor粘贴word

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  7. Python3 Selenium自动化web测试 ==> 第六节 WebDriver高级应用 -- 操作web页面的滚动条

    学习目的: 掌握页面元素定位以外的其他重要知识点. 正式步骤: 测试Python3代码 # -*- coding:utf-8 -*- from selenium import webdriver fr ...

  8. python-Web-django-商城-购物车商品加减

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. airflow的web任务管理

    ariflow里绿的代表都跑完了:红的表示有问题:点红的图标进去: 点tree view 红色表示那一天失败: 点进去看可以看log: 点clear则是重跑任务:

  10. hdoj5909 Tree Cutting（点分治+树上dp转序列dp）

    题目链接:https://vjudge.net/problem/HDU-5909 题意:给一颗树,结点带权值v[i]<m.求异或和为k的子树个数(0<=k<m). 思路: 首先点分治 ...