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


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 window对象详解
Nov 12 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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源代码
2013/06/26 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP概率计算函数汇总
2015/09/13 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python模块的制作方法实例分析
2019/12/21 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
用python写爬虫简单吗
2020/07/28 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
KTV的创业计划书范文
2014/02/02 职场文书
开学寄语大全
2014/04/08 职场文书
新年爱情寄语
2014/04/08 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
师德师风承诺书
2014/05/23 职场文书
学校个人对照检查材料
2014/08/26 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
工地食品安全责任书
2015/05/09 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
python requests模块的使用示例
2021/04/07 Python
关于 Python json中load和loads区别
2021/11/07 Python