How to create a timer that starts at 10 and goes to 1 in 3 seconds?

Question

I am a web designer, and I am not much of a developer. I need to create a timer that counts down quickly from 10 to 1 when a user scrolls to the part of the page where that div appears. I'm planning on using a large bold font with nothing but "10" in it, that scrolls through the numbers 9-2 and then stops at 1. (ie, I don't need a timer that also has hours, colons, or minutes.

Anyone have any ideas? Thank you ahead of time!!!!

Tim Rijavec · Accepted Answer · 2016-05-27T18:52:20.797

This is done with simple javascript and one span element.

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 will trigger counter after it pops into visible part of the screen on scroll. Note that I've added two items, just for testing purpose.

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>

Okay, great. This works, but how can I trigger it to start by scrolling down to a certain part of the page? It will be close to the bottom of the page. Thank you! — Clare12345, May 27 '16 at 16:59
@Clare12345 Please see my updated answer above and accept the answer if you like it. — Tim Rijavec, May 27 '16 at 18:53
note that you need to scroll a little bit to get to the two elements :) — Tim Rijavec, May 27 '16 at 19:01
Hi, thank you. I'm trying to add this to my WordPress website and I'm not sure what's missing. I've added the JS to the header and the HTML to a page. — Clare12345, Jun 11 '16 at 11:30
@Clare12345 I'm sorry but I'm not an expert with WordPress. It would be better if you ask that question here http://wordpress.stackexchange.com/ .They should know more. — Tim Rijavec, Jun 15 '16 at 08:24

How to create a timer that starts at 10 and goes to 1 in 3 seconds?

1 Answers1