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


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可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
H5上传本地图片并预览功能
May 08 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
JS实现鼠标移动拖尾
Dec 27 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
python daemon守护进程实现
2016/08/27 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
python事件驱动event实现详解
2018/11/21 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
八年级英语教学反思
2014/01/09 职场文书
部队学习十八大感言
2014/01/11 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2014年终个人工作总结
2014/11/07 职场文书
房贷工资证明范本
2015/06/12 职场文书
毕业赠语大全
2015/06/23 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python