web-dev-qa-db-ja.com

JavaScriptの2番目のカウンター

私のWebサイトでは、ユーザーが自分のサイトにアクセスした秒数(分や時間ではなく)を数え(そして表示)しようとしています。したがって、彼らが5分間それをしていると、5分ではなく300と表示されます。私はJavaScriptに非常に慣れていないので、助けてください。

8
JaredCBarnes

setInterval関数を使用して、好きなだけ別の関数を実行できます。例えば:

var seconds = 0;
var el = document.getElementById('seconds-counter');

function incrementSeconds() {
    seconds += 1;
    el.innerText = "You have been here for " + seconds + " seconds.";
}

var cancel = setInterval(incrementSeconds, 1000);
<div id='seconds-counter'> </div>

このスニペットを実行すると、カウンターが機能していることがわかります。

setInterval関数は2つのパラメーターを取ります。

  • 呼び出したい関数
  • 呼び出し間のミリ秒数

1秒ごとにカウンターを増分して呼び出す必要があるため、1000ミリ秒(1秒)を使用します。

詳細については、 setIntervalのMDNドキュメント を参照してください。

17
Andrew Burgess

私の答えは上記のものに似ていますが、とにかくそれをあげます。これは単一のページでのみ機能するため、サイトがすでにAJAXで実行されていることを願っています。

window.setInterval((function(){
   var start = Date.now();
   var textNode = document.createTextNode('0');
   document.getElementById('seconds').appendChild(textNode);
   return function() {
        textNode.data = Math.floor((Date.now()-start)/1000);
        };
   }()), 1000);
You've been on this page for <span id=seconds></span> seconds.
7
Jonathan Gray