Nixie HTML

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Nixie Clock</title>
  <script type="text/javascript" src="nixie.js?1"></script>
  <style type="text/css">
    body {
      background-color: rgb(0, 0, 0);
    }

    .display {
      margin: 0 auto;
    }

    .calendar {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      zoom: 1.6;
    }

    .clock {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      zoom: 1.8;
    }
  </style>
</head>
<body>

<div class="holder" onclick="myFunction()">
  <div id="1">
    <div class="clock">
      <table class="display">
        <tr>
          <td>
            <div id="ndTime1"></div>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div id="2" style="display: none;">
    <div class="calendar">
      <table class="display">
        <tr>
          <td>
              <div id="ndDate1"></div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

<script type="text/javascript">
  function myFunction() {
    var x = document.getElementById("1");
    var y = document.getElementById("2");

    if (x.style.display === "none") {
      x.style.display = "block";
    }
    else {
      x.style.display = "none";
    }
    if (y.style.display === "none") {
      y.style.display = "block";
    }
    else {
      y.style.display = "none";
    }
  }
</script>

<script type="text/javascript">
  // *** Clock ***
  nixieTime1 = new NixieClock();  // create component instance
  nixieTime1.id = 'ndTime1';      // assign instance id
  nixieTime1.init();              // initialize component (after assigning params)
  nixieTime1.run();               // run clock

  // setup skin switching
  nixieTime1.__skinSwitch = function() {
    var nd = nixieTime1;
    nd.urlCharsetImage = 'zm1080_d1_09bdm_62x100_8b.png';
    nd.charWidth = 62;
    nd.charHeight = 100;
    nd.extraGapsWidths[1] = 20;
    nd.extraGapsWidths[3] = 20;
    nd.charGapWidth = 2;
    nd.init();

    return false;
  }

  nixieTime1.__skinSwitch();

   // *** Simple display ***

   nixieDate1 = new NixieDisplay();
  nixieDate1.id = 'ndDate1';
  nixieDate1.charCount = 8;
  nixieDate1.extraGapsWidths[3] = 20;
  nixieDate1.extraGapsWidths[5] = 20;

  nixieDate1.init();

  var d = new Date();
  nixieDate1.setText(d.getFullYear().toString() + (d.getMonth() + 1).toString().replace(/^(\d)$/, '0$1') + d.getDate().toString().replace(/^(\d)$/, '0$1'));

  nixieDate1.__skinSwitch = function() {
    var nd = nixieDate1;

    nd.urlCharsetImage = 'zm1080_l2_09bdm_45x75_8b.png';
    nd.charWidth = 45;
    nd.charHeight = 75;
    nixieDate1.extraGapsWidths[3] = 20;
    nixieDate1.extraGapsWidths[5] = 20;
    nd.charGapWidth = 10;

    nd.init();

    return false;
  }

  nixieDate1.__skinSwitch();
</script>
</body>
</html>