Question

我有一个计时器，每秒加1变量MenuTimer。我想要的是当按下下一个按钮时TillOpen MenuTimer将停止在此之后添加1，而新变量则添加1而不是PackTime

window.onload = function () {
    var StopwatchSeconds= 00;
    var StopwatchMinutes = 00;
    var ShowSeconds = document.getElementById("seconds");
    var ShowMinutes = document.getElementById("minutes");
    var StartButton = document.getElementById("ButtonStart");
    var Interval;
    var menuTime;
    var serviceTime;
    var orders;
    var menuAvg;
    var serviceAvg;

    StartButton.onclick= function(){
        clearInterval(Interval);
        Interval = setInterval(startTimer, 1000);
    }

    function startTimer () {
        StopwatchSeconds++;

        if(StopwatchSeconds > 59) {

            ShowSeconds.innerHTML = "0" + StopwatchSeconds; 
            StopwatchSeconds = 0; 
            ShowMinutes.innerHTML = StopwatchMinutes;
            StopwatchMinutes++;
        }

        if(StopwatchSeconds < 59) {
            ShowSeconds.innerHTML = StopwatchSeconds;
        }
    }
}

Answer 1

新解决方案，允许创建不同的计时器并跟踪它们：

//a method to setup a new timer
function Timer(Name){
   this.timeElement=document.createElement("div");
   (this.stopButton=document.createElement("button")).innerHTML="STOP";
   (this.startButton=document.createElement("button")).innerHTML="START";
   (this.Name=document.createElement("h1")).innerHTML=Name;
   [this.Name,this.timeElement,this.startButton,this.stopButton].forEach(el=>document.body.appendChild(el));

   this.stopButton.addEventListener("click",this.stop.bind(this));
   this.startButton.addEventListener("click",this.start.bind(this));

   this.seconds=0;
   this.minutes=0;
}

Timer.prototype={

    update:function() {
        this.seconds++;
        if(this.seconds > 59) {
             this.seconds=0;
             this.minutes++;
        }
        var secTemp="00"+this.seconds, minTemp="00"+this.minutes;
        this.timeElement.innerHTML=minTemp.slice(minTemp.length-2)+":"+secTemp.slice(secTemp.length-2);
    },     


    stop:function(){
         if(this.interval) clearInterval(this.interval);
         this.running=false;
         if(this.onstop) this.onstop(this);
    }   

    start:function(){
         if(this.interval) clearInterval(this.interval);
         this.interval = setInterval(this.update.bind(this), 1000);
         this.running=true;
         if(this.onstart) this.onstart(this);             
    }   
};

这实现了一个带OOP的Timer。所以你可以创建多个计时器，它们不会相互影响。

你可以创建一个这样的计时器：

var timer= new Timer("The Name");

您还可以更改事件，设置/读取时间并检查是否正在运行：

timer.start();//start the timer ( can also be done with the ui button)
timer.stop();
timer.onstart=()=>alert("Started!");
timer.onstop=()=>alert("Stopped!");
console.log(timer.running,timer.minutes,timer.seconds);

如果您想等待多个计时器并计算所有计时器停止时的平均值：

var timers=["Timer 1", "Timer 2"].map(name=>new Timer(name));//create two timers and store in array
timers.forEach(function(timer){
   timer.running=true;
   timer.onstop=function(){
      if(timers.some(t=>t.running)) return;//if theres a running timer dont procceed

      var seconds=timers.reduce((seconds,timer)=>seconds+=(timer.seconds+timer.minutes*60),0);
      var average=seconds/timers.length;
      alert("Average: "+average+"s");
  };
});

http://jsbin.com/coduvohewu/edit?output

旧解决方案，如果按下新按钮则添加计时器，然后停止旧计时器：

所以你想要停止当前的计时器，并在下面创建一个新的计时器？也许你可以稍微重构代码，做这样的事情：

window.onload = function () {
var seconds= 0,minutes = 0;
var times=[];
var Interval;
var timeElement;

//a method to setup a new timer
function createTimer(dontsave){
   if(times.length>3) return alert(times.map(el=>el.join(":")).join());
   timeElement=document.createElement("div");
   document.body.appendChild(timeElement);
   if(!dontsave) times.push([minutes,seconds]);
}

createTimer(true);

//a method to let the timer run
function startTimer () {
    seconds++;
    if(seconds > 59) {
       seconds=0;
       minutes++;
    }
    var secTemp="00"+seconds,minTemp="00"+minutes;
    timeElement.innerHTML=minTemp.slice(minTemp.length-2)+":"+secTemp.slice(secTemp.length-2);
}     

//assign to buttons:

document.getElementById("ButtonStart").onclick= function(){
 clearInterval(Interval);
 Interval = setInterval(startTimer, 1000);
}

document.getElementById("ButtonNew").onclick=createTimer;

};

http://jsbin.com/mujisaweyo/edit?output

如果您按下ID为 ButtonNew 的按钮，这只会在DOM中创建一个新的div。因此，当前时间在旧元素中保留为文本，并且在新元素中保持计数。我还添加了零填充...

Answer 2

