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


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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
layui 监听表格复选框选中值的方法
Aug 15 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
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数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
js中this用法实例详解
2015/05/05 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
Django中处理出错页面的方法
2015/07/15 Python
Python正则表达式经典入门教程
2017/05/22 Python
python实现二叉树的遍历
2017/12/11 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
css 元素选择器的简单实例
2016/05/23 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
高级Java程序员面试要点
2013/08/02 面试题
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
yy生日主持词
2014/03/20 职场文书
销售代理协议书
2014/09/30 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
小学英语听课心得体会
2016/01/14 职场文书