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)

Wednesday, January 31, 2018

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:

12 comments:

  1. vishal Thanks for sharing here I read your review so intresting.I hope you give a useful topic.

    ReplyDelete
  2. That is really attention-grabbing, You're an excessively professional postger. I have joined your feed and sit up for seeking more of your fantastic post. Additionally, I have shared your website in my social networks! seo services in singapore

    ReplyDelete
  3. I am essentially satisfied with your great work.You put truly extremely supportive data. Keep it up. Continue blogging. Hoping to perusing your following post
    digital marketing course

    ReplyDelete
  4. Thanks for sharing such great piece of information with us. Digital Signature Certificate

    ReplyDelete
  5. Thanks for sharing such an awesome post. This is very informative and helpful, share more post like. Digital Signature Certificate

    ReplyDelete
  6. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Private detective agency in Mumbai

    ReplyDelete
  7. Thanks for the post I actually learned something from it. Class 2 Digital Signature Certificate

    ReplyDelete
  8. I highly admire your post. Thanks for sharing such wonderful information. Class 2 Digital Signature Certificate

    ReplyDelete
  9. Thank you so much for providing such useful content. Thanks very nice share.Thank you so much for providing such useful content. Thanks very nice share.<a href="http://www.dsc7.com/class-2-digital-signature-certificates.php><b> Class 2 Digital Signature Certificate </b></a>

    ReplyDelete
  10. I really enjoyed reading your blog, you have lots of great content. Please visit here:
    Digital Signature Certificate in Delhi

    ReplyDelete

More Posts

FOLLOW