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


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 相关文章推荐
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
小程序调用微信支付的方法
Sep 26 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实现无限级分类
2014/12/24 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
tornado+celery的简单使用详解
2019/12/21 Python
python多线程使用方法实例详解
2019/12/30 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
英语专业毕业个人求职自荐信
2013/09/21 职场文书
个人合作协议书范本
2014/04/18 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
名人传读书笔记
2015/06/26 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
Elasticsearch 配置详解
2022/04/19 Java/Android
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers