Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1

Thread: JS Timer

  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts

    JS Timer

    I made this timer. You can adjust the timer by changing

    Code:
    setTimeout('digital_clock()', 500)
    ( iv set it at 500 but you can change it to 1000 or what ever)

    Full javascript
    Code:
    <script type="text/javascript">
    function digital_clock()
    {
    var date=new Date()
    var hours=date.getHours()
    var minutes=date.getMinutes()
    var seconds=date.getSeconds()
    minutes=addZero(minutes)
    seconds=addZero(seconds)
    document.getElementById('hours')
    .innerHTML = hours
    document.getElementById('minutes')
    .innerHTML = minutes
    document.getElementById('seconds')
    .innerHTML = seconds
    setTimeout('digital_clock()', 500)
    }
    function addZero(min_or_sec)
    {
    if (min_or_sec < 10)
    {min_or_sec="0" + min_or_sec}
    return min_or_sec
    }
    </script>
    Html to make it work and display

    Code:
    <body onload="digital_clock()">
    <h1>Time.</h1>
    <div id="wrap">
    <div id="digital-clock">
    <ul>
    <li id="hours"></li>
    <li> :</li>
    <li id="minutes"></li>
    <li> :</li>
    <li id="seconds"></li>
    </ul>
    </div>
    </div>
    </body>
    Just to make it look pretty the style sheet.

    Code:
    <style type="text/css">
    body,
    html {
    background:#eee url(/resources/images/bg.gif);background-repeat: repeat-x;
    }
    body {
    padding:0 15px 15px;margin-top:15px;
    color:#222;
    }
    #wrap {
    position: relative;
    }
    #digital-clock {
    border:1px solid #fff;
    width:7em;
    }
    #digital-clock ul {
    margin:0;
    padding:0.1em;
    background:#003366;
    color:#FFF;
    list-style-type:none;
    text-align:center;
    }
    #digital-clock li {
    display:inline;
    padding:0;
    margin:0;
    }
    </style>
    Hope you enjoy

    A example of what it will look like http://i.imgur.com/utqdU.png
    Attached Thumbnails Attached Thumbnails JS Timer-utqdu.png  
    Last edited by Hydrian; 08-26-2012 at 04:56 AM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •