当前位置:千赢国际官网 > 千赢网页手机版登入 > 每天一篇javascript学习小结,javascript发送短信验证

每天一篇javascript学习小结,javascript发送短信验证

文章作者:千赢网页手机版登入 上传时间:2019-07-15

本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下:
实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态 .

jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果。

1、Date.now()

第一步、获取按钮、绑定事件、设置定时器变量和计时变量

一、最终效果

 //Date.now() is in ECMAScript 5
    //Prior to that, use  new Date()
    //获取当前时间
    var now = (typeof Date.now == "function" ? Date.now() :  new Date());
    alert("Right now: "   now);

第二步、添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为“发送验证码”,否则显示为“X秒后重试”

千赢国际官网 1千赢国际官网,

2、Date.parse()方法

效果图:

二、功能分析
1、需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片。初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示。
2、html结构分析

var now = new Date();
  alert(now);

  var someDate = new Date(Date.parse("May 25, 2004"));
  //parse() 方法可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数。
  alert(someDate);

千赢国际官网 2

 <div class="activity" id="activity-slide">
  <a href="javascript:void(0)" class="pg_left ps_pre"></a>
  <a href="javascript:void(0)" class="pg_right ps_next" ></a>
   <ul class="clearfix">
   <li><a href="javascript:;"><img src="images/activity01-1410.jpg"></a></li>
   <li><a href="javascript:;"><img src="images/activity02-1410.jpg"></a></li>
   <li><a href="javascript:;"><img src="images/activity03-1410.jpg"></a></li>
   <li><a href="javascript:;"><img src="images/activity03-1410.jpg"></a></li>
   <li><a href="javascript:;"><img src="images/activity02-1410.jpg"></a></li>
  </ul>
</div>

3、Date UTC()和toUTCString()方法

实现代码:

 #activity-slide是整个幻灯的入口,后面会将其作为参数来调用幻灯功能。

//UTC() 方法可根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
  //Date.UTC(year,month,day,hours,minutes,seconds,ms)
  /*
   year 必需。表示年份的四位数字。
   month 必需。表示月份的整数,介于 0 ~ 11。
   day 必需。表示日期的整数,介于 1 ~ 31。
   hours 可选。表示小时的整数,介于 0 ~ 23。
   minutes 可选。表示分钟的整数,介于 0 ~ 59。
   seconds 可选。表示秒的整数,介于 0 ~ 59。
   ms 可选。表示毫秒的整数,介于 0 ~ 999。
   Date.UTC() 是一种静态方法,因为需要使用构造函数 Date() 来调用它,而不是通过某个 Date 对象调用。
   Date.UTC() 方法的参数指定日期和时间,它们都是 UTC 时间,处于 GMT 时区。指定的 UTC 时间将转换成毫秒的形式,
   这样构造函数 Date() 和方法 Date.setTime() 就可以使用它了。
  */

  //toUTCString() 方法可根据世界时 (UTC) 把 Date 对象转换为字符串,并返回结果。

  //January 1, 2000 at midnight
  var y2k = new Date(Date.UTC(2000, 0));
  alert(y2k.toUTCString());

  //May 5, 2005 at 5:55:55 PM GMT
  var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));
  alert(allFives.toUTCString());
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript">
  window.onload=function(){
    var send=document.getElementById('send'),
      times=60,
      timer=null;
    send.onclick=function(){
     // 计时开始
     var that = this;
      this.disabled=true;
      timer = setInterval(function(){
        times --;
        that.value = times   "秒后重试";
        if(times <= 0){
          that.disabled =false;
          that.value = "发送验证码";
          clearInterval(timer);
          times = 60;
        }
        //console.log(times);
      },1000);  
    }  
  } 
  </script>
</head>
<body>
  <input type="button" id="send" value="发送验证码">
</body>
</html>

 两个按钮ps_pre和ps_next将添加click事件响应点击切换功能。

以上就是今天的javascript学习小结,之后每天还会继续更新,希望大家继续关注。

注意点:

 3、功能分析
因为左右切换都是三个为一组的切换,如果li总个数不是3的倍数时,需要增加li节点填满。

您可能感兴趣的文章:

  • javascript中Date对象应用之简易日历实现
  • 详解JavaScript的Date对象(制作简易钟表)
  • 跟我学习javascript的Date对象
  • JavaScript中Date对象的常用方法示例
  • JavaScript原生对象之Date对象的属性和方法详解
  • javascript类型系统——日期Date对象全面了解

设置按钮是否为禁用时,send.disabled=true; send.disabled=false;
true和false不能加引号!true和false不能加引号!true和false不能加引号!否则值永远为真。
也可用send.setAttribute('disabled','disabled');
或send.removeAttribute('disabled');

//需要追加的li节点个数
var addli = 0;
//一组切换3个li
var num=3;
var lisize = a.find("ul li").size();//获取li个数

//判断需要添加的li节点数量
var reminder=lisize%num;
if(lisize%num!=0){addli = num-reminder;}
else{addli = 0;}
addlist();

以上就是为大家分享的javascript发送短信验证码全部代码,希望对大家的学习有所帮助。

上面是判断得到需要追加的个数lisize,然后调用addlist追加。

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:每天一篇javascript学习小结,javascript发送短信验证

关键词: 千赢国际官网