单击按钮发送验证码,出现倒计时的简单实例


Posted in Javascript onMarch 17, 2017

实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
 
var InterValObj; //timer变量,控制时间 
var count = 30; //间隔函数,1秒执行 
var curCount;//当前剩余秒数 
 
function sendMessage() { 
  curCount = count; 
//设置button效果,开始计时 
   $("#btnSendCode").attr("disabled", "true"); 
   $("#btnSendCode").val(curCount + "秒后可重新发送"); 
   InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次 

  
  //请求后台发送验证码 TODO 
 
} 
 
//timer处理函数 
function SetRemainTime() { 
      if (curCount == 0) {         
        window.clearInterval(InterValObj);//停止计时器 
        $("#btnSendCode").removeAttr("disabled");//启用按钮 
        $("#btnSendCode").val("重新发送验证码"); 
      } 
      else { 
        curCount--; 
        $("#btnSendCode").val(curCount + "秒后可重新发送"); 
      } 
    } 
</script> 
</head> 
<body> 
    <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p> 
</body> 
</html>

以上这篇单击按钮发送验证码,出现倒计时的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
jQuery的框架介绍
May 11 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 #Javascript
Bootstrap表格制作代码
Mar 17 #Javascript
鼠标经过出现气泡框的简单实例
Mar 17 #Javascript
angularJS之$http:与服务器交互示例
Mar 17 #Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 #Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 #Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
js压缩利器
2007/02/20 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python使用tornado实现登录和登出
2018/07/28 Python
django框架自定义用户表操作示例
2018/08/07 Python
Django csrf 验证问题的实现
2018/10/09 Python
django使用admin站点上传图片的实例
2019/07/28 Python
python装饰器的特性原理详解
2019/12/25 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
pytorch SENet实现案例
2020/06/24 Python
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
八项规定整改方案
2014/02/21 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
整改通知书
2015/04/20 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS