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 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP如何实现跨域
2016/05/30 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
jquery实现动态画圆
2014/12/04 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python struct模块解析
2014/06/12 Python
python抓取百度首页的方法
2015/05/19 Python
python实现单向链表详解
2018/02/08 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
2015年药品销售工作总结范文
2015/05/25 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL