1

I've looked at a lot of questions on the site, but they don't seem to be for similar issues to mine.

I have a countdown timer written in Javascript that produces an array of weeks, days, hours etc. and calculates every second. The code I have in Countdown.js is:

var countdown = function(end, elements) {
var _second = 1000, 
    _minute = _second * 60,
    _hour = _minute * 60,
    _day = _hour * 24,
    _week = _day * 7,

    end = new Date(end),
    timer,

    calculate = function() {

        var now = new Date(),
            remaining = end.getTime() - now.getTime(),
            data;

        if(remaining <= 0) {
            clearInterval(timer);

            if(typeof callback === 'function') {
                callback();
            }
        } else {
            if(!timer) {
                timer = setInterval(calculate, _second);
            }

            data = {
            'weeks' : Math.floor(remaining / _week),
            'days' : Math.floor((remaining % _week) / _day),
            'hours' : Math.floor((remaining % _day) / _hour),
            'minutes' : Math.floor((remaining % _hour) / _minute),
            'seconds' : Math.floor((remaining % _minute) / _second)
        }

        if(elements.length) {
            for(x in elements) {
                var x = elements[x];
                document.getElementById(x).innerHTML = data[x];
        }
        }

        }


    };

calculate();
}

I assume I have to make some changes to

if(elements.length) {
            for(x in elements) {
                var x = elements[x];
                document.getElementById(x).innerHTML = data[x];

but not sure how to as the data[x]; gets in the way.

The HTML I have in index.html that relates to this is:

<script src="Countdown.js"></script>
<script>
countdown('06/03/2017 03:00:00 PM', ['weeks', 'days', 'hours', 'minutes', 'seconds'] , function() {
console.log('finished!')    
});
</script>

and the weeks, days etc. are all in their individual DIVS like this:

<div style="width: 14%; padding-bottom: 14%; background-color: rgba(141,155,112,0.5); float: left;"><span id="weeks">00</span></div>

Any changes I make to the HTML do not stay as the Javascript takes over and the font reverts to normal. In addition, I would like to use a non standard font so is there a way of using @font-face with Javascript?

Ross Freeman
  • 11
  • 1
  • 1
    The JavaScript you have included in the question makes absolutely no changes to the font, color, size, font face or any other visual aspect of the timer. It looks like those things are controlled by the style of the div. – Tibrogargan Nov 19 '16 at 04:58
  • Thanks @Tibrogargan , the JS is just my entire file to show what I have. I haven't added any attempts to change the styles. – Ross Freeman Nov 19 '16 at 05:31
  • You don't understand. What you have posted has nothing to do with what you say you're trying to do. This code does not "take over" anything. – Tibrogargan Nov 19 '16 at 05:34
  • @Tibrogargan How would you suggest I add a style to the HTML; could you give an example, please? When I try, the style shows for a second when it reads '00', but when the JS runs one second later and shows the amount of weeks left it reverts to Times New Roman at default size. – Ross Freeman Nov 19 '16 at 05:41
  • You should post your attempt to set the style, not what you have in your question. – Tibrogargan Nov 19 '16 at 05:42
  • Possible duplicate of [Load external font with javascript and jquery](http://stackoverflow.com/questions/7282151/load-external-font-with-javascript-and-jquery) – Mr.7 Nov 20 '16 at 05:00

1 Answers1

0

I didn't get any clue on how your javascript code changing your styles. but you can add font-face via javascript.

Creating the FontFace Object

var f = new FontFace("fingerpaint", "url(fingerpaint-regular-webfont.ttf)", {});

Adding the Font to the Page

Before we can add the font to the document, we must explictly force it to be loaded with (what else?) the load() method.

f.load().then(function (loadedFace) {
    document.fonts.add(loadedFace);
});

Using the FontFace

document.body.style.fontFamily = "fingerpaint";

Check this link for reference.

Hope this helps :)

Mr.7
  • 2,292
  • 1
  • 20
  • 33