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


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库 开发规则
Jan 31 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
基于JSON数据格式详解
Aug 31 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 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动态变静态原理
2006/11/25 PHP
PHP类的封装与继承详解
2015/09/29 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
vue项目实战总结篇
2018/02/11 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
python字符串连接方式汇总
2014/08/21 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
python3学生名片管理v2.0版
2018/11/29 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Django之模型层多表操作的实现
2019/01/08 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
如何理解Python中包的引入
2020/05/29 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
团购业务员岗位职责
2014/03/15 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
建议书的格式
2014/05/12 职场文书
中药学自荐信
2014/06/15 职场文书
生产助理岗位职责
2014/06/18 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Golang二维数组的使用方式
2021/05/28 Golang
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers