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


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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
JsRender for object语法简介
Oct 31 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
js计数器代码
2006/11/04 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
理解python多线程(python多线程简明教程)
2014/06/09 Python
详解Flask前后端分离项目案例
2020/07/24 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
企业员工薪酬方案
2014/06/04 职场文书
大一新生期末自我评价
2014/09/12 职场文书
写给医生的感谢信
2015/01/22 职场文书
兵马俑导游词
2015/02/02 职场文书
党员进社区活动总结
2015/05/07 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技