このクロックの速度を変更するにはどうすればいいですか

私は現地時間を取得するこの時計を持っています。しかし、私はリアルタイムで6時間が時計の24時間に等しいように変更したいと思います。要約すると、時計は4倍になるはずです。このクロックの速度を変更するにはどうすればいいですか

  // 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; 
 
      }

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

出典

2017-11-27 Thea

ページが読み込まれてそこから4倍速で移動する正しい時刻として開始する必要がありますか？ – arbuthnott

@arbuthnottいいえ、始めるべきではありません。正しい時間です。偽の時間を過ごして、偽の時間を過ごすべきです。 – Thea

私はもののようなもののために書いたクラスを追加しました：私はここではサンプルです、あなたがGoogleでそれを見つけることができると確信していますが、...。このデモでは、秒数を入力して進捗状況を確認しました。

/* 
 
\t a (pausable) linear equation over real time 
 
\t 
 
\t \t value = _speed * Date.now() + _offset; //+ pausing logic 
 
\t \t 
 
\t so basically a clock, a stopwatch, a countdown, a gauge, ... 
 

 
\t since it is only a linear equation over time, it is independant of any interval. 
 
\t It computes the value (using Date.now()) whenever you ask for it. Wether this is ever frame or every hour. 
 
*/ 
 
class Clock { 
 
\t constructor(value=Date.now(), speed=1){ 
 
\t \t //state; changes only when YOU set one of the properties (value, paused or speed) 
 
\t \t this._offset = +value || 0; 
 
\t \t this._speed = +speed || 0; 
 
\t \t this._paused = true; 
 
\t \t 
 
\t \t //preparing a simple hook to get notified after the state has been updated (maybe to store the new state in the localStorage) 
 
\t \t this.onStateChange = undefined; 
 
\t } 
 
\t 
 
\t get value(){ 
 
\t \t return this._paused? this._offset: this._speed*Date.now() + this._offset 
 
\t } 
 
\t set value(arg){ 
 
\t \t let value = +arg || 0; 
 
\t \t let offset = this._paused? value: value - this._speed * Date.now(); 
 
\t \t \t 
 
\t \t if(this._offset !== offset){ 
 
\t \t \t this._offset = offset; 
 
\t \t \t if(typeof this.onStateChange === "function") 
 
\t \t \t \t this.onStateChange(this); 
 
\t \t } 
 
\t } 
 
\t 
 
\t get speed(){ 
 
\t \t return this._speed 
 
\t } 
 
\t set speed(arg){ 
 
\t \t let speed = +arg || 0; 
 
\t \t if(this._speed !== speed){ 
 
\t \t \t if(!this._paused) 
 
\t \t \t \t this._offset += Date.now() * (this._speed - speed); 
 
\t \t \t this._speed = speed; 
 
\t \t \t if(typeof this.onStateChange === "function") 
 
\t \t \t \t this.onStateChange(this); 
 
\t \t } 
 
\t } 
 
\t 
 
\t get paused(){ 
 
\t \t return this._paused 
 
\t } 
 
\t set paused(arg){ 
 
\t \t let pause = !!arg; 
 
\t \t if(this._paused !== pause){ 
 
\t \t this._offset += (pause? 1: -1) * this._speed * Date.now(); 
 
\t \t \t this._paused = pause; 
 
\t \t \t if(typeof this.onStateChange === "function") 
 
\t \t \t this.onStateChange(this); 
 
\t \t } 
 
\t } 
 

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

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

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

これはとても良いですありがとう、問題はどのように私はその機能を追加することになります。これ時計が現地時間からそれぞれの負荷を開始し続けるとはならないということですか？

私は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(); 
}

私はここにSO上でこれらのスニペットにlocalStorageへのアクセス権を持っていないので、私は別々にこのコードを追加しました。

出典

2017-11-27 12:32:17 Thomas

ありがとう、これは非常に良いですが、問題は、このクロックが行くと各ローカル時間から起動しないようにする必要があります..どのように私はその機能を追加するのですか？ – Thea

@Theaは、変更時にlocalStorageにクロックの**状態**を格納する方法の例を追加しました。 – Thomas

ああ、ありがとう。私はlocalStorageで非常に新しいです。私はこれを新しいスクリプトタグに入れて、それを正しく動作させるために何を変更/追加する必要がありますか？ – Thea

それは、すべての言語:)で人気の質問です。

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

出典

2017-11-27 12:19:04

'setInterval'と' setTimeout'の間隔は信頼できません。彼らはもっと褒め言葉になります。「その機能をすぐに呼び出すが、少なくともxyz msにする」その間隔でインクリメントすると、その進捗状況の信頼性がさらに低下します。このクロックには十分に良いかもしれませんが、一般的には良い方法ではありません。 – Thomas

このクロックの速度を変更するにはどうすればいいですか

答えて

関連する問題