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


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 相关文章推荐
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
详解http访问解析流程原理
Oct 18 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
Script的加载方法小结
2011/01/12 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
医学生自我鉴定范文
2014/03/26 职场文书
个人担保书范文
2014/05/20 职场文书
安全生产承诺书范文
2014/05/22 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
教师个人总结范文
2015/02/11 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android