2016-12-14 5 views
0

Ich habe diesen Zähler stoppen:Herstellung Javascript Zähler

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

Hier ist der Code:

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

Ich würde es gerne in einem langsameren Basis zu verringern, so dass es nicht der Fall ist Es scheint ein Timer-Countdown zu sein, aber ein Zähler mit voller Nummer.

+0

was genau wollen Sie am Ende erreichen? Funktion startCounter() { stopCounter(); counter_interval = window.setInterval (updateCounter, 5000); } Wenn Sie das Zeitintervall hier ändern, wird es Sie aktualisieren Countdown alle 5 Sekunden statt einer, wenn das, was Sie suchen – Proxy

Antwort

0

Lassen Sie mich raten, dass Sie möchten, dass es wie z. ein Download-Zähler, der anstelle eines zeitgesteuerten Zählers reale Daten enthält, in denen die Leute sehen können, dass es sich nur um einen künstlichen Countdown handelt.

Ich würde vorschlagen, zwei Zufallszahlen zu generieren - eine für das nächste Zeitintervall bis zur Abnahme und eine für den Betrag der Abnahme. Stellen Sie das Zeitintervall auf einen zufälligen Wert zwischen - sagen wir 1 und 3 und den Betrag zwischen 1 und 5 (abhängig davon, wie schnell der Countdown sein soll). Sie möchten wahrscheinlich mit den Werten experimentieren. Stellen Sie auch keinen Anfangswert von 1000000 ein, weil das offensichtlich gefälscht aussieht. Eine solche Implementierung könnte beispielsweise sinnvoll sein, wenn Sie ein Modell für einen Kunden erstellen, in dem Sie später die tatsächlichen zugrunde liegenden Daten ablegen, sodass Ihr Kunde ein Gefühl dafür bekommt, wie sich der Zähler später verhält.

Wenn ich falsch rate, was Sie ursprünglich wollen - lassen Sie es uns wissen und geben Sie weitere Informationen.

Hier ist, was Sie bekommen:

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