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 8 of 8

Thread: Date function

  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Arrow Date function

    I want to get a digital time clock updated every second in 12 Hrs format but the following code i wrote is not meeting my objective.

    What can be wrong with the code below-

    Code:
    <html>
    <head>
    <style>
    #v{
    background-color:navy;
    height:auto;
    width:auto;
    font-size:22pt;
    color:white;
    font-weight:bold;
    padding:20px;
    text-align:center;
    marquee-style:alternate;
    }
    </style>
    </head>
    <body>
    <div id="v"></div>
    <script>
    function showTime()
    {
    var dt=new Date();
    var h=dt.getHours();
    var m=dt.getMinutes();
    var s=dt.getSeconds();
    //var chr=h;
    if (m< 10) {
          m= "0" + m;
        }
        if (s < 10) {
          s = "0" + s;
        }
        if (h > 12) {
          h=h - 12;
          add = " p.m.";
        } else {
          h=h;
          add = " a.m.";
        }
        if (h == 12) {
          add = " p.m.";
        }
        if (h==0) {
          h="12";
        }
    
        time=((hour<=10) ? "0" + h : h) + ":" + m + ":" + s + add;
    
    document.getElementById("v").innerHTML=time;
    setTimeout("showTime()",100);
    }
    showTime();
    </script>
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Code:
    time=((hour<=10) ? "0" + h : h)
    No place in your code have you defined a variable named hour, so you get an error when you try to use it.

    I'd also point out that you have <=10 there whereas you have <10 for seconds and minutes. Think about it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    ippo (09-22-2011)

  • #3
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    Great !! Thanks very much .

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    43
    Thanks
    6
    Thanked 6 Times in 6 Posts
    I'm not very good with javascript, but I played with your code a little, just to try out another way. Seems javascript already has formatting functions that do this for you, here's what I ended up with:

    Code:
    <html>
    <head>
    
    <style>
    #v{
    background-color:navy;
    color:white;
    height:auto;
    width:auto;
    font-size:22pt;
    font-weight:bold;
    padding:20px;
    text-align:center;
    marquee-style:alternate;
    }
    </style>
    
    <script type="text/javascript">
    function getcurtime()
    {
    var tm = new Date();
    return tm;
    }
    </script>
    
    </head>
    <body>
    
    <div id="v">
    </div>
    
    <script type="text/javascript">
     function update(){
       var t=getcurtime();
       tmo=setTimeout("update()",1000);
       document.getElementById("v").innerHTML=t.toLocaleTimeString();
    }
    update();
    </script>
    
    </body>
    </html>

  • Users who have thanked morongo47 for this post:

    ippo (09-22-2011)

  • #5
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts
    Hi Morongo47,
    Thanks vry much. Vry nice answer and short too. Great work.
    But just a little more help I seek from the two of you -
    Can you just give a marquee effect to the above time?
    I want the time to scroll horizontally from left to right within the div portion (preferably if possible with CSS)

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    43
    Thanks
    6
    Thanked 6 Times in 6 Posts
    Like I said, I'm not too conversant with javascript, but here's what i found:

    '<marquee>' is pretty much deprecated but still has backward compatibility in HTML5, however, it was pulled from CSS3 in 2010 - so that's what it is with using that tag.

    jQuery has a marquee method you can try.

    From my trials and errors hard-coding this, it looks like there's a timer conflict when attempting to use marquee-tags around a string that's being updated every second, it wants to re-initialize (start-over), prematurely, so it doesn't make the trip all the way across the screen.

    Some of the other guys might be more into this kind of thing than I am, so they might have a solution, apart from linking-in a 3rd party lib.
    .

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
    <style type="text/css">
    #v{
    	position:relative;
    	top:0;
    	background-color:navy;
    	color:white;
    	height:auto;
    	width:auto;
    	padding-top:20px;
    	padding-bottom:20px;
    	overflow:hidden;
    	font-size:22pt;
    	font-weight:bold;}
    </style>
    <script type="text/javascript">
    function getcurtime()
    {
      var a = new Date();
      return [a.toLocaleTimeString().split(' ').join('&nbsp;'),
    	a.getSeconds()*1.66];
    }
    function init(){
      setInterval("var a = getcurtime();"+
            "var v = document.getElementById('v');"+
    	"v.innerHTML=a[0];"+
    	"v.style.paddingLeft=a[1]+'%';"+
    	"v.style.width=100-a[1]+'%'",100)
    }
    
    </script>
    
    </head>
    <body onload="init()">
    <div id="v"></div>
    
    <p>Scrolling Time</p>
    
    </body>
    </html>
    Last edited by DaveyErwin; 09-22-2011 at 10:11 PM.

  • Users who have thanked DaveyErwin for this post:

    ippo (09-23-2011)

  • #8
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Thumbs up

    Hi
    Thank You @DaveyErwin for this wonderful answer. .I thanked you for this expert answer again.
    Can you please explain how the program works in some details?
    Will be greatly obliged


  •  

    Posting Permissions

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