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


Posted in Javascript onNovember 14, 2016

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

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

冗余版+简化版。

<!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实现根据用户输入分钟进行倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
微信小程序开发探究
Dec 27 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
详解VUE 数组更新
Dec 16 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
js实现九宫格布局效果
May 28 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
js调用屏幕宽度的简单方法
Nov 14 #Javascript
jquery心形点赞关注效果的简单实现
Nov 14 #Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 #Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 #Javascript
Node.js中路径处理模块path详解
Nov 14 #Javascript
JavaScript队列、优先队列与循环队列
Nov 14 #Javascript
JavaScript中setTimeout的那些事儿
Nov 14 #Javascript
You might like
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
PHP CURL使用详解
2019/03/21 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
小学英语教学随笔
2015/08/14 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS