网页中的秒表本地存储

时间:2015-05-05 12:20:23

标签: javascript jquery html

我正在尝试创建一个网站,并且会有一个选项,当用户自动记录它时会开始计算用户的工作时间,

刷新页面时是否可以禁用秒表自动休息,

如何在更改页面时稳定秒表

我的代码吼叫

HTML

<a href="#" id="time" class="pointable btn-icon"></a>

的JavaScript

$(document).ready(function () {
var startTime;
var timeout;
var pauseTime = 0;
var mils;
var paused = false;
var count = 0;

$('#time').html('00:00:00');
var btn = $(this);
startTime = new Date();
clock();
function clock() {
    //$('#time').removeClass('paused');
    var curTime = new Date();
    mils = (curTime - startTime) + pauseTime;
    var time = milToTime(mils);
    formatTime(time);

    var outStr = time.h + ':' + time.m + ':' + time.s;
    document.getElementById('time').innerHTML = outStr;
    timeout = setTimeout(clock, 20);

}
$(window).bind('beforeunload', function () {
    return 'Are you sure you want to leave?';
});

function formatTime(time) {
    for (var i in time) {
        if (i == "mils") {
            if (time[i] < 1) {
                time[i] = "000";
            } else
                if (time[i] < 10) {
                    time[i] = "00" + time[i];
                } else
                    if (time[i] < 100) {
                        time[i] = "0" + time[i];
                    }
        } else if (time[i] < 10) {
            time[i] = "0" + time[i];
        }
    }
    return time;
}

function milToTime(mil) {
    mi = mil % 1000;
    seconds = parseInt(mil / 1000) % 60;
    minutes = parseInt(mil / 1000 / 60) % 60;
    hours = parseInt(mil / 1000 / 3600);
    return { s: seconds, m: minutes, h: hours, mils: mi };
}

});

jsFiddle

1 个答案:

答案 0 :(得分:1)

既然你已经同意使用cookie,虽然这是一种不好的做法,并且许多用户可能没有在他们的浏览器上启用cookie,但我已经提出了一个代码来帮助你达到你的要求。

var createCookie = function(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

$(document).ready(function () {
    var startTime;
    var timeout;
    var pauseTime = 0;
    var mils;
    var paused = false;
    var count = 0;

    $('#time').html('00:00:00');
    var btn = $(this);

    if (getCookie("time") != "" && getCookie("time") != "NaN") {
        startTime = getCookie("time");
    } else {
        startTime = Date.now();
        createCookie ("time", startTime);
    }

    clock();

    function clock() {
        var curTime = Date.now();
        mils = (curTime - startTime) + pauseTime;
        var time = milToTime(mils);
        formatTime(time);

        var outStr = time.h + ':' + time.m + ':' + time.s;
        document.getElementById('time').innerHTML = outStr;

        timeout = setTimeout(clock, 20);
    }
    $(window).bind('beforeunload', function () {
        return 'Are you sure you want to leave?';
    });

    function formatTime(time) {
        for (var i in time) {
            if (i == "mils") {
                if (time[i] < 1) {
                    time[i] = "000";
                } else
                    if (time[i] < 10) {
                        time[i] = "00" + time[i];
                    } else
                        if (time[i] < 100) {
                            time[i] = "0" + time[i];
                        }
            } else if (time[i] < 10) {
                time[i] = "0" + time[i];
            }
        }
        return time;
    }

    function milToTime(mil) {
        mi = mil % 1000;
        seconds = parseInt(mil / 1000) % 60;
        minutes = parseInt(mil / 1000 / 60) % 60;
        hours = parseInt(mil / 1000 / 3600);
        return { s: seconds, m: minutes, h: hours, mils: mi };
    }

});

请在 JSFiddle 上查看。

编辑:刷新整个页面并查看。有用...!! :)但你想在用户注销时删除cookie或在用户登录时休息。或者那将会给你前一次登录的开始时间,然后就会破坏...... !!

现在,如果你不想使用cookie,那么其他选项是Session,Query String或Application header键值信息......但是你必须在服务器端处理所有这些。< / p>

希望这会有所帮助......