Question

我有这个时钟来获取当地时间。但是我想改变，以便实时6小时等于24小时。总而言之，时钟应该加速4倍。

＆＃13;

            // This function gets the current time and injects it into the DOM
            function updateClock() {
                // Gets the current time
                var now = new Date();

                // Get the hours, minutes and seconds from the current time
                var hours = now.getHours();
                var minutes = now.getMinutes();
                var seconds = now.getSeconds();

                // Format hours, minutes and seconds
                if (hours < 10) {
                    hours = "0" + hours;
                }
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }

                // Gets the element we want to inject the clock into
                var elem = document.getElementById('clock');

                // Sets the elements inner HTML value to our clock data
                elem.innerHTML = hours + ':' + minutes;
            }

＆＃13;

<body onload="setInterval('updateClock()', 200);">
<h1 id="clock"></h1>
</body>

＆＃13;

Answer 1

这是每种语言的流行问题:)。我相信你可以在google上找到它，但是......这是样本：

let mydate = new Date();
let mydate_millisec=mydate.getTime();

let offset = 4;

function clock() {
  next();
  setInterval("next()", 1000 / offset);
}
function next() {
  console.log(new Date(mydate_millisec).toString());

  mydate_millisec += 1000;
}
clock();

Answer 2

我添加了一个我为这类东西写的课程。对于这个演示，我已经包含了秒数，因此您可以看到进度。

＆＃13;

/*
	a (pausable) linear equation over real time
	
		value = _speed * Date.now() + _offset;  //+ pausing logic
		
	so basically a clock, a stopwatch, a countdown, a gauge, ...

	since it is only a linear equation over time, it is independant of any interval.
	It computes the value (using Date.now()) whenever you ask for it. Wether this is ever frame or every hour.
*/
class Clock {
	constructor(value=Date.now(), speed=1){
		//state; changes only when YOU set one of the properties (value, paused or speed)
		this._offset = +value || 0;
		this._speed = +speed || 0;
		this._paused = true;
		
		//preparing a simple hook to get notified after the state has been updated (maybe to store the new state in the localStorage)
		this.onStateChange = undefined;
	}
	
	get value(){ 
		return this._paused? this._offset: this._speed*Date.now() + this._offset 
	}
	set value(arg){
		let value = +arg || 0;
		let offset = this._paused? value: value - this._speed * Date.now();
			
		if(this._offset !== offset){
			this._offset = offset;
			if(typeof this.onStateChange === "function") 
				this.onStateChange(this);
		}
	}
	
	get speed(){
		return this._speed
	}
	set speed(arg){
		let speed = +arg || 0;
		if(this._speed !== speed){
			if(!this._paused)
				this._offset += Date.now() * (this._speed - speed);
			this._speed = speed;
			if(typeof this.onStateChange === "function")
				this.onStateChange(this);
		}
	}
	
	get paused(){
		return this._paused
	}
	set paused(arg){
		let pause = !!arg;
		if(this._paused !== pause){
		  this._offset += (pause? 1: -1) * this._speed * Date.now();
			this._paused = pause;
			if(typeof this.onStateChange === "function")
			  this.onStateChange(this);
		}
	}

	time(){
		let value = this.value,v = Math.abs(value);
		return {
			value,
			//sign: value < 0? "-": "",
			seconds: Math.floor(v/1e3)%60,
			minutes: Math.floor(v/6e4)%60,
			hours: Math.floor(v/36e5)%24,
			days: Math.floor(v/864e5)
		}
	}
	
	valueOf(){
		return this.value;
	}	
	
	start(){
		this.paused = false;
		return this;		
	}
	stop(){
		this.paused = true;
		return this;
	}
}

function lz(v){ //leading zero
  return String(v).padStart(2, 0);
}

function update(){
  let {hours, minutes, seconds} = clock.time();
  let node = document.getElementById('clock');
  
  node.textContent = [hours, minutes, seconds].map(lz).join(":");
  
  requestAnimationFrame(update);
  //setTimeout(update, 250);
}

let clock = new Clock(Date.now(), 4).start();
update();

＆＃13;

<h1 id="clock"></h1>

＆＃13;

谢谢你这是非常好的，问题是这个时钟应该继续运行而不是从每个加载的本地时间开始..我将如何添加该功能？

对于类似的东西，我添加了onStateChange钩子。当它被更改时，你可以用它来存储这个时钟的状态。

let clock = new Clock(Date.now(), 4).start();
//add the hook
clock.onStateChange = function(){
  //will be called whenever you change the state of this clock. things like changing the speed or paused state, or when you set the value.
  localStorage.setItem("clock", JSON.stringify(this));
}
//check wether there is a stored state for this "clock"
if(localStorage.hasItem("clock")){
  //simply overwrite the state of the clock.
  Object.assign(clock, JSON.parse(localStorage.getItem("clock")))
}else{
  //if there's no current state stored, force storing the current state
  clock.onStateChange();
}

我已经单独添加了此代码，因为我在这些片段中无法访问localStorage。

我怎样才能改变这个时钟的速度

2 个答案: