Fire JS Bin - tictoctoo

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

var c = 0;
var cs = ["#1A171B", "#E00918", "#CAC3BA", "#543288", "#A8AF0A", "#EABE03"];
var dcs = ["#343235", "#B20713", "#A49E96", "#42276C", "#858B07", "#B79401"];
var lcs = ["#D7D6D7", "#F0D1D3", "#EFEFED", "#DDD8E4", "#EBECD7", "#F3EDD4"];
var dc = "#343235";
var lc = "#D7D6D7";
var tt;
var d = "m";
var i = 5000;
var tc = 0;

function tic() {

// reset
  $(".face td").css("color", dc);

// get time
  var n = new Date();
  var h = n.getHours();
  var m = n.getMinutes();
  var s = n.getSeconds();
  var ss = (s % 10);
  var xss = (s - ss) / 10;

// render clock
  if (d == "m") {

if (h > 12) h -= 12;

sl(".it");
    sl(".is");

// minutes
    if (m > 34) {

if ((m >= 35) && (m < 40)) {
        sl(".20m");
        sl(".5m");
      }

if ((m >= 40) && (m < 45)) sl(".20m");
      if ((m >= 45) && (m < 50)) sl(".15m");
      if ((m >= 50) && (m < 55)) sl(".10m");
      if ((m >= 55) && (m < 60)) sl(".5m");

h += 1;
      if (h > 12) h = 1;
      sl(".t");

} else {

if ((m >= 0) && (m < 5)) {
        sl(".o");
      } else {
        sl(".p");
      }

if ((m >= 5) && (m < 10)) sl(".5m");
      if ((m >= 10) && (m < 15)) sl(".10m");
      if ((m >= 15) && (m < 20)) sl(".15m");
      if ((m >= 20) && (m < 25)) sl(".20m");

if ((m >= 25) && (m < 30)) {
        sl(".20m");
        sl(".5m");
      }

if (m >= 30) sl(".30m");

}

// hours
    sl(".h" + h);

// plus odd minutes
    if ((m % 5) >= 1) sl(".1");
    if ((m % 5) >= 2) sl(".2");
    if ((m % 5) >= 3) sl(".3");
    if ((m % 5) >= 4) sl(".4");

} else {

// seconds
    sl(".xs" + xss);
    sl(".s" + ss);
  }

}

function sl(s) {

$(s).css("color", lc);

}

function cc() {

// change color
  tc += 1;
  if (tc > 5) tc = 0;
  $("#clock").css("background", cs[tc]);
  dc = dcs[tc];
  lc = lcs[tc];
  $(".mode").css("color", lc);
  run();

}

function cm() {

// change mode
  d = (d == "m") ? "s" : "m";
  i = (d == "m") ? 5000 : 250;
  clearTimeout(tt);
  run();

}

function run() {

tic();
  tt = setTimeout(function () {
    run()
  }, i);

}

run()

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <title>tictoctoo: an homage</title>
    <meta charset="utf-8">
    <meta name="description" content="An homage to an exceptional piece of design which I will never own. :(">
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <div id="clock">
      <div id="glare" onclick="cc()">
      </div>
      <table class="face">
        <tr>
          <td class="1">●</td>
          <td colspan="11"></td>
          <td class="2">●</td>
        </tr>
        <tr>
          <td></td>
          <td class="it">I</td>
          <td class="it">T</td>
          <td class="">L</td>
          <td class="is">I</td>
          <td class="is">S</td>
          <td>A</td>
          <td>S</td>
          <td class="time">T</td>
          <td class="time">I</td>
          <td class="time">M</td>
          <td class="time">E</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td class="">A</td>
          <td class="">C</td>
          <td class="15m">Q</td>
          <td class="15m">U</td>
          <td class="15m">A</td>
          <td class="15m">R</td>
          <td class="15m">T</td>
          <td class="15m">E</td>
          <td class="15m">R</td>
          <td>D</td>
          <td>C</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td class="20m xs3 xs5">T</td>
          <td class="20m xs2 xs3 xs5 xs0">W</td>
          <td class="20m xs1 xs2 xs3 xs5 xs0">E</td>
          <td class="20m xs2 xs3 xs4 xs5 xs0">N</td>
          <td class="20m xs3 xs5">T</td>
          <td class="20m">Y</td>
          <td class="5m s3 s5 s7">F</td>
          <td class="5m s2 s3 s5 s7 s8 s9 s0">I</td>
          <td class="5m s1 s2 s3 s5 s6 s7 s8 s9 s0">V</td>
          <td class="5m s2 s3 s4 s5 s6 s7 s8 s9 s0">E</td>
          <td class="s3 s5 s7">X</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td class="30m xs2 xs5 xs0">H</td>
          <td class="30m xs1">A</td>
          <td class="30m xs1 xs4">L</td>
          <td class="30m xs3 xs4">F</td>
          <td class="xs2 xs0">B</td>
          <td class="10m">T</td>
          <td class="10m s2 s5 s8 s9 s0">E</td>
          <td class="10m s1 s6">N</td>
          <td class="s1 s4">F</td>
          <td class="t s3 s4">T</td>
          <td class="t s2 s7 s8 s9 s0">O</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td class="p xs5 xs0">P</td>
          <td class="p xs4 xs5">A</td>
          <td class="p xs1 xs3 xs5">S</td>
          <td class="p xs4 xs5 xs0">T</td>
          <td class="xs2 xs0">E</td>
          <td>R</td>
          <td class="s5 s6 s8 s9 s0">U</td>
          <td class="h9 s4 s5">N</td>
          <td class="h9 s1 s3 s5">I</td>
          <td class="h9 s4 s5 s7 s0">N</td>
          <td class="h9 s2 s8 s9 s0">E</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td class="h1 xs4 xs0">O</td>
          <td class="h1">N</td>
          <td class="h1 xs1 xs0">E</td>
          <td class="h6 xs2 xs3 xs4">S</td>
          <td class="h6 xs5 xs0">I</td>
          <td class="h6 six">X</td>
          <td class="h3 s4 s6 s0">T</td>
          <td class="h3 s6 s8 s9">H</td>
          <td class="h3 s1 s6 s7 s8 s9 s0">R</td>
          <td class="h3 s2 s3 s4 s6 s8 s9">E</td>
          <td class="h3 s5 s9 s0">E</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td class="h4 xs4 xs0">F</td>
          <td class="h4 xs4 xs0">O</td>
          <td class="h4 xs1 xs2 xs4">U</td>
          <td class="h4 xs4">R</td>
          <td class="h5 xs3 xs4 xs5 xs0">F</td>
          <td class="h5">I</td>
          <td class="h5 s4 s6 s8 s0">V</td>
          <td class="h5 s4 s7 s0">E</td>
          <td class="h2 s1 s2 s4">T</td>
          <td class="h2 s4">W</td>
          <td class="h2 s3 s4 s5 s6 s8 s9 s0">O</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td class="h8 xs3 xs5 xs0">E</td>
          <td class="h8 xs2">I</td>
          <td class="h8 xs1">G</td>
          <td class="h8 xs4">H</td>
          <td class="h8 xs3 xs5 xs0">T</td>
          <td class="h11">E</td>
          <td class="h11 s3 s5 s6 s8 s0">L</td>
          <td class="h11 s2 s7">E</td>
          <td class="h11 s1">V</td>
          <td class="h11 s4 s9">E</td>
          <td class="h11 s3 s5 s6 s8 s0">N</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td class="h7 xs2">S</td>
          <td class="h7 xs1 xs2 xs3 xs5 xs0">E</td>
          <td class="h7 xs1 xs2 xs3 xs5 xs0">V</td>
          <td class="h7 xs1 xs2 xs3 xs4 xs5 xs0">E</td>
          <td class="h7 xs2">N</td>
          <td class="h0 h12">T</td>
          <td class="h0 h12 s2">W</td>
          <td class="h0 h12 s1 s2 s3 s5 s6 s7 s8 s9 s0">E</td>
          <td class="h0 h12 s1 s2 s3 s5 s6 s8 s9 s0">L</td>
          <td class="h0 h12 s1 s2 s3 s4 s5 s6 s8 s0">V</td>
          <td class="h0 h12 s2">E</td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td class="h10">T</td>
          <td class="h10">E</td>
          <td class="h10">N</td>
          <td>S</td>
          <td>E</td>
          <td class="o">O’</td>
          <td class="o">C</td>
          <td class="o">L</td>
          <td class="o">O</td>
          <td class="o">C</td>
          <td class="o">K</td>
          <td></td>
        </tr>
        <tr>
          <td class="4">●</td>
          <td colspan="11"><div class="mode" onclick="cm()">mode</div></td>
          <td class="3">●</td>
        </tr>
      </table>
    </div>
    <div id="byline">
      An Homage by Steve Hoerner of
      <a href="http://www.binarytransit.com">binarytransit.com</a>
    </div>
  </body>

</html>

* { margin:0px; padding:0px; font-family:arial, helvetica, sans-serif; }
body { background:#c0c0c0; padding:50px 50px 50px 50px; }
.face { font-size:15px; font-weight:bold; color:#343235; border-spacing:0px; margin:21px 0px 0px 21px; }
.face td { width:22px; height:24px; text-align:center; border:#ffffff 0px solid; }
.mode { font-size:9px; font-weight:normal; padding:4px 0px 0px 0px; display:inline; position:relative; z-index:10; cursor:pointer; color:#D7D6D7; }
#clock { width:331px; height:331px; background:#000000; border:10px solid #f4f4f4; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; -moz-box-shadow:0 0 5px #424242; -webkit-box-shadow:0 0 5px #424242; }
#glare { position:absolute; border-bottom:155px solid #fff; border-right:155px solid #fff; border-left:155px solid transparent; border-top:155px solid transparent; -webkit-border-bottom-right-radius:45px; -moz-border-radius-bottomright:45px; border-bottom-right-radius:45px; width:0px; height:0px; opacity:0.12; margin:22px 0px 0px 22px; }
#byline { padding:20px 0px 0px 0px; width:350px; text-align:center; font-size:10px; font-weight: bold; }

Pop out