zoukankan      html  css  js  c++  java
  • js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天、时、分、秒。

    节日、活动、商城常用。

     

    原理:

    主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数。

    1. 求出毫秒差 :当两个时间直接进行运算时,他们自动返回毫秒值。

    2. 换算时间单位: 向下取整,把毫秒转为相应的单位;再把剩下的毫秒取出来转为下一个需要的单位。

    时间戳可以用 Date.pare(时间)时间.getTime() 得到。 前者可以用字符串或时间对象,后者只能使用时间对象。

    HTML

    <!--
    Author: XiaoWen
    Create a file: 2017-01-03 19:05:26
    Last modified: 2017-01-04 14:17:31
    Start to work:
    Finish the work:
    Other information:
    -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
    <input type="text">
    <input type="text">
    <input type="button" value="开始倒计时">
    </body>
    <script>
    //js代码在下面
    </script>
    </html>

    JS

    var input = document.getElementsByTagName('input');
    var timer=null;
    input[2].onclick=function(){
      //clearInterval(timer)
      timer=setInterval(test,1000);
    }
    function test(){
        var t1=input[0].value//='2017/01/05 13:31';
        if(new Date(t1)-new Date()<=0){
          clearInterval(timer);
          alert('计时完成');
        }else{
          var d=cd(t1, new Date(), 'd');
          var h=cd(t1, new Date(), 'h');
          var m=cd(t1, new Date(), 'm');
          var s=cd(t1, new Date(), 's');
          input[1].value=d+'天'+h+'时'+m+'分'+s+'秒';
        }
      }

    JS倒计时函数

    /*
    2017-01-04 by xw
    获取倒计时 返回值数字
    t1 开始时 时间格式 t2 结束时 时间格式 tg 要获取的值 字符串 d 天 h 时 m 分 s 秒
    */ function cd(t1, t2, tg) { //相差的毫秒数 var ms = Date.parse(t1) - Date.parse(t2); var minutes = 1000 * 60; var hours = minutes * 60; var days = hours * 24; var years = days * 365; //求出天数 var d = Math.floor(ms / days); //求出除开天数,剩余的毫秒数 ms %= days; var h = Math.floor(ms / hours); ms %= hours; var m = Math.floor(ms / minutes); ms %= minutes; var s = Math.floor(ms / 1000); //返回所需值并退出函数 switch(tg){ case 'd' : return d; case 'h' : return h; case 'm' : return m; case 's' : return s; } }
  • 相关阅读:
    高性能SQL编码规范
    识别SQL Server 性能杀手
    centOS7安装nginx
    linux安装apache
    算术表达式的前缀表达式,中缀表达式和后缀表达式
    有特殊字符的JSON串
    sqlserver 找到执行慢的sql
    SQL索引建立遵守六大铁律
    [SQL Server 2005/2008] select语句中指定索引
    ubuntu下vsftpd虚拟用户配置
  • 原文地址:https://www.cnblogs.com/daysme/p/6248662.html
Copyright © 2011-2022 走看看