10で始まり3秒で1になるタイマーを作成するにはどうすればよいですか？

Question

私はウェブデザイナーであり、私は開発者ではありません。ユーザーがそのdivが表示されているページの部分にスクロールすると、10から1にすばやくカウントダウンするタイマーを作成する必要があります。私は大文字のフォントを使用することを計画していますが、その中に "10"はありません。それは9-2の数字をスクロールして1に止まります。（つまり、時間、コロン、または分。

誰もが任意のアイデアがありますか？前もってありがとう!!!!

Answer 1

これは、簡単なJavaScriptと1つのスパン要素で行われます。

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。テスト目的のために2つの項目を追加したことに注意してください。

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>