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

前端之家收集整理的这篇文章主要介绍了JS实现根据用户输入分钟进行倒计时功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

冗余版+简化版。

<Meta charset="utf-8">

简化版本:

<Meta charset="utf-8"> 打开调试工具,看<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>!

<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); 

以上所述是小编给大家介绍的JS实现根据用户输入分钟进行倒计时功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/44457.html

猜你在找的JavaScript相关文章