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


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 - 如何引入js代码
Mar 09 Javascript
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
javascript html5实现表单验证
Mar 01 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
js编写选项卡效果
May 23 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
vue router动态路由设置参数可选问题
Aug 21 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
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
python中dir函数用法分析
2015/04/17 Python
Django实现分页功能
2018/07/02 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
对python生成业务报表的实例详解
2019/02/03 Python
Python flask框架post接口调用示例
2019/07/03 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
怎么写好自荐信
2013/10/30 职场文书
酒店总经理助理职责
2014/02/12 职场文书
反邪教警示教育方案
2014/05/13 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python