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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Javascript Clock With A Tweak

    Hello everybody.

    I need to make a javascript (and only javascript, no php and such) clock, that the hours and the minuets can be updated manually by an html form with 2 fields.

    I cant find a way to do this.

    thanks in advance,
    danbb.
    Last edited by danbb; 06-16-2010 at 09:01 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by danbb View Post
    Hello everybody.

    I need to make a javascript (and only javascript, no php and such) clock, that the hours and the minuets can be updated manually by an html form with 2 fields.
    What does that mean? Normally a clock shows the current time. Are you saying that you want to input some arbitrary time, and the clock then advances from that time at normal speed? If so:-

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    function showTime() {
    var hrs = parseInt(document.myform.hours.value);
    if (isNaN(hrs) || hrs <0 || hrs >23) {
    alert ("Invalid value for hours");
    return false;
    }
    
    var mins = parseInt(document.myform.minutes.value);
    if (isNaN(mins) || mins <0 || mins >59) {
    alert ("Invalid value for minutes");
    return false;
    }
    
    // add a zero in front of numbers < 10
    hrs = checkTime(hrs);
    mins=checkTime(mins);
    
    document.getElementById('txt').innerHTML=hrs+":"+mins;
    t = setTimeout('showTime()',60000);  // update every minute
    }
    
    
    
    function checkTime(i) {
    if (i<10) {
    i="0" + i;
    }
    return i;
    }
    
    </script>
    </head>
    
    <body>
    
    <form name= "myform">
    Hours <input type = "text" name = "hours" size = "2" maxlength = "2">
    Minutes <input type = "text" name= "minutes" size = "2" maxlength = "2">
    <input type = "button" value = "Start Clock" onclick = "showTime()">
    <div id="txt"></div>
    </form>
    
    </body>
    </html>

    I didn't know it was going to happen and I've been proved right. - Football commentator, Blackpool vs Cardiff

  • Users who have thanked Philip M for this post:

    danbb (06-16-2010)

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ok, first of all, this is awsome!! thank you very very much.

    the problem is that i need the clock to run with current time, untill the user updates the time.

    is it possible?

    thank you again! you're great !

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by danbb View Post
    the problem is that i need the clock to run with current time, untill the user updates the time.
    I don't understand what you mean by "update" the time. Update to what?

    Is this what you want?

    Code:
    <html>
    <head>
    <script type = "text/javascript">
    
    var startTime;
    var tim;
    
    function runClock() {
    var hh = document.getElementById("inHour2").value;
    if (isNaN(hh) || hh <0 || hh > 23) {
    alert ("Invalid Value for HOURS")
    return false;
    }
    var mm = document.getElementById("inMinute2").value;
    if (isNaN(mm) || mm <0 || mm > 59) {
    alert ("Invalid Value for MINUTES")
    return false;
    }
    var ss = document.getElementById("inSecond2").value;
    if (isNaN(ss) || ss <0 || ss > 59) {
    alert ("Invalid Value for SECONDS")
    return false;
    }
    
    var start = new Date(2010,1,1,hh,mm,ss);
    startTime = start.getTime();
    incClock();
    }
    
    
    function incClock() {   
    startTime = startTime + 1000;
    var x = new Date(startTime);
    var hours = x.getHours();
    var minutes = x .getMinutes()
    var secs = x.getSeconds();
    document.getElementById("inHour2").value = hours;
    document.getElementById("inMinute2").value = minutes;
    document.getElementById("inSecond2").value = secs;
    tim = setTimeout('incClock()',1000);
    }
    
    function stopClock() {
    window.clearTimeout(tim);
    }
    
    function resetClock() {
    window.clearTimeout(tim);
    document.getElementById("inHour2").value = "";
    document.getElementById("inMinute2").value = "";
    document.getElementById("inSecond2").value = "";
    }
    
    function start() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var secs = now.getSeconds();
    document.getElementById("inHour").value = hours;
    document.getElementById("inMinute").value = minutes;
    document.getElementById("inSecond").value = secs;
    setTimeout("start()",1000);
    }
    
    </script>
    
    </head>
    
    <body onload = "start()">
    
    Actual Time Hours <input type = "text" name = "inHour" id = "inHour" size = "2" maxlength = "2" readonly>
    Actual Time Minutes <input type = "text" name = "inMinute" id = "inMinute" size = "2" maxlength = "2" readonly>
    Actual Time Seconds <input type = "text" name = "inSecond" id = "inSecond" size = "2" maxlength = "2" readonly><br><br>
    
    <input type = "button" name = "but1"id = "but1" value = "Start Clock" onclick = "runClock()">
    <input type = "button" name = "but1"id = "but1" value = "Stop Clock" onclick = "stopClock()">
    <input type = "button" name = "but1"id = "but1" value = "Reset Clock" onclick = "resetClock()"><br><br>
    
    Your Time Hours <input type = "text" name = "inHour2" id = "inHour2" size = "2" maxlength = "2">
    Your Time Minutes <input type = "text" name = "inMinute2" id = "inMinute2" size = "2" maxlength = "2">
    Your Time Seconds <input type = "text" name = "inSecond2" id = "inSecond2" size = "2" maxlength = "2"><br><br>
    
    </body>
    </html>
    Last edited by Philip M; 06-16-2010 at 01:26 PM.

  • Users who have thanked Philip M for this post:

    danbb (06-16-2010)

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ok, thanks again, and sorry for driving you crazy.

    i'll try to explain myself :

    as part of my test, i need to build a web clock. a simple clock that runs normally.

    the clock needs to have an option to update the hour within it. for example, when the page loads, if the hour is 14:40, it should start count from the real current hour. if the user fills in the "update" fields a new hour and minuets, it should start again to count from the "updated" hour.

    something like :

    hour = realtime;
    minuets= realtime;

    form field hours - form field mineuts - form button

    onclick =

    hour = user input hour field
    minuets = form field minuets.

    im trying to modify your code, and this is what i got till now (the time changes every second) :

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function startTime()
    {
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
    }
    
    
    function showTime()
    {
    var today=new Date();
    var h=parseInt(document.myform.hours.value);
    var m=parseInt(document.myform.minutes.value);
    
    // add a zero in front of numbers<10
    m=checkTime(m);
    document.getElementById('txt').innerHTML=h+":"+m;
    t=setTimeout('showTime()',500);
    }
    
    
    
    function checkTime(i)
    {
    if (i<10)
      {
      i="0" + i;
      }
    return i;
    }
    </script>
    </head>
    
    <body>
    
    <form name= "myform">
    Hours <input type = "text" name = "hours" size = "2" maxlength = "2">
    Minutes <input type = "text" name= "minutes" size = "2" maxlength = "2">
    <input type = "button" value = "Start Clock" onclick = "showTime()">
    <input type = "button" value = "Start Clock - Real hour" onclick = "startTime()">
    <div id="txt"></div>
    </form>
    
    <div id="txt"></div>
    </body>
    </html>

    thanks again, you're helping me very much.
    Last edited by danbb; 06-16-2010 at 01:22 PM.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Im pretty uncomforable that you made all this scripts for me. How can I pay you for your work ?

  • #7
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    i want to add an explanation:

    there should be only one clock, than in the start it shows the real current time, and after the user fills the fields and prss "update time", the same clock shold start from the time the user defined.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by danbb View Post
    Im pretty uncomforable that you made all this scripts for me. How can I pay you for your work ?
    Thanks for the thought, but being able to solve these problems assures me that my mental faculties are not waning. The day I cannot answer any of the questions I will start to worry. The day I cannot even understand any of the questions ... er, what was I saying?



    Quote Originally Posted by danbb View Post
    i want to add an explanation:

    there should be only one clock, than in the start it shows the real current time, and after the user fills the fields and prss "update time", the same clock shold start from the time the user defined.

    Well, surely you can modify the code yourself to achieve that?

    Code:
    <html>
    <head>
    <script type = "text/javascript">
    
    var startTime;
    var tim;
    var tim2;
    
    function runClock() {
    window.clearTimeout(tim);
    window.clearTimeout(tim2);
    
    var hh = document.getElementById("inHour2").value;
    if (isNaN(hh) || hh <0 || hh > 23) {
    alert ("Invalid Value for HOURS")
    return false;
    }
    var mm = document.getElementById("inMinute2").value;
    if (isNaN(mm) || mm <0 || mm > 59) {
    alert ("Invalid Value for MINUTES")
    return false;
    }
    var ss = document.getElementById("inSecond2").value;
    if (isNaN(ss) || ss <0 || ss > 59) {
    alert ("Invalid Value for SECONDS")
    return false;
    }
    
    var start = new Date(2010,1,1,hh,mm,ss);
    startTime = start.getTime();
    incClock();
    }
    
    
    function incClock() {   
    startTime = startTime + 1000;
    var x = new Date(startTime);
    var hours = x.getHours();
    var minutes = x .getMinutes()
    var secs = x.getSeconds();
    document.getElementById("inHour").value = checkTime(hours);
    document.getElementById("inMinute").value = checkTime(minutes);
    document.getElementById("inSecond").value = checkTime(secs);
    tim = setTimeout('incClock()',1000);
    }
    
    function stopClock() {
    window.clearTimeout(tim);
    }
    
    function resetClock() {
    window.clearTimeout(tim);
    document.getElementById("inHour").value = "";
    document.getElementById("inMinute").value = "";
    document.getElementById("inSecond").value = "";
    }
    
    function start() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var secs = now.getSeconds();
    document.getElementById("inHour").value = checkTime(hours);
    document.getElementById("inMinute").value = checkTime(minutes);
    document.getElementById("inSecond").value = checkTime(secs);
    tim2 = setTimeout("start()",1000);
    }
    
    function checkTime(x) {
    if (x<10) {x="0" + x}
    return x;
    }
    
    
    </script>
    
    </head>
    
    <body onload = "start()">
    
    Hours <input type = "text" name = "inHour" id = "inHour" size = "2" maxlength = "2" readonly>
    Minutes <input type = "text" name = "inMinute" id = "inMinute" size = "2" maxlength = "2" readonly>
    Seconds <input type = "text" name = "inSecond" id = "inSecond" size = "2" maxlength = "2" readonly><br><br>
    
    <input type = "button" name = "but1"id = "but1" value = "Start Clock" onclick = "runClock()">
    <input type = "button" name = "but1"id = "but1" value = "Stop Clock" onclick = "stopClock()">
    <input type = "button" name = "but1"id = "but1" value = "Reset Clock" onclick = "resetClock()"><br><br>
    
    Start Time Hours <input type = "text" name = "inHour2" id = "inHour2" size = "2" maxlength = "2">
    Start Time Minutes <input type = "text" name = "inMinute2" id = "inMinute2" size = "2" maxlength = "2">
    Start Time Seconds <input type = "text" name = "inSecond2" id = "inSecond2" size = "2" maxlength = "2"><br><br>
    
    </body>
    </html>

  • Users who have thanked Philip M for this post:

    danbb (06-16-2010)

  • #9
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I dont have the words to tell you how thankful I am.

    Its working, and its working great. Thank you very very much!

    And again, I'm really willing to pay you for all of your work. just give me your paypal acc in PM.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by danbb View Post
    I dont have the words to tell you how thankful I am.

    Its working, and its working great. Thank you very very much!

    And again, I'm really willing to pay you for all of your work. just give me your paypal acc in PM.
    If you want you can always make a donation to a charity.

  • Users who have thanked Philip M for this post:

    danbb (06-16-2010)


  •  

    Posting Permissions

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