让javascript计数器停止

时间:2016-12-14 12:22:21

标签: javascript counter

我有这个柜台:

http://codepen.io/leticiamartinch/pen/YpJgqx

以下是代码:

var MAX_COUNTER = 1000000;
var counter = null;
var counter_interval = null;
var deadline = localStorage.deadline;

function setCookie(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(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1,c.length);
        }
        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length,c.length);
        }
    }
    return null;
}

function deleteCookie(name) {
    setCookie(name,"",-1);
}

function resetCounter() {
    counter = MAX_COUNTER;
}

function stopCounter() {
    window.clearInterval(counter_interval);
    deleteCookie('counter');
}

function updateCounter() {
    var msg = '';
    if (counter > 0) {
        counter -= 1;
        msg = counter;
        setCookie('counter', counter, 1);
    }
    else {
        msg = "Counting finished.";
        stopCounter();
    }
    var el = document.getElementById('counter');
    if (el) {
        el.innerHTML = msg;
    }
}

function startCounter() {
    stopCounter();
    counter_interval = window.setInterval(updateCounter, 1000);
}

function init() {
    counter = getCookie('counter');
    if (!counter) {
        resetCounter();
    }
    startCounter();
}

init();

我希望它在较慢的基础上减少,这样它似乎不是计时器倒计时,而是全数计数器。

1 个答案:

答案 0 :(得分:0)

让我猜你想让它看起来像是一个下载计数器,它有真正的基础数据,而不是定时计数器,人们可以看到它只是一个人工倒计时。

我建议生成两个随机数 - 一个用于下一个时间间隔直到减少,一个用于减少量。将时间间隔设置为随机 - 例如1和3以及1到5之间的数量(取决于您希望倒计时的速度)。您可能想要试验这些值。也不要将初始值设置为1000000,因为这看起来很明显是假的。

这样的实现可能有意义,例如在为客户创建模型时,您可以在以后放置真实的基础数据,以便您的客户了解计数器稍后的行为。

如果我错误地猜测您最初的想法 - 请告诉我们并提供更多信息。

以下是您将获得的信息:

var MAX_COUNTER = 1294652;

var counter = null;
var counter_interval = null;
var deadline = localStorage.deadline;

function setCookie(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(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1,c.length);
        }
        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length,c.length);
        }
    }
    return null;
}

function deleteCookie(name) {
    setCookie(name,"",-1);
}

function resetCounter() {
    counter = MAX_COUNTER;
}

function stopCounter() {
    window.clearInterval(counter_interval);
    deleteCookie('counter');
}

function updateCounter() {
    var msg = '';
    if (counter > 0) {
        newDecreaseAmount = Math.floor(Math.random() * 3) + 1;
        counter -= newDecreaseAmount;
        msg = counter;
        setCookie('counter', counter, 1);

        // set new interval
        newInterval = (Math.floor(Math.random() * 5) + 1) * 1000;
        counter_interval = window.setTimeout(updateCounter, newInterval);
    }
    else {
        msg = "Counting finished.";
        stopCounter();
    }
    var el = document.getElementById('counter');
    if (el) {
        el.innerHTML = msg;
    }
}

function startCounter() {
    stopCounter();
    updateCounter();
}

function init() {
    counter = getCookie('counter');
    if (!counter) {
        resetCounter();
    }
    startCounter();
}

init();