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

本文实例讲述了js实现倒计时重新发送短信验证码功能的方法。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js-手机发送短信倒计时</title>
  <style>
    button{
      width: 100px;
      height: 30px;
      border: none;
    }
    input{
      outline: none;
    }
  </style>
  <script>
    window.onload = function(){
      function $(id){ return document.getElementById(id); }
      $('btn').onclick = function(){
        clearInterval(timer); //清除计时器
        var that = this;
        that.disabled = true;
        var count = 5;
        var timer = setInterval(function(){
          if(count>0){
            count--;
            that.innerHTML = "剩余时间"+ count +"s";
          }else{
            that.innerHTML ="重新发送短信";
            that.disabled = false;
            clearInterval(timer); //清除计时器
          }
        },1000);
      }
    }
  </script>
</head>
<body>
  <div class="box">
    <input type="text" id="txt">
    <button id="btn" >点击发送短信</button>
  </div>
</body>
</html>

或者使用setTimeout来模拟，一般情况下，还是推荐使用setTimeout，更安全一些。当使用setInterval(fn,1000)时，程序是间隔1s执行一次，但是每次程序执行是需要3s，那么就要等程序执行完才能执行下一次，即实际间隔时间为（间隔时间和程序执行时间两者的最大值）。而setTimeout（fn，1000）,代表的是，延迟1s再执行程序，且仅执行一次。每次程序执行是需要3s，所以实际时间为 1s+3s=4s。可以使用setTimeout递归调用来模拟setInterval。

<script>
    window.onload = function(){
      function $(id){ return document.getElementById(id); }
      $('btn').onclick = function(){
        var that = this;
        that.disabled = true;
        var count = 5;
        var timer = setTimeout(fn,1000);
        function fn(){
          count--;
          if(count>0){
            that.innerHTML = "剩余时间"+ count +"s";
            setTimeout(fn,1000);
          }else{
            that.innerHTML ="重新发送短信";
            that.disabled = false;
          }
        }
      }
    }
  </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

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

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

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

  • 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发送短信倒计时的简单实现方法

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

  • 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实现5秒倒计时重新发送短信功能

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

  • jQuery实现倒计时重新发送短信验证码功能示例

    本文实例讲述了jQuery实现倒计时重新发送短信验证码功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var countdown

  • jQuery实现订单提交页发送短信功能前端处理方法

    jQuery实现订单提交页发送短信功能前端处理方法

    本文实例讲述了jQuery实现订单提交页发送短信功能前端处理方法.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <div class="indFpho" > <p>手机号码:</p> <p> <input type="text" name="telphone" id="telphone" value="{$order_info.cons

  • shell脚本编写ping包及arp的监控并发送短信功能

    下面给大家分享shell脚本编写ping包及arp的监控并发送短信功能,具体代码如下所示: #!/bin/bash NOW="`date +%Y%m%d-%H:%M:%S`" PHONES=15134567893 IP=10.100.8.78 GATEWAY=10.100.30.1 #ping失误的短信内容 content1="host is failed" #arp主机网关失误的短信内容 content2="GW is failed" #pin

  • iOS发送短信功能的实现代码

    iOS发送短信功能的实现代码

    发短信的功能对于一个需要渠道扩展的APP来说,必不可少.但是,当第一次看到这个需求时,我却一脸懵逼,因为之前并没有接触过,出于对未知事物的恐惧,被分配做这个任务的时候其实我是拒绝的,但是,没办法谁让我是小兵一个呢,只能硬着头皮强上了.在查阅了一番资料之后,发现这个功能做起来其实非常简单,不到十分钟就可以解决.下面我们就来聊一下如何实现这个功能. 首先,我们来介绍一个最为简单的方法,只需要一行代码就可以搞定,代码如下: [[UIApplication sharedApplication] open

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

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

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

  • 阿里大鱼简单发送短信功能.net core版

    阿里大鱼还未提供 .net core 版SDK,但提供了相关API,下面是.net core版实现,只是简单发送短信功能: using System; using System.Collections.Generic; using System.IO; using System.Net; using System.Security.Cryptography; using System.Text; using Newtonsoft.Json; namespace ConsoleApp1 { pub

  • Android实现发送短信功能实例详解

    本文实例分析了Android实现发送短信功能的方法.分享给大家供大家参考,具体如下: 短信和打电话一样,都是android手机的基本功能,下面以实例说明android如何实现发送短信的功能. 程序如下所示: import java.util.regex.Matcher; import java.util.regex.Pattern; import android.app.Activity; import android.app.PendingIntent; import android.cont

  • Android发送短信功能代码

    本文实例讲述了Android发送短信功能代码,是进行Android程序开发中非常常见的重要功能.分享给大家供大家参考之用.具体方法如下: // 发送短信 public void sendMsg(){ String content = edtSend.getText().toString(); SmsManager smsManager = SmsManager.getDefault(); List<String> divideContents = smsManager.divideMessag

  • 基于PHP实现商品成交时发送短信功能

    最近做了一个项目,其中有需求,要求我们实现此功能:商品成交时发送短信,下面小编贴出核心代码,方面大家以后学习. html代码省略..... Model代码省略..... 核心代码如下所示: /* * ------------------------------------------------- * 修改状态 public * Author: lzp Time:-- * ------------------------------------------------- */ public fu

随机推荐