js发送短信倒计时的简单实现方法


Posted in Javascript onSeptember 08, 2016

如下所示:

<!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">
<meta charset="utf-8">
<head>
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">

var InterValObj; //timer变量,控制时间
var count = 120; //间隔函数,1秒执行
var curCount;//当前剩余秒数

function sendMessage() {
  curCount = count;
//设置button效果,开始计时
   $("#btnSendCode").attr("disabled", "true");
   $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
   InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次

 //向后台发送处理数据
   $.ajax({
   
type: "POST", //用POST方式传输
   
dataType: "text", //数据格式:JSON
   
url: 'Login.ashx', //目标地址
  
 data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
  
 error: function (XMLHttpRequest, textStatus, errorThrown) { },
   
success: function (msg){ }
   });
}

//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>

以上这篇js发送短信倒计时的简单实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
js原生map实现的方法总结
Jan 19 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 #Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 #Javascript
jQuery遍历节点树方法分析
Sep 08 #Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 #Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 #Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 #Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 #Javascript
You might like
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
django框架auth模块用法实例详解
2019/12/10 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python自定义函数def的应用详解
2020/06/03 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
如何开启linux的ssh服务
2013/06/03 面试题
木工主管岗位职责
2013/12/08 职场文书
车间班组长的职责
2013/12/13 职场文书
护士辞职信范文
2014/01/19 职场文书
保护环境倡议书范文
2014/05/13 职场文书
党支部特色活动方案
2014/08/20 职场文书
导航工程专业自荐信
2014/09/02 职场文书
万能检讨书2000字
2014/10/17 职场文书
财务务虚会发言材料
2014/10/20 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
父母教会我观后感
2015/06/17 职场文书
遗嘱格式范本
2015/08/07 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB