如何使倒数计时器在特定的秒数内倒数? [英] How to make a countdown timer counting down in specific set of seconds?

问题描述

我有以下代码:

var hours = Math.floor((timeLeft) / 3600);
var minutes = Math.floor((timeLeft - (hours * 3600)) / 60);
var seconds = Math.floor((timeLeft - (hours * 3600) - (minutes * 60)));

if (hours < "10") {
  hours = "0" + hours;
}
if (minutes < "10") {
  minutes = "0" + minutes;
}
if (seconds < "10") {
  seconds = "0" + seconds;
}

$("#" + divName).html(hours + ":" + minutes + ":" + seconds);

让我们假设这些值.

End date = 13 Feb 2018 
Now Date = 12 Feb 2018

23:59:59 Current Counter

及其作品

23:59:58
23:59:57

现在我想每秒显示一次Counter，我想根据自己的需求减少2或3秒

Now I want to show Counter like this on Every Second I want to Decrements 2 or 3 Seconds depending upon my Requirement

23:59:59  
23:59:57
23:59:55

我该怎么做?

推荐答案

setTimeout和setInterval都不准确，因此也不可靠.因此，我宁愿只使用Date.now()

Neither setTimeout nor setInterval is accurate and therefore reliable. So instead of accumulating errors on each iteration I prefer to solve this independant of any interval, only using Date.now()

一个简单的版本是:

//a simple linear equation over time, independant of any interval
function clock(startValue=Date.now(), speed=1){
  let m=+speed||0, b=(+startValue||0)-m*Date.now();
  //every time you call this function, it will give you 
  //the value for the very moment you call this function
  //wether you do this every second, every hour of on every frame
  return function time(){
    let value = m*Date.now()+b, v = Math.abs(value);
    return {
      value,
      sign: value < 0? "-": "",
      ms: Math.floor(value)%1e3,
      seconds: Math.floor(v/1e3)%60,
      minutes: Math.floor(v/6e4)%60,
      hours: Math.floor(v/36e5)%24,
      days: Math.floor(v/864e5)
    }
  }
}

//I find these constants pretty handy when describing time
const MS=1,SECOND=1e3,SECONDS=SECOND,MINUTE=6e4,MINUTES=MINUTE,HOUR=36e5,HOURS=HOUR,DAY=864e5,DAYS=DAY,WEEK=6048e5,WEEKS=WEEK;

//this is more descriptive
let countDown = clock(24*HOURS, -10*SECONDS / SECOND);
//than this
//let countDown = clock(86400000, -10);

let output = document.querySelector('#time');
//a helper
const leadingZero = v => String(v).padStart(2,0);

//this is just rendering the current time
//it has nothing to do with computing the time
setInterval(function(){
  let { sign, hours, minutes, seconds } = countDown();
  let hms = [hours, minutes, seconds].map(leadingZero).join(":");
  
  output.textContent = sign + hms;
}, 100);

<div id="time"></div>

但是通常我会使用更完整/多功能的实现

But usually I'd use a more complete/versatile implementation

class Clock {
  constructor(value=Date.now(), speed=1){
    this.m = +speed || 0;
    this.b = +value || 0;
    this.p = true;
  }

  get value(){ return this.p? this.b: this.m*Date.now() + this.b }
  set value(arg){
    let value = +arg || 0;
    this.b = this.p? value: value - Date.now()*this.m;
  }


  get paused(){ return this.p }
  set paused(arg){
    let pause = !!arg;
    if(pause === this.p) return;
    this.b += this.m*Date.now() * (pause? 1: -1);
    this.p = pause;
  }


  get speed(){ return this.m }
  set speed(arg){
    let speed = +arg || 0;
    if(speed === this.m) return;
    if(!this.p)
      this.b += Date.now() * (this.m-speed);
    this.m = speed;
  }

  valueOf(){ return this.value; }

  start(){
    this.paused = false;
    return this;
  }

  stop(){
    this.paused = true;
    return this;
  }

  time(){
    let value = this.value, v = Math.abs(value);
    return {
      value,
      sign: value < 0? "-": "",
      ms: Math.floor(value)%1e3,
      seconds: Math.floor(v/1e3)%60,
      minutes: Math.floor(v/6e4)%60,
      hours: Math.floor(v/36e5)%24,
      days: Math.floor(v/864e5)
    }
  }
}


const MS=1,SECOND=1e3,SECONDS=SECOND,MINUTE=6e4,MINUTES=MINUTE,HOUR=36e5,HOURS=HOUR,DAY=864e5,DAYS=DAY,WEEK=6048e5,WEEKS=WEEK;

let speed = this.speed;
let countDown = new Clock(24*HOURS-1, speed.value);

let output = document.querySelector('#time');
this.startBtn.onclick = () => countDown.start();
this.stopBtn.onclick = () => countDown.stop();

speed.onchange = speed.onkeyup = () => {
  if(!isNaN(+speed.value)) countDown.speed = speed.value;
}

const leadingZero = v => String(v).padStart(2,0);

//this is just rendering the current time
//it has nothing to do with computing the time
setInterval(function(){
  let { sign, hours, minutes, seconds } = countDown.time();
  
  output.textContent = sign + [hours, minutes, seconds].map(leadingZero).join(":");
}, 100);

console.log(countDown);

<div id="time"></div>
<input type="button" id="startBtn" value="start" />
<input type="button" id="stopBtn" value="stop" />
<input type="number" id="speed" value="-2" />

有帮助吗?

这篇关于如何使倒数计时器在特定的秒数内倒数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！