Countdown Timer Using HTML, CSS, JAVASCRIPT

<html>

<head>
    <style type="text/css">
        body{
            text-align: center;
            font-family: sans-serif;
            font-weight: 100;

        }

        h1{
            color: #b53e0f;
            font-weight: 100;
            font-size: 40px;
            margin: 40px 0px 20px;
        }
        #clockdiv{
            font-family: sans-serif;
            color: #fff;
            display: inline-block;
            font-weight: 100;
            text-align: center;
            font-size: 30px;
        }
        #clockdiv > div{
            padding: 10px;
            border-radius: 19px;
            background: #2b0a26;
            display: inline-block;
        }
        #clockdiv div > span{
            padding: 15px;
            border-radius: 20px;
            background: #00816A;
            display: inline-block;
        }
        .smalltext{
            padding-top: 5px;
            font-size: 16px;
        }
    </style>
</head>

<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<script type="text/javascript">
var deadline = 'December 31 2018';

// Convert time to usable format

function getTimeRemaining(deadline) {
var t = Date.parse(deadline) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
       'total': t,
       'days': days,
       'hours': hours,
       'minutes': minutes,
       'seconds': seconds        };
    }

function Clock(id, deadline) {
var clock = document.getElementById(id);

// The query selector method only returns the first element that matches
 the specified selectors.
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(deadline);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
 if (t.total <= 0) {
     clearInterval(timeinterval);
     }
  }
updateClock();
   var timeinterval = setInterval(updateClock, 1000);
 }

 Clock('clockdiv', deadline);

</script>

</body>
</html>
Output:

No comments:

Post a Comment

Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Popular Posts