Search code examples
javascripthtmlgetelementbyidclock

JavaScript Trying to make a clock for html, can't tell what's broken


JavaScript Trying to make a clock for html, can't tell what's broken. This js clock works fine on a Sharepoint site, but I'm trying to implement it on a local file and it somehow broke along the way. I'm trying to use getElementById to find the <span id> and change the text to the current time. I can't tell what exactly is broken. Thank you for taking a look. Original JSFiddle, Updated JSFiddle. UPDATE: I tried to tidy up the code and now instead of a blank <span> it now gives me a false output. So I guess you could say progress was made. I still don't exactly know whats broken, but the quest continues!
UPDATE 2: Thanks to StackSlave, did a bit of formatting, here is the Final JSFiddle, it works just fine in Chrome, but JSFiddle doesn't quite like it. Thank you to all who helped me in this endeavor.

window.addEventListener('load', Elements, false);
window.addEventListener('load', getElement, false);
window.addEventListener('load', worldClock, false);

  function Elements() {
    getElement("Zulu", worldClock(0, "NODST") );
    getElement("NewYork", worldClock(-9, "NAmerica"));
    setTimeout(Elements, 1e3);
  }

  function getElement(Id, time) {
      var a = document.getElementById(Id);
        if (a)
          a.innerHTML = time;
        else {
            return
          }
  }

  function worldClock(offset, timezone){
    var common = 0;
        a = new Date(new Date().getTimezoneOffset() * 6e4);
        getDate = a.getDate();
        getMonth = a.getMonth();
        getYear = a.getYear();
    return a.getYear < 1e3 && (a.getYear += 1900);
            monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"],
            getYear % 4 == 0 && (days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]),
            getYear % 100 == 0 && getYear % 400 != 0 && (days = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]),
            w = 0,
            offset != 0 && offset % 1 != 0 && (w = offset % 1 * 60),
            l = a.getMinutes() + w,
            l > 59 ? (e = a.getHours() + Math.floor(n) + 1,
            l -= 60) : e = a.getHours() + Math.floor(n),
            y = a.getSeconds(),
            e >= 24 && (e = e - 24,
            s -= -1),
            e < 0 && (e -= -24,
            s -= 1),
            e < 10 && (e = " " + e),
            l < 10 && (l = "0" + 1),
            y < 10 && (y = "0" + y),
            s <= 0 && (0 == 0 ? (o = 11,
            getYear -= 1) : o = o - 1,
            s = days[0]),
            s > days[0] && (s = 1,
            o == 11 ? (o = 0,
            getYear -= 1) : o -= -1),
            t == "NODST" && (c = 0),
            t == "NAmerica" && (u = new Date(),
            i = new Date(),
            u.setMonth(2),
            u.setHours(2),
            u.setDate(13),
            f = u.getDay(),
            f != 0 ? u.setDate(8 - f) : u.setDate(1),
            i.setMonth(9),
            i.setHours(1),
            i.setDate(31),
            f = i.getDay(),
            i.setDate(31 - f),
            r = new Date(),
            r.setMonth(o),
            r.setYear(h),
            r.setDate(s),
            r.setHours(e),
            r >= u && r < i && (c = 1));
  }
<html>

  <head>
    <script type="text/jscript" src="./clock.js"></script>
  </head>

  <body>
    <div class="clock">
      New York:
      <span id="NewYork"> </span>
      Zulu:
      <span id="Zulu"> </span>
    </div>
  </body>

</html>


Solution

  • Let's keey this simple:

    //<![CDATA[
    /* js/external.js */
    var doc, bod, I, ClockMaker; // for use on other loads
    addEventListener('load', function(){
    doc = document; bod = doc.body;
    I = function(id){
      return doc.getElementById(id);
    }
    ClockMaker = function(output, offset){
      this.clocks = [];
      var t = this;
      function out(a){
        var o = a[1] || 0, dt = new Date(3600000*o+Date.now());
        a[0].innerHTML = dt.toUTCString();
      }
      setInterval(function(){
        t.clocks.forEach(out);
      }, 10);
      this.clock = function(output, offset){
        this.clocks.push([output, offset]);
        return this;
      }
    }
    var clocks = new ClockMaker;
    clocks.clock(I('ny'), -5).clock(I('zu'));
    }); // end load
    //]]>
    /* css/external.css */
    html,body{
      box-sizing:border-box; padding:0; margin:0;
    }
    h2{
      margin:5px 7px;
    }
    h2,h2+div{
      display:inline-block;
    }
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
      <head>
        <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
        <title>Simple Clock</title>
        <link type='text/css' rel='stylesheet' href='css/external.css' />
        <script type='text/javascript' src='js/external.js'></script>
      </head>
    <body>
     <div><h2>New York:</h2><div id='ny'></div><div>
     <div><h2>Zulu:</h2><div id='zu'></div></div>
    </body>
    </html>

    You can access dt to use other UTC methods.