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


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延迟加载
Mar 09 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
Vue中props的使用详解
2018/06/15 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
使用tensorflow实现AlexNet
2017/11/20 Python
python list转矩阵的实例讲解
2018/08/04 Python
Python装饰器用法实例分析
2019/01/14 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
什么是python的列表推导式
2020/05/26 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
建筑专业自我鉴定
2013/10/22 职场文书
公务员年总结的自我评价
2013/10/25 职场文书
青年文明号复核材料
2014/02/11 职场文书
名人演讲稿范文
2014/09/16 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
Python时间操作之pytz模块使用详解
2022/06/14 Python