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


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原型继承之基础机制分析
Aug 26 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
node.js的事件机制
Feb 08 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
vue select 获取value和lable操作
Aug 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
消息持续发送的完整例子
2006/10/09 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
JS输出空格的简单实现方法
2016/09/08 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python操作redis方法总结
2018/06/06 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
函数指针的定义是什么
2016/08/14 面试题
会计学自荐信
2014/06/03 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
教师工作决心书
2015/02/04 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
python如何在word中存储本地图片
2021/04/07 Python
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android