SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Sweden
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you create a digital clock which updates it's time every second in JS?

    I got a tip to post in this forum as you can see below. How do you write a digital clock which updates it's time every second in Javascript?

    /Lars

    --------------------------------------------------------------------------------
    Possible to have a clock which updates it's time every second without java applet?

    I want users with Windows 95 lap tops to be able to use my site. On the front page there's supposed to be a clock which updates it's time every second. The site uses ASP, not ASP.NET. Is it possible to update a text every second without using a Java applet or something similar? I can't use Java. Some may not have it installed. I don't want to reload the page every second.

    /Lars

    --------------------------------------------------------------------------------
    Javascript would then be your only option, however if they do not have it enabled in their browser it will not work.

    An embedded object such as a Java applet or Flash movie, or Javascript to dynamically update the browser without refreshing are your only option. If you would like an example of how to do this in Javascript, please post in the Javascript forum.

    Kind regards,
    Jordan

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2001
    Location
    Norway
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cut & Paste LCD Clock

    Step 1: Insert the following style sheet to the <HEAD> section of your page:

    <style>
    <!--
    .styling{
    background-color:black;
    color:lime;
    font: bold 16px MS Sans Serif;
    padding: 3px;
    }
    -->
    </style>

    Step 2: Add the below code into the <BODY>, where you wish the clock to appear:

    <span id="digitalclock" class="styling"></span>

    <script>
    <!--

    //LCD Clock script- by javascriptkit.com
    //Visit JavaScript Kit (http://javascriptkit.com) for script
    //Credit must stay intact for use

    var alternate=0
    var standardbrowser=!document.all&&!document.getElementById

    if (standardbrowser)
    document.write('<form name="tick"><input type="text" name="tock" size="11"></form>')

    function show(){
    if (!standardbrowser)
    var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
    var Digital=new Date()
    var hours=Digital.getHours()
    var minutes=Digital.getMinutes()
    var dn="AM"

    if (hours==12) dn="PM"
    if (hours>12){
    dn="PM"
    hours=hours-12
    }
    if (hours==0) hours=12
    if (hours.toString().length==1)
    hours="0"+hours
    if (minutes<=9)
    minutes="0"+minutes

    if (standardbrowser){
    if (alternate==0)
    document.tick.tock.value=hours+" : "+minutes+" "+dn
    else
    document.tick.tock.value=hours+" "+minutes+" "+dn
    }
    else{
    if (alternate==0)
    clockobj.innerHTML=hours+"<font color='lime'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
    else
    clockobj.innerHTML=hours+"<font color='black'>&nbsp;:&nbsp;</font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
    }
    alternate=(alternate==0)? 1 : 0
    setTimeout("show()",1000)
    }
    window.onload=show

    //-->
    </script>


    Best Regards
    oeystein

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    For regular and continuous updates using setInterval would be more appropriate than using setTimeout as that will keep better time since it does away with the time it takes to run the code and then call setTimeout again.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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