Wie erstelle ich einen Timer, der bei 10 beginnt und auf 1 in 3 Sekunden geht?

Question

Ich bin ein Webdesigner und ich bin kein Entwickler. Ich muss einen Timer erstellen, der schnell von 10 auf 1 herunter zählt, wenn ein Benutzer zu dem Teil der Seite scrollt, auf dem das div erscheint. Ich habe vor, eine große fettgedruckte Schriftart mit nur "10" zu verwenden, die durch die Zahlen 9-2 scrollt und dann bei 1 stoppt (dh ich brauche keinen Timer, der auch Stunden, Doppelpunkte, oder Minuten.

Wer irgendwelche Ideen? Vielen Dank im voraus zu !!!!

Answer 1

der mit einfachem Javascript und einer span-Elemente durchgeführt wird.

var number = 10; 
 
var counter = document.getElementById('counter'); 
 
function countDown() { 
 
    counter.innerHTML = '' + number; 
 
    number--; 
 
    if(number > 0) { 
 
     setTimeout(function() { countDown(); }, 1000.0/3); 
 
    } 
 
} 
 
countDown();

<span id="counter"></span>

That wird einen Zähler auslösen, nachdem er in den sichtbaren Par-Bereich gesprungen ist t des Bildschirms auf Blättern. Beachten Sie, dass ich zwei Elemente hinzugefügt habe, nur zum Zweck des Testens.

var elements = { 
 
    counterA: { 
 
      from: 10, 
 
      to: 0, 
 
      counterStarted: false, 
 
      dom: document.getElementById('counterA'), 
 
      speed: 1000.0/3 
 
    }, 
 
    counterB: { 
 
      from: 400, 
 
      to: 49, 
 
      counterStarted: false, 
 
      dom: document.getElementById('counterB'), 
 
      speed: 1000.0/40 
 
    } 
 
}; 
 

 
function countDown(el) { 
 
    el.dom.innerHTML = '' + el.from; 
 
    el.from--; 
 
    if(el.from > el.to) { 
 
      setTimeout(function() { countDown(el); }, el.speed); 
 
    } 
 
} 
 

 
function triggerCounterIfVisible(el) { 
 
    if(el.counterStarted) return; 
 

 
    var elemTop = el.dom.getBoundingClientRect().top; 
 
    var elemBottom = el.dom.getBoundingClientRect().bottom; 
 

 
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); 
 
    if (isVisible) { 
 
      el.counterStarted = true; 
 
      countDown(el); 
 
    } 
 
} 
 

 
window.onscroll = function() { 
 
    for(var el in elements) { 
 
      triggerCounterIfVisible(elements[el]); 
 
    } 
 
};

<div style="height: 3000px"></div> 
 
<hr /> 
 
<p>Counter: <span id="counterA"></span></p> 
 

 
<div style="height: 3000px"></div> 
 
<hr /> 
 
<p>Counter: <span id="counterB"></span></p> 
 

 
<div style="height: 3000px"></div>