製作JavaScript計數器停止

Question

我有這樣的計數器：

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(); 

我想它在較慢的基礎上降低，這樣它不似乎是一個計時器倒計時，但全數計數器。

Answer 1

讓我猜你想讓它看起來像一個下載計數器，它具有真實的底層數據，而不是定時計數器，人們可以看到它只是一個人爲倒計時。

我建議生成兩個隨機數 - 一個用於下一個時間間隔，直到減少，一個用於減少量。將時間間隔設置爲隨機 - 例如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();