JS实现根据用户输入分钟进行倒计时功能

废话不多说了，直接给大家贴代码了。具体代码如下所示：

其实这倒计时之前有接触过很多，只是用的都是别人的源码。
应项目需求，终于认真一回，把一个自己看似很简单的问题，终于耗上了跨度一个星期的时间，才弄出来。
源码直接复制黏贴可用。

冗余版+简化版。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  <title></title>
 </head> <body>
  <script type="text/javascript">
    var createTime = '2016-11-14 10:20:00';//开始时间
    var limitTimes = 10;//时间长度
    // 倒计时 入口
    countdowns = window.setInterval(function(){
      var arr = cutDoowns(limitTimes,createTime);
      document.write(formatDate(arr[0])+':'+formatDate(arr[1])+':'+formatDate(arr[2])+'</br>');
      if(arr[2]){
        document.write('时间到!');
      }
    },1000); 

    /*
      s,10分钟后的具体日期：
      date,开始时间
      然后转化成毫秒比较，所得的差值化成分秒，就是倒计时的分秒。
     */
    function cutDoowns(s,date){
      console.log('');
      var flag = false;
      var arr = [];//arr[0]:分，arr[1]:秒，arr[2]:返回boolean
      var now = new Date();//当前时间
      var now1 = new Date(date);//开始时间
      console.log('开始时间 now1: '+now1);
      now1.setMinutes(now1.getMinutes()+s);//10分钟后的时间
      console.log('当前时间 now ：'+now);
      console.log('10分钟时 now1：'+now1); 

      // 转化成年月日 时分秒 格式
      var n = now.getFullYear()+'/'+(now.getMonth()+1)+'/'+now.getDay()+' '+now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
      var n1 = now1.getFullYear()+'/'+(now1.getMonth()+1)+'/'+now1.getDay()+' '+now1.getHours()+':'+now1.getMinutes()+':'+now1.getSeconds();
      // 日期转化成毫秒
      var time1 = (new Date(n)).getTime();
      var time2 = (new Date(n1)).getTime();
      // 毫秒转日期格式
      var time11 = new Date(time1);
      var time21 = new Date(time2);
      console.log('当前时间：'+n+'，转化成毫秒：'+time1+'，time11：'+time11);
      console.log('10分钟时：'+n1+'，转化成毫秒：'+time2+'，time21：'+time21); 

      var surplusSec = time2-time1;//距离解锁剩余毫秒 

      if(surplusSec<=0){
        clearInterval(countdowns);
        flag = true;
        return arr = [00,00,flag];
      } 

      var minute = Math.floor(surplusSec/1000/60);//分钟
      var second = Math.floor((surplusSec-minute*60*1000)/1000);//剩余秒数
      console.log('剩余时间，minute: '+minute+'，second: '+second+'，surplusSec:'+surplusSec);
      // var second = Math.round(surplusTimes);//秒数
      console.log('剩余时间，minute: '+minute+'，second: '+second+'，surplusSec:'+surplusSec); 

      arr = [minute,second,flag];
      return arr;
    } 

    //格式化日期：把单字符转成双字符
    function formatDate(n){
      n = n.toString();
      // console.log(n);
      if(n.length<=1){
        n = '0'+n;
      }
      // console.log(n);
      return n;
    }
  </script>
  </body>
</html>

简化版本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>打开调试工具，看效果！</title>
  </head>
  <body> 

  <script type="text/javascript">
    /*
      打开调试工具，看效果！
      思路：
      1.设置一个倒计时的时间长度；
      2.设置开始时间和当前时间；
      3.结束时间是 开始时间+倒计时间；
      4.结束毫秒-开始毫秒=剩余倒计时间。
     */ 

    // 准备
    var countdownMinute = 10;//10分钟倒计时
    var startTimes = new Date('2016-11-16 15:55');//开始时间 new Date('2016-11-16 15:21');
    var endTimes = new Date(startTimes.setMinutes(startTimes.getMinutes()+countdownMinute));//结束时间
    var curTimes = new Date();//当前时间
    var surplusTimes = endTimes.getTime()/1000 - curTimes.getTime()/1000;//结束毫秒-开始毫秒=剩余倒计时间 

    // 进入倒计时
    countdowns = window.setInterval(function(){
      surplusTimes--;
      var minu = Math.floor(surplusTimes/60);
      var secd = Math.round(surplusTimes%60);
      console.log(minu+':'+secd);
      if(surplusTimes<=0){
        console.log('时间到！');
        clearInterval(countdowns);
      }
    },1000); 

  </script>
  </body>
</html>

以上所述是小编给大家介绍的JS实现根据用户输入分钟进行倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js实现倒计时及时间对象

    js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title>h <style> #box { width: 100%; height: 400px; background: black; color: #fff; font-size:40px; line-height:400px; tex

  • js制作支付倒计时页面

    js制作支付倒计时页面

    本文实例为大家分享了js支付倒计时页面制作代码,供大家参考,具体内容如下 (图一) (图二) (图三) (图四) 实现目标 一.页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失). 二.倒计时完毕,出现删除订单. 三.单击删除订单,弹出弹框,询问是否要真正删除订单. 四.单击确定,即可删除订单. 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路径和JS路径即可). 这个页面其实是自己业余时间,写的东西. 但是里面涉及到,倒计时,弹框,以及字体

  • JS实现倒计时(天数、时、分、秒)

    JS实现倒计时(天数、时、分、秒)

    本文实例为大家解析了JS实现倒计时的详细过程,供大家参考,具体内容如下 注释: parseInt() 函数可解析一个字符串,并返回一个整数. 语法: parseInt(string, radix) 例: parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 1

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

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

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

  • js倒计时显示实例

    话不多说,请看实例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js倒计时显示-细数逝去的过往</title> <style type="text/css"> #clock { font: bold 24pt sans; background-color: #f5f5f5; padding: 10px 1

  • 最全面的JS倒计时代码

    第一种:精确到秒的javascript倒计时代码 HTML代码: <form name="form1"> <div align="center" align="center"> <center>离2010年还有:<br> <input type="textarea" name="left" size="35" style="

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

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

  • PHP+JS实现的商品秒杀倒计时用法示例

    本文实例讲述了PHP+JS实现的商品秒杀倒计时用法.分享给大家供大家参考,具体如下: <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set('PRC'); //date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动时间段 $starttimestr = "2016-3-29 8:10:00"; $endtimestr = "2016-

  • 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实现表单验证功能(验证手机号是否存在，验证码倒计时)

    废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type

随机推荐