2016-04-18 3 views
0

以下は、システムクロックに基づいて午前8時30分からの時間と分を示したコードです。これは内部目的のみに使用されているため、ベストプラクティスには悩まされませんリアルタイム計算としてdocument.write

<html> 
<head> 
<title>Time Past Since</title> 
<meta http-equiv="Refresh" content="60"> 
<script> 
window.resizeTo(300,100); 
sd = new Date(); // Get system date (sd) 
sh = sd.getHours(); // Get system hour (sh) 
sm = sd.getMinutes(); // Get system minutes (sm) 
wh = (08); // Specify work start hour (wh) 
wm =(30); // Specify work start minute (wh) 
ts = ((sh *60 + sm) - (wh *60 + wm)); // Specify time since (ts) in minutes 
hs = Math.floor(ts/60); // Convert the hours (hs) 
ms = Math.round((ts/60 % 1) * 60); // Convert the minutes (ms) 
fh = hs < 10 ? "0" : "" // Format Hours (fh) 
fm = ms < 10 ? "0" : "" // Format Minutes (fm) 
</script> 
</head> 
<body> 
<center><script>document.write(fh + hs + " hours " + fm + ms + " minutes."); </script></center> 

あなたは、私がページごとに60秒をリフレッシュするためにメタを使用している見ることができるように、私が好むことの差を算出するdocument.writeに代わるものです。

私はインラインhtmlが代わりであることは知っていますが、私はそれを動作させるようには見えません。私のコードの実際の例は素晴らしいでしょう。

+0

多分** setTimeout **? –

+0

'document.write'を使わないでください。 '

'は使用しないでください。宣言されていない変数は使用しないでください。グローバル変数は使用しないでください。 doctypeを使用します。 HTML要素を適切に閉じます。 – Oriol

答えて

1

以下は、あなたがしたいと思うことを行うスニペットです。 2回の違いを計算するより効率的な方法がありますが、私はあなたのコードを使用しました。興味があればthis SO questionを参照してください。

<html> 
 
    <head> 
 
    <title>Time Past Since</title> 
 
    </head> 
 
    
 
    <body> 
 
    <center id="time">Test</center> 
 

 
    <script> 
 
     window.resizeTo(300,100); 
 

 
     updateTime(); 
 
     setInterval(updateTime, 60000); 
 

 
     function updateTime() { 
 
     sd = new Date(); // Get system date (sd) 
 
     sh = sd.getHours(); // Get system hour (sh) 
 
     sm = sd.getMinutes(); // Get system minutes (sm) 
 
     wh = (08); // Specify work start hour (wh) 
 
     wm =(30); // Specify work start minute (wh) 
 
     ts = ((sh *60 + sm) - (wh *60 + wm)); // Specify time since (ts) in minutes 
 
     hs = Math.floor(ts/60); // Convert the hours (hs) 
 
     ms = Math.round((ts/60 % 1) * 60); // Convert the minutes (ms) 
 
     fh = hs < 10 ? "0" : ""; // Format Hours (fh) 
 
     fm = ms < 10 ? "0" : ""; // Format Minutes (fm) 
 
     document.getElementById("time").innerHTML = fh + hs + " hours " + fm + ms + " minutes."; 
 
     } 
 
    </script> 
 
    </body> 
 
</html>

私はupdateTimeと呼ばれる機能で時間の計算を包み、それが60秒ごとに実行します。これは、更新する必要なくテキストを更新します。

私は関数を無名関数にするのではなく、関数の名前をページの最初の読み込み時に一度呼び出す必要があるため、名前を付けました。

あなたの質問に答えると、緑色の「回答を受け入れる」ボタンをクリックするのを忘れないでください!

+0

システムクロックを調整しても、完璧なリアルタイム性があります。遅れなくても、ありがとうございます。 –

0

これを行う最もクリーンな方法ではありませんが、本当に気にしないように聞こえます。

<html> 
<head> 
<title>Time Past Since</title> 
<script> 
window.resizeTo(300,100); 
setInterval(function(){ 
var sd = new Date(), // Get system date (sd) 
sh = sd.getHours(), // Get system hour (sh) 
sm = sd.getMinutes(), // Get system minutes (sm) 
wh = (08), // Specify work start hour (wh) 
wm =(30), // Specify work start minute (wh) 
ts = ((sh *60 + sm) - (wh *60 + wm)), // Specify time since (ts) in minutes 
hs = Math.floor(ts/60), // Convert the hours (hs) 
ms = Math.round((ts/60 % 1) * 60), // Convert the minutes (ms) 
fh = hs < 10 ? "0" : "", // Format Hours (fh) 
fm = ms < 10 ? "0" : "", // Format Minutes (fm) 
str = fh + hs + " hours " + fm + ms + " minutes."; 
document.getElementById('display').innerHTML = str; 
}, 60000); 

</script> 
</head> 
<body> 
<div><center id="display"></center></div> 
</body> 
</html> 
関連する問題