CODEWITHSUNDEEP
javascriptcountdown
mar
mar

Reputation: 11

Making a countdown clock

I'm not sure how to change the font,the size, and the color of the words on this. 

<script type="text/javascript">
    var end = new Date('02/19/2012 10:1 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>

Upvotes: 1

Views: 166

Answers (1)

Ali Mamedov
Ali Mamedov

Reputation: 5256

Try this sample:

Just add a new line to your code:

document.getElementById('countdown').style.cssText = 'color: green; font-size: 40px;';

It will help you to define any style you want.

var end = new Date('02/19/2017 10:1 AM');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {

        clearInterval(timer);
        document.getElementById('countdown').innerHTML = 'EXPIRED!';

        return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('countdown').style.cssText = 'color: green; font-size: 40px;';
    document.getElementById('countdown').innerHTML = days + ' days ';
    document.getElementById('countdown').innerHTML += hours + ' hrs ';
    document.getElementById('countdown').innerHTML += minutes + ' mins ';
    document.getElementById('countdown').innerHTML += seconds + ' secs';
    
}

timer = setInterval(showRemaining, 1000);
<span id="countdown"></span>

As noticed @andlrc, you can do It without JavaScript. Use CSS styles. Add a new style to your html page

<style type="text/css">
    #countdown {

        color: green;
        font-size: 40px;
    }
</style>
<span id="countdown"></span>

Upvotes: 1

Related Questions