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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    115
    Thanks
    1
    Thanked 0 Times in 0 Posts

    how to start the timer in external js?

    Hi guys,

    I have got a problem with my timer variable in javascript. I can't be able to start the timer every one second to input the clock time in my webpage. I tried to find out but i can't find the solution.


    here is the html code:

    Code:
    <html>
    <body>
    
    <style type="text/css">  
         
    #mytextfont {
        font-family:Arial;
        font-size:43px;
        font-style:normal;
        font-weight:normal;
        color:e5ee6f;
        text-decoration:none;
        text-transform:none; 
        position:absolute; 
        visibility:hidden; 
        overflow:hidden; 
        left:50px; top:40px; width:376px; height:90px; 
        z-index:0;
    }
    
    <span id="text1">this is a text</span>
    
    <div id="image1" style="position:absolute; overflow:hidden; left:328px; top:7px; width:164px; height:102px; z-index:0"><img src="/images/picture1.jpg" alt="" title="" border=0 width=164 height=102></div>
    
    <div id="image2" style="position:absolute; overflow:hidden; left:492px; top:7px; width:201px; height:102px; z-index:0"><img src="/images/picture2.jpg" alt="" title="" border=0 width=211 height=102></div>
    
    <script type="text/javascript" src="keyboard.js"></script>
    </body>
    </html>
    key.js:

    Code:
    function clocktimer()
    {
      var date = new Date();
      var weekday=new Array(7);
      weekday[0]="Sun";
      weekday[1]="Mon";
      weekday[2]="Tue";
      weekday[3]="Wed";
      weekday[4]="Thurs";
      weekday[5]="Fri";
      weekday[6]="Sat";
      var months=new Array(11);
      months[0]="January";
      months[1]="February";
      months[2]="March";
      months[3]="April";
      months[4]="May";
      months[5]="June";
      months[6]="July";
      months[7]="August";
      months[8]="September";
      months[9]="October";
      months[10]="November";
      months[11]="December";
      var d = date.getDate();
      var h = today.getHours();
      var m = today.getMinutes();
      document.getElementById("datetime").innerHTML =+ h+':'+ m+' '+ weekday[date.getDay()]+' '+ d+' '+ months[date.getMonth()];
    }
    
    document.onkeydown = function(ev) 
    {
       ev = ev || event;
       key = ev.keyCode || ev.which;
       var image1 = document.getElementById("image1").getElementsByTagName("img")[0];
       var image2 = document.getElementById("image2").getElementsByTagName("img")[0];
    
    if(key == 13)
    {
      var img1 = image1.src;
      var img2 = image2.src;
      
      if (img1.indexOf('picture1_yellow.jpg') != -1)
      {
         if (img2.indexOf('picture2_yellow.jpg') != -1)
         {      
             document.getElementById("text1").style.visibility = "visible";
             document.getElementById("image1").style.visibility = "hidden"; 
             document.getElementById("image2").style.visibility = "hidden"; 
             setInterval("clocktimer",1000);
         }
      }
    }
    Do you know how i can start the timer in javascript in every one second while update the text in html page?

    Any advice would be much appreicated.

    Thanks in advance
    Last edited by mark103; 03-30-2013 at 02:16 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by mark103 View Post
    Do you know how i can start the timer in javascript in every one second while update the text in html page?
    Have a look at setInterval(). You seem to be using that already, so I don't entirely understand your question.

    To write text to the page, use a <span id = "whatever"> and then document.getElementById("whatever").innerHTML = "thetextyouwanttodisplay".
    Again, you seem to be doing that already.

    Perhaps you need to clarify exactly what it is you are trying to achieve.

    I notice an error:-

    var d = date.getDate();
    var h = today.getHours();
    var m = today.getMinutes();

    I would prefer the variable name today or now to date, as date is easily confused with Date.

    The clocktimer script is very inefficient as the constant definitions of weekday and month names are re-evaluated each time the function is triggered (each second). Place these definitions outside the function.

    var image1 = document.getElementById("image1").
    You are using the same name for a Javascript variable and an HTML element. That is not advised as can cause problems in some browser, and in any case can be confusing.



    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 03-30-2013 at 09:13 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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