私はこのようにもっと多くのことを説明できるので、最初から始めることができます。
まず、ユーザーがページに到着した時間を保存する必要があります。 これは、ページが読み込まれた後に日付を保存することで実行できます。
// The variable is outside because we need every function to
// be able to access it (like a global variable)
var userArrived;
// The function to initialize the counter
function initCounter(){
// Get the date when the user arrived
// here we do not use `var` because the variable exists
userArrived = new Date().getTime(); // This returns the date in milliseconds
}
// Wait the page to load
window.addEventListener('load', function(){
// Initialize the counter
initCounter();
}, false);
は、今、私たちは、我々は人間が読める形式に解析する機能を必要とするミリ秒を得ることができることを今、私たちに違い
function getCounterValue(){
// Calculate difference
var value = new Date().getTime() - userArrived;
// This variable now have the time the user
// is on the page in milliseconds
// Now we need to return the value to the caller
return value;
}
を与える機能を必要としています。
function parseMs2Sec(ms){
// We calculate seconds using seconds = milliseconds/1000
// but we round it so that we don't have decimals
var sec = Math.round(ms/1000);
// Now we need to return the value to the caller
return sec;
}
私たちが必要とする視覚的要素を1秒(またはそれ以上)ごとに更新するために残された唯一のことは、今です。
// Save the element on a variable for easy access
var timeSpent = document.forms[0].timespent;
// Update the screen with the latest time
function updateScreeenCounter(){
// Get the time the user is in the page
var ms = getCounterValue();
// Convert it to seconds
var sec = parseMs2Sec(ms);
// Display it in the page
timeSpent.value = sec + " sec.";
}
// Every 1000 milliseconds
setInterval(function(){
// Run function
updateScreeenCounter();
}, 1000);
// But this last code (with the interval)
// needs to run after the counter was initialized
// so we should put it inside the onload event we created.
そして、ここでは、デモの穴コードです:
//
// The variable is outside because we need every function to
// be able to access it (like a global variable)
var userArrived;
// The function to initialize the counter
function initCounter(){
// Get the date when the user arrived
// here we do not use `var` because the variable exists
userArrived = new Date().getTime(); // This returns the date in milliseconds
}
// Gives back the time since the user arrived on page (in ms)
function getCounterValue(){
// Calculate difference
var value = new Date().getTime() - userArrived;
// This variable now have the time the user
// is on the page in milliseconds
// Now we need to return the value to the caller
return value;
}
// Converts the given ms in the closest seconds
function parseMs2Sec(ms){
// We calculate seconds using seconds = milliseconds/1000
// but we round it so that we don't have decimals
var sec = Math.round(ms/1000);
// Now we need to return the value to the caller
return sec;
}
// Update the screen with the latest time
function updateScreeenCounter(){
// Get the time the user is in the page
var ms = getCounterValue();
// Convert it to seconds
var sec = parseMs2Sec(ms);
// Display it in the page
document.forms[0].timespent.value = sec + " sec.";
}
// Wait the page to load
window.addEventListener('load', function(){
// Initialize the counter
initCounter();
// Every 1000 milliseconds
\t setInterval(function(){
\t // Run function
\t updateScreeenCounter();
\t }, 1000);
}, false);
<form>
<input name="timespent" value="Loading ..."/>
</form>
いくつかのより多くのヒント:
- は再びJavascriptのチュートリアルを読んで、ここw3schools
- ここにクロームデベロッパーツールガイドを読むDevTools私はこの中で
setInterval
を使用することをお勧めしていることを言及するのを忘れてしまった
~~~編集~~~
(FirefoxとOperaは同じ、あまりにも機能があります)低速のコンピュータでは再帰的なものよりも正確です。
あなたの 'clockstart'変数はグローバルでなければなりません。 'initstopwatch'を連続して2回呼び出します。 invalide ';'ここに 'window.setTimeout( 'getSecs()'、1000;)'があるため、あなたのコードは 'SyntaxError'をスローします。 – GramThanos
私はそれを訂正しました。 – GameCoder
@ThanasisGrammatopoulosどのような関数でも必要な入力データをすべて取得し、実行を継続できるように、グローバル関数のbuttonfunction()ソートを作成しようとしています。それは可能ですか? – GameCoder