覚えておいてください、あなたは高いセキュリティのためにこれに頼るべきではありません、誰かが簡単にソースを読んでリンクを理解することができます。あなたがそれを難読化したとしても、ブラウザがそれを解読することができれば、決定された人間もそうすることができます。
var twentyMins = 20 * 60; // 20 minutes * 60 seconds
window.onload = function() {
countDown('my_div1', '<a href="cdtl.html">Hello 1</a>', twentyMins);
}
function countDown(elID, output, seconds) {
var mins,
secs = seconds,
pad = function (n) {
return n > 9 ? n : '0' + n;
};
// get the hours by dividing by the number of seconds in an hour
hours = Math.floor(secs / 3600); // 60 * 60 = 3600
// get the remaining seconds
secs %= 3600;
// likewise, get the number of minutes of by dividing the remaining seconds by 60
mins = Math.floor(secs / 60);
// again, get the remainder of seconds
secs %= 60;
// pad any numbers less than 9 with a leading 0
secs = pad(secs);
mins = pad(mins);
hours = pad(hours);
document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time until link appears: ' + hours + ':' + mins + ':' + secs;
// instead of returning, just don't call setTimout if we are done
if (seconds !== 0) {
seconds -= 1;
// there is no need to pass a string to setTimout, you just pass the function name,
// followed by the timeout in ms, followed by any params
setTimeout(countDown, 1000, elID, output, seconds);
}
}
jsFiddle
ただしsetInterval、の代わりにを使用して書き直すことをお勧めしsetTimeoutます。これは、タイマーが信頼できず、タイマーの遅延長が保証されていないためです。実行setTimeout(something, 1000)するsomethingと、1秒後に実行somethingされる場合もあれば、その後のある時点で実行される場合もあります。たぶん、あちこちで数ミリ秒しかかからないでしょうが、かなりの時間が経つと、それは合計されます。
ボックスのようなalertsetTimeout単純なものでも、ベースのカウントダウンを停止します！以下のコードは、実行するたびに残り秒数を再計算することにより、0.5秒ごとにカウンターを更新します。でこれを行うこともできますがsetTimeout、setIntervalこの作業に適しています。何らかの理由でブラウザが停止した場合、setIntervalキャッチアップを実行しようとするのではなく、一部の実行をドロップするだけです。実行するたびに残り時間を再計算するので、これで問題ありません。これは、alertポップアップが表示されても問題にならないことも意味します。
setTimeout実行するたびにカウンターをデクリメントするために一連のsを当てにしないもう一つの理由は、タブ付きブラウザーの現代の世界では、バックグラウンドタブのタイマー解像度が低くなることが多いためです。これは、ラップトップの電源管理が原因でも発生する可能性があります。通常、これは4msから15msのような最小解像度を取ることを意味するので、この状況で私たちを悩ませることはありませんが、タイマーを使用するときに知っておく必要があることです。
var twentyMins = 20 * 60; // 20 minutes * 60 seconds
window.onload = function() {
countDown('my_div1', '<a href="cdtl.html">Hello 1</a>', twentyMins);
}
function countDown(elID, output, seconds) {
"use strict";
var timer, // timer will hold a reference to the id of our interval
// store a reference to the element so we don't have to keep looking it up
el = document.getElementById(elID),
getTime = function () {
// get the current time in ms since Unix epoch
return (new Date()).getTime();
},
// we will be done counting down when we are
// `seconds` seconds from the current time
finishAt = getTime() + (seconds * 1000),
pad = function (n) {
return n > 9 ? n : '0' + n;
},
lastCount = -1,
update = function () {
var hours,
now = getTime(),
mins,
// the seconds remaining is the finish time
// minus the current time divided by 1000ms
secs = Math.floor((finishAt - now) / 1000);
// Since we might be running this update function more than once
// a second, check to see if the number of seconds has changed since
// our last run. If it hasn't there is no need to do any more calculations
// nor update the DOM.
if (lastCount !== secs) {
lastCount = secs;
// you need to make sure the current time is equal to OR GREATER THEN the finish time
// because the interval could have actually fired sometime (shortly)
// after the time stored in finishAt
if (now >= finishAt) {
clearInterval(timer);
el.innerHTML = output;
} else {
// get the hours by dividing by the number of seconds in an hour
hours = Math.floor(secs / 3600); // 60 * 60 = 3600
// get the remaining seconds
secs %= 3600;
// likewise, get the number of minutes of by dividing the remaining seconds by 60
mins = Math.floor(secs / 60);
// again, get the remainder of seconds
secs %= 60;
secs = Math.floor(secs);
// pad any numbers less than 9 with a leading 0
secs = pad(secs);
mins = pad(mins);
hours = pad(hours);
el.innerHTML = 'Time until link appears: ' + hours + ':' + mins + ':' + secs;
}
}
};
// display the counter right away
update();
// start the timer, updating twice a second to try and avoid
// having the counter seem to skip numbers
timer = setInterval(update, 499);
}
jsFiddle
私が提案した両方のソリューションで、さまざまな時間成分を計算するときに剰余演算子を使用したことに気付いたかもしれません。これを行ったのは、剰余演算子を使用する方が、分を秒として取得するために乗算してから減算するよりも高速だからです。また、私のコードがandの代わりに厳密な等式/不等式比較演算子 を使用していることに気付いたかもしれません。このコーディングスタイルにより、JSLintによる感情の害が少なくなるだけでなく、わずかに高速になります。===!====!=
2番目のより良い解決策では、変数lastCountは前の実行からの残りの合計秒数を格納します。コードは1秒間に複数回実行されるため、前回から結果が変更されているかどうかを確認すると便利です。そうでなければ、もう仕事をする必要はありません。分を計算する必要はありません。さらに重要なのは、DOMアクセスが遅いため、DOMに触れる必要がないことです。