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

    Question Error Creating updating clock that supports multiple instances

    OK so I created an updating clock script that works (the first set of code) but it only works for one instance so I decided to change it where it will support multiple instance so I wrote the code with embedded functions (second set of code). The first code works and the second code is pretty much just the same code but written using this.example = function() {. Can someone help me fix it? This is my first attempt designing a script using the "this" feature and I'd like to know whats wrong. I have it set up where you can choose to make the code display the servers time (by embedding server-side values for the time), using the clients (by using the JavaScript date() function) or by setting your own values into the parameters of the main function.

    Original (code that works):
    Code:
    			// v1.0
                            var clockElement = document.getElementById("Clock");
                            var clockZone = "(CST)";
                            var clockHours = 2;
                            var clockMinutes = 8;
                            var clockSeconds = 21;
                            var clockMilleseconds = 1000 - 321;
                            function clockDisplay() {
                                if (clockSeconds > 59) {
                                    clockSeconds = 0;
                                    if (++clockMinutes > 59) {
                                        clockMinutes = 0;
                                        clockHours = (clockHours + 1) % 24;
                                        }
                                    }
                                var hours = clockHours;
                                var ampm = (hours >= 12) ? " PM " : " AM ";
                                if (hours > 12) { hours -= 12; }
                                else if (hours == 0) { hours = 12; }
                                clockString = (hours < 10 ? "0" : "") + hours + ":" + (clockMinutes < 10 ? "0" : "") + clockMinutes + /*":" + (clockSeconds < 10 ? "0" : "") + clockSeconds + */ampm + clockZone;
                                clockElement.innerHTML = clockString;
                                ++clockSeconds;
                            }
                            function clockUpdate() {
                                clockDisplay();
                                setInterval(clockDisplay, 1000);
                            }
                            clockDisplay();
                            setTimeout(clockUpdate, clockMilleseconds);
    New (code that doesn't work):

    (JS file)
    Code:
    function Clock(elementID, TimeZone, hour, minute, second, millesecond) {
        var objectVar = this;
        this.clockElement = document.getElementById(elementID);
        this.clockZone = "(" + TimeZone + ")";
        this.clockHours = hour;
        this.clockSeconds = second;
        this.clockMinute = minute;
        this.clockMilleseconds = 1000 - millesecond;
        this.firstIntervalReached = false;
        this.update = false;
        this.display = function() {
          if (objectVar.clockSeconds > 59) {
             objectVar.clockSeconds = 0;
             if (++objectVar.clockMinutes > 59) {
             objectVar.clockMinutes = 0;
             objectVar.clockHours = (clockHours + 1) % 24;
             }
          }
          var clockString;
          var hours = objectVar.clockHours;
          var ampm = (hours >= 12) ? " PM " : " AM ";
          if (hours > 12) { hours -= 12; }
          else if (hours == 0) { hours = 12; }
          clockString = (hours < 10 ? "0" : "") + hours + ":" + (objectVar.clockMinutes < 10 ? "0" : "") + objectVar.clockMinutes + /*":" + (objectVar.clockSeconds < 10 ? "0" : "") + objectVar.clockSeconds + */ampm + objectVar.clockZone;
          objectVar.clockElement.innerHTML = clockString;
          if (objectVar.update == true) {
             ++objectVar.clockSeconds;
             if (objectVar.firstIntervalReached == false) {
                objectVar.firstIntervalReached = true;
                setTimeout(objectVar.display, objectVar.clockMilleseconds);
             }
             else {
             setTimeout(objectVar.display, 1000);
             }
          }                  
    };
    (Head script):
    Code:
                    function initializeClock() {
                    var clock = new Clock("Clock", "CST", <% Response.Write(DateTime.Now.Hour.ToString()); %> + 2, <% Response.Write(DateTime.Now.Minute.ToString()); %>, <% Response.Write(DateTime.Now.Second.ToString()); %>, <% Response.Write(DateTime.Now.Millisecond.ToString()); %>);
                    clock.update = true;
                    clock.display();
                    }
                    if (document.addEventListener) {
                        document.addEventListener("DOMContentLoaded", initializeClock, false);
                    }
    (Body HTML):
    Code:
    <div id="Clock" align="right"><span style="color: red; font-size: small;">Error running JavaScript</span></div>
    Last edited by Trickstar; 06-30-2012 at 11:42 PM.


 

Posting Permissions

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