我在javascript中有簡單的stopwatch,我的問題是如果它有可能在某種程度上實現cookie,所以如果我關閉瀏覽器,然後重新打開它(或至少關閉與秒錶,不是確定如果有差異),計時器將仍然運行。實現餅乾到簡單的秒錶
0
A
回答
0
如果您在Cookie中存儲開始時間(如秒錶啓動時刻的實際時間值),那麼無論您何時從該瀏覽器打開頁面,都可以從Cookie讀取開始時間,獲取當前時間,計算已用時間並顯示已用時間。
然後,您可以從那裏計算出時間。
它會顯示計時器一直在運行。
這樣做的一個很好的功能是,當關閉標籤時(這有時會出現問題),您不必存儲任何東西。相反,您只需在秒錶啓動時存儲cookie。
1
下面是使用Cookie用秒錶的例子:
https://jsfiddle.net/tmonster/00eobuxy/
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Number.prototype.pad = function() {
return ("0" + String(this)).substr(-2);
}
var startTime = new Date();
var isRunning = false;
function tick() {
if (!isRunning) return;
var t = new Date(new Date() - startTime);
document.getElementById("stopwatch").innerHTML = t.getUTCHours().pad() + ":" + t.getMinutes().pad() + ":" + t.getSeconds().pad();
setTimeout(tick, 1000);
}
function CheckIfClockedIn() {
var ct = getCookie("ClockInTime");
if (ct.length == 0) return;
isRunning = true;
startTime = new Date(ct);
tick();
document.getElementById("punchInOut").innerHTML = "Clock out";
}
function PunchInOut() {
if (!isRunning) {
isRunning = true;
startTime = new Date();
tick();
setCookie("ClockInTime", startTime, 1);
document.getElementById("punchInOut").innerHTML = "Clock out";
} else {
isRunning = false;
setCookie("ClockInTime", "", 0);
document.getElementById("stopwatch").innerHTML = "Not clocked in";
document.getElementById("punchInOut").innerHTML = "Clock in";
}
}
相關問題
- 1. 簡單的/ etc/shadow餅乾
- 2. 餅乾單獨的表?
- 3. 名單__utm餅乾
- 4. jQuery的餅乾當表單提交
- 5. 隱藏字段的web表單餅乾
- 6. 簡單的無鎖秒錶
- 7. 簡單的C++ CLR秒錶
- 8. 設置餅乾與表單按鈕
- 9. PHP/Javascript:記住狀態的表單/表單域與餅乾
- 10. 餅乾
- 11. 餅乾?
- 12. 餅乾
- 13. 餅乾
- 14. 餅乾的WebView
- 15. 的WebOb餅乾
- 16. HttpWebRequest的餅乾
- 17. JQuery餅乾(堅持餅乾)與鐵軌
- 18. Jquery製表符餅乾
- 19. 電子得到httponly餅乾
- 20. Simpleton的簡單實現
- 21. 簡單的OpenID實現
- 22. 簡單的OpenGL實現
- 23. 實現最簡單的DHT
- 24. Keras簡單的RNN實現
- 25. 實現簡單的shell
- 26. 實現骨幹
- 27. PHP的 - 在餅乾
- 28. 餅乾中的UIWebView
- 29. 餅乾getMaxAge
- 30. RestTemplate和餅乾