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


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.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
php获取excel文件数据
2017/04/21 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
使用js实现数据格式化
2014/12/03 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
js运算符的一些特殊用法
2018/07/29 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
深入浅析python继承问题
2016/05/29 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python dataframe NaN处理方式
2019/12/26 Python
德国网上药房:Apotal
2017/04/04 全球购物
Java如何格式化日期
2012/08/07 面试题
婚礼新郎父母答谢词
2014/01/16 职场文书
高中班主任评语大全
2014/04/25 职场文书
闪闪的红星观后感
2015/06/08 职场文书
小学生读书笔记范文
2015/06/30 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python