2017-08-12 32 views
1

其目標是製作一個網頁來統計用戶在該網頁上的時間。我的方法是使用秒錶來顯示用戶在頁面上的時間。我也使用了window.onblur()函數來查看用戶是否在同一個網頁上。這兩個代碼自己運行得很好。我無法將它們製作成一個程序。試圖在JS中工作此代碼。

Stopwatch program: 
<!DOCTYPE html> 
<html> 
<body> 
<h1 font size= 55 align= "center"><time>00:00:00</time></h1> 
<h2 id= "mee" align= "center"></h2> 
<h3 id="she" align= "center"></h3> 
<button id="start" class= "fof"align= "center">start</button> 
<button id="stop" align= "center">stop</button> 
<button id="clear" align= "center">clear</button> 
<style> 
.fof{ height: 50px; 
border-radius: 50px; 
} 
</style> 
<script> 
var h1 = document.getElementsByTagName('h1')[0], 
start = document.getElementById('start'), 
stop = document.getElementById('stop'), 
clear = document.getElementById('clear'), 
seconds = 0, minutes = 0, hours = 0, 
t; 




function add() { 
    seconds++; 
    if (seconds >= 60) { 
     seconds = 0; 
     minutes++; 
     if (minutes >= 60) { 
      minutes = 0; 
      hours++; 
    } 
} 

    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00")   
+ ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") 
+ ":" + (seconds > 9 ? seconds : "0" + seconds); 

timer(); 

} 


function timer() { 
t = setTimeout(add, 1000); 
} 
timer(); 


/* Start button */ 
start.onclick = timer; 



/* Stop button */ 
stop.onclick = function() { 
clearTimeout(t); 
    document.getElementById("mee").innerHTML= minutes; 
    document.getElementById("she").innerHTML= seconds; 

} 

/* Clear button */ 
clear.onclick = function() { 
h1.textContent = "00:00:00"; 
seconds = 0; minutes = 0; hours = 0; 
} 




</script> 
</body> 
</html> 

Program to see if user is on same webpage: 
    var quitter = false; 
window.onblur = function() { 

    if(!quitter){ 
     quitter = true; 
     alert('You left'); 

    } 

回答

0

檢查下面撥弄

https://jsfiddle.net/yogesh078/5vfxk9e1/1/

JavaScript代碼:

var h1 = document.getElementsByTagName('h1')[0], 
    start = document.getElementById('start'), 
    stop = document.getElementById('stop'), 
    clear = document.getElementById('clear'), 
    seconds = 0, 
    minutes = 0, 
    hours = 0, 
    t; 
var timerRunning = false; 



function add() { 
    seconds++; 
    if (seconds >= 60) { 
     seconds = 0; 
     minutes++; 
     if (minutes >= 60) { 
      minutes = 0; 
      hours++; 
     } 
    } 

    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + 
     ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + 
     ":" + (seconds > 9 ? seconds : "0" + seconds); 

    timer(); 

} 


function timer() { 
    if (timerRunning) { 
     clearTimeout(t); 
    } 
    t = setTimeout(add, 1000); 
    timerRunning = true; 
} 
timer(); 


/* Start button */ 
start.onclick = timer; 



/* Stop button */ 
stop.onclick = function() { 
    clearTimeout(t); 
    timerRunning = false; 
    document.getElementById("mee").innerHTML = minutes; 
    document.getElementById("she").innerHTML = seconds; 

} 

/* Clear button */ 
clear.onclick = function() { 
    h1.textContent = "00:00:00"; 
    seconds = 0; 
    minutes = 0; 
    hours = 0; 
} 




var quitter = false; 
window.onblur = function() { 
    clearTimeout(t); 
    timerRunning = false; 
    quitter = true; 
    alert('You left'); 
} 

window.onmousemove = function() { 
    if (!timerRunning) { 
     timer(); 
    } 
};