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

如下所示：

<!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发送短信倒计时的简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手 机:</text> <input type="

  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

    相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus

  • JavaScript实现短信倒计时60s

    废话不多说了,直接给大家贴代码了,具体代码如下所示: $(function(){ //获取验证码 var getCode = document.getElementById('getCode'); var wait = 60; function time(btn){ if (wait===0) { btn.removeAttribute("disabled"); btn.innerHTML = "获取验证码"; wait = 60; }else{ btn.setAt

  • js实现5秒倒计时重新发送短信功能

    本文实例讲述了js实现倒计时重新发送短信验证码功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js-手机发送短信倒计时</title> <style> button{ width: 100px; height: 30px; border: none

  • js实现短信发送倒计时功能（正则验证）

    js实现短信发送倒计时功能（正则验证）

    本文实例为大家分享了js短信发送倒计时的具体代码,供大家参考,具体内容如下 <div class="login"> <form action="" method="post"> <div class="login-box"> <p class="pho-0 pho"> <img class="" src="img/icon_

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

    如下所示: <!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"> &l

  • jQuery插件开发发送短信倒计时功能代码

    实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: <input type="button" class="sameBtn btnCur" value="发送验证码"/> <div class="sameBtn btnCur2">发送验证码</div>

  • javascript实现发送短信倒计时

    javascript实现发送短信倒计时

    本文实例为大家分享了javascript实现发送短信倒计时的具体代码,供大家参考,具体内容如下 实现思路: 1.js获取发送按钮元素对象 2.设置一个发送间隔时间(全局变量) 3.给发送按钮元素对象绑定点击事件- - -onclick, 点击事件处理程序: ① 点击后俺按钮设置成禁用-disabled:true; ② 使用定时函数,时间间隔为1秒, 定时函数调用的函数处理程序: 判断时间是否为0 不为0- - -按钮里的描述内容变为:剩余多少秒,且时间减1 为0- - -则恢复按钮可以点击状态,

  • 微信小程序之发送短信倒计时功能

    微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

  • 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

    相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta

  • 用Javascript实现发送短信验证码间隔功能

    用Javascript实现发送短信验证码间隔功能

    在很多app和网站中,我们登陆或者注册账号,会有一个发送短信验证码的地方1,然而为了防止恶意获取验证码,我们一般都设置了可点击的时间间隔,时间间隔1完了过后,便又可以继续发送,接下来用代码实现 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

  • IOS程序开发之跳转短信发送界面实现发送短信功能

    IOS程序开发之跳转短信发送界面实现发送短信功能

    项目需求:在程序开发中,我们需要在某个程序里面发送一些短信验证(不是接收短信验证,关于短信验证,传送门:http://www.cnblogs.com/wolfhous/p/5096774.html 项目实现: 新建demo,直接看我源码标志. 源码截图 真机截图 就是如此简单,如您有任何问题/建议或者更好的实现方法,联系本人. 可以看我折叠的源码 /** 点击发送短信按钮*/ - (IBAction)sendMessageBut:(id)sender { /** 如果可以发送文本消息(不在模拟器

  • java发送短信系列之同步、异步发送短信

    本篇本章是发送短信的第一部分, 说一下同步/异步发送短信的代码, 以后几篇我们稍微完善一下功能, 添加发送频率的限制和日发送次数的限制. 发送短信的方法可能不少, 我们的方法是使用服务商提供的服务. 一般来说, 这些服务都是和语言无关的, 这里我们使用java写示例程序. 1.发送短信的接口 根据自己的情况选择服务商. 2.开发文档 从开发文档中我们可以看到. 可以直接使用http请求也可以使用WebService请求发送短信. 由于DEMO文件夹下的java和jsp文件夹中的代码都是使用htt

随机推荐