这就是全部。它的一半有效，但希望你能更好地了解我想要的东西。

var Interval;
var PackInterval;
var StopwatchSeconds= 00;
var StopwatchMinutes = 00;
var ShowSeconds = document.getElementById("seconds");
var ShowMinutes = document.getElementById("minutes");
var StartButton = document.getElementById("ButtonStart");
var TillOpenButton = document.getElementById("TillOpen");
var FinishButton = document.getElementById("Finish");
var ShowMenuTime = document.getElementById("MenuTime");
var ShowPackTime = document.getElementById("PackTime");
var ShowPackAvgSeconds = document.getElementById("PackerSeconds");
var ShowPackAvgMinutes = document.getElementById("PackerMinutes");
var ShowMenuAvgSeconds = document.getElementById("MenuMinutes");
var ShowMenuAvgMinutes = document.getElementById("MenuSeconds");
var DivisionSeconds = 60;
var TotalTime = 0;
var MenuTime = 0;
var PackTime = 0;
var AllMenuTimes = 0;
var AllPackTimes = 0;
var TotalMenuOrders = 0;
var TotalPackOrders = 0;
var MenuOrdersTotalSeconds = 0;
var PackOrdersTotalSeconds = 0;
var MenuAvgMinutes = 0;
var MenuAvgSeconds = 0;
var PackAvgSeconds = 0;
var PackAvgMinutes = 0;



StartButton.onclick = function(){
  TotalMenuOrders + 1;
  MenuTime = 0;
  ShowMenuTime.innerHTML = MenuTime; 
  clearInterval(Interval);
  Interval = setInterval(startTimer, 1000);

  window.alert ("I work");


 }

//This starts the timer. Inverval is a variable that holds the timer number. 

function startTimer () {

    StopwatchSeconds++;
    TotalTime++;
    MenuTime++; 
   AllMenuTime++;
    if(StopwatchSeconds > 59) {

        ShowSeconds.innerHTML = "0" + StopwatchSeconds; 
      StopwatchSeconds = 0; 

            StopwatchMinutes++;
      ShowMinutes.innerHTML = StopwatchMinutes; // Makes this a string in html

    }

    if(StopwatchSeconds < 59) {
        ShowSeconds.innerHTML = StopwatchSeconds;
     }
}

// When the start button is pressed this function starts. it adds 1 to 
Stopwatch, total and Menu every 1000 increments that Interval hits. 
// This also says if StopwatchSeconds goes above 59 itll reset to 0 and if 
its below itll keep counting. 

TillOpenButton.onclick = function () {
    PackTime = 0;
   ShowPackTime.innerHTML = PackTime;
      ShowMenuTime.innerHTML = MenuTime;
    PackInterval = setInterval(startPackerTimer, 1000);
         Interval+PackInterval;
      clearInterval(Interval);


/*    if (TotalMenuOrders < 1) {

  AllMenuTimes / TotalMenuOrders = MenuOrdersTotalSeconds;
 MenuOrderTotalSeconds % 60 = MenuAvgSeconds;
  MenuAvgMinutes = Math.floor(MenuOrderTotalSeconds/60);

  ShowMenuAvgMinutes.innerHTML = MenuAvgMinutes; 
  ShowMenuAvgSeconds.innerHTML = MenuAvgSeconds;
  }
  */
    }






// When this button is pressed it stops the first timer and the menu timer. 
It then starts a new timer and function which add to the variable that will 
show the total time. 
// It does clear the variable Interval though

FinishButton.onclick = function (){
  clearInterval(Interval);
  ShowPackTime.innerHTML = PackTime;
  clearInterval(PackInterval);
  StopwatchSeconds = 0;
  StopwatchMinutes = 0;
  ShowSeconds.innerHTMl = 0 + StopwatchSeconds; 
  ShowMinutes.innerHTML = 0 + StopwatchMinutes;

  AllPackTimes += PackTime;
  TotalPackOrders++;

   /*AllPackTimes/TotalPackOrders = PackOrderTotalSeconds;
     PackOrderTotalSeconds % DivisionSeconds = PackAvgSeconds;

  PackAvgMinutes = Math.floor(PackOrderTotalSeconds/60);

  ShowPackAvgMinutes.innerHTML = PackAvgMinutes; 
  ShowPackAvgSeconds.innerHTML = PackAvgSeconds;*/


}

// When the Finish Button is pressed it clears everything. Resets 
everything. except Menu Time, Total Time and PackTime. I need 3 new 
variables to hold these to get the average. 






function startPackerTimer () {

  StopwatchSeconds++;
    TotalTime++;
    PackTime++;

    if(StopwatchSeconds > 59) {

        ShowSeconds.innerHTML = "0" + StopwatchSeconds; 
      StopwatchSeconds = 0; 

        StopwatchMinutes++;
      ShowMinutes.innerHTML = StopwatchMinutes;

    }

    if(StopwatchSeconds < 59) {
        ShowSeconds.innerHTML = StopwatchSeconds;
    }
    // Same deal but with the Till open button. Still adds onto 
STopwatchSeconds so the variable doesn't change.

}

增量问题

2 个答案: