如何創建一個從10開始並在3秒內變爲1的計時器？

Question

我是一名網頁設計師，我不是一個開發人員。我需要創建一個計時器，當用戶滾動到該div出現的頁面部分時，該計時器從10到1快速倒計時。我打算使用一個只有「10」的粗大字體，滾動數字9-2然後停在1.（即，我不需要一個計時器，它也有小時，冒號，或分鐘。

任何人有什麼想法嗎？謝謝你的時間提前!!!!

Answer 1

這是通過簡單的JavaScript和一個span元素來完成。

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>

那會在觸發可見的參數後觸發計數器t在滾動屏幕上。請注意，我添加了兩個項目，僅用於測試目的。

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>