Question

我的目标是创建一个从00:00:00循环到23:59:59的计时器。

问题是循环的持续时间 - 我们称之为looptime的变量 - 应该是可调整的。如果looptime更改为10000，则循环应在10秒内完成，如果更改为100000，则应在100秒内完成，依此类推。

我是javascript的新手，并使用下面的代码创建了一个普通时钟 - 但它只根据实际时间循环 - 如何使用单独的变量加速或减慢此时钟？

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset='UTF-8' />
</head>
<style>
#counter {
  background: #333;
  font-family: sans-serif;
  text-align: center;
  color: #eee;
  text-shadow: 1px 1px 5px black;
  padding: 1rem 0;
  font-size: 3rem;
}
</style>
<body>
  <div id="counter">
    <p></p>
  </div>
<script type="text/javascript">
<!--
setInterval(function time(){
  var d = new Date();
  var hours = d.getHours();
  var min = d.getMinutes();
  if((min + '').length == 1){
    min = '0' + min;
  }
  var sec = 0 + d.getSeconds();
  if((sec + '').length == 1){
        sec = '0' + sec;
  }
  jQuery('#counter').html(hours+':'+min+':'+sec)
}, 1000);

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

Answer 1

试试这个只是对@Jonas回答做了一些修改;）

＆＃13;

var seconds=0;
var increasepersecond=10;//a regular timer

//Call according to speed
function countAndDisplay(){
   var time=[];
   [60,60,24].reduce(function(left,max,i){
      time[i]= ('0' + (left%max)).slice(-2);
      return (left-time[i])/max;
   },seconds);
   
   jQuery('#counter').html(time.reverse().join(":"))
  seconds+=increasepersecond;
}

setInterval(countAndDisplay,1000/increasepersecond);// Run timer accoring to incresed speed

＆＃13;

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset='UTF-8' />
</head>
<style>
#counter {
  background: #333;
  font-family: sans-serif;
  text-align: center;
  color: #eee;
  text-shadow: 1px 1px 5px black;
  padding: 1rem 0;
  font-size: 3rem;
}
</style>
<body>
  <div id="counter">
    <p></p>
  </div>
<script type="text/javascript">
<!--

// -->
</script>
</body>
</html>

＆＃13;

Answer 2

您需要手动计算：

var seconds=0;
var increasypersecond=1;//a regular timer

//or

increasepersecond=60*60*24/10 ;//or do all in 10 seconds

//or

var looptime=10;//all in 10 seconds
increasepersecond=60*60*24/looptime;

//call this each second (or faster)
function countAndDisplay(){
   var time=[];
   [60,60,24].reduce(function(left,max,i){//sets up the time array
      time[i]=left%max;
      return (left-time[i])/max;
   },seconds);
  console.log(time.reverse().join(":"));
  seconds+=increasepersecond;
}

setInterval(countAndDisplay,1000);//regular

Answer 3

您可以这样做：

var time = 10000;

var counter = setInterval(function time(){
  var d = new Date();
  var hours = d.getHours();
  var min = d.getMinutes();
  if((min + '').length == 1){
    min = '0' + min;
  }
  var sec = 0 + d.getSeconds();
  if((sec + '').length == 1){
        sec = '0' + sec;
  }
  jQuery('#counter').html(hours+':'+min+':'+sec)
}, time);


clearInterval(counter);

time = 100000;
counter();

Answer 4

如果我理解你的问题，那么我会分两部分来做。我将描述的第一部分是将时间增加一秒（向前移动）并根据需要调整分钟和小时的功能。我将在下面显示伪代码：

function incrementSeconds(hours,minutes,seconds,secondsIncrement) {
    seconds += secondsIncrement;

    if (seconds > 59) {
        seconds -= 60;
        minutes += 1;
    }

    if (minutes == 60) {
        minutes = 0;
        hours += 1;
    }

    if (hours == 24) {
        //at this point, the time will be
        // 24:00:00
    }
}

上面的函数基本上将 secondsIncrement 秒数添加到当前时间，如果是> 59，相应地调整分钟和小时。

然后，如果您想根据变量递增时钟，可以使用以下内容：

var clockInterval = setIntervalfunction() {
    incrementSeconds(hours,minutes,seconds,10);
},looptime/8640);

最后一位设置java时间间隔。该函数将每x毫秒调用一次（其中x在setInverval的参数1中定义）。一天有86400秒，所以第一个参数需要将其计算在内。但是，我已将其浓缩为8640，并将增量秒的参数3设置为10，因此每次调用时将时钟更改10秒。这是为了减少对该函数的调用次数。

我们使用前面的 clockInterval 中的变量调用 setInterval 的原因是为了给我们一个定时器对象的句柄。这样，当您想要停止间隔时，您可以调用

clearTimeout(clockInterval);

循环24小时，循环时间可调

4 个答案: