Current Time Ticker

by mmalex

HTML

<div class="time-wrapper">
  <div class="time-row">
    <div class="time-col auto-hide">
      <div class="time-btn time-arrow hide noselect">⯅</div>
      <input id="hours" class="time">
      <span class="delim">:</span>
      <div class="time-btn time-arrow hide noselect">⯆</div>
    </div>
    <div class="time-col auto-hide">
      <div class="time-btn time-arrow hide noselect">⯅</div>
      <input id="minutes" class="time">
      <span class="delim">:</span>
      <div class="time-btn time-arrow hide noselect">⯆</div>
    </div>
    <div class="time-col auto-hide">
      <div class="time-btn time-arrow hide noselect">⯅</div>
      <input id="seconds" class="time">
      <div class="time-btn time-arrow hide noselect">⯆</div>
    </div>
  </div>
  <div class="time-row">
    <div class="time-col left">
      <div class="time-btn noselect">Reset</div>
    </div>
    <div class="time-col right">
      <div class="time-btn noselect">Pause</div>
    </div>
  </div>
</div>

CSS

body {
  font-family: Arial;
  font-size: 14px;
  color: #606060;
}
.time-wrapper {
  background-color: transparent;
  float: left;
  text-align: center;
  padding: 2px;
  margin: 0;
  width: 132px;
}
.time-row {
  width: 100%;
  float: left;
  text-align: center;
  padding: 0;
  margin: 0;
}
.time-col {
  display: inline-block;
  padding: 0;
  margin: 0;
}
.time-btn {
}
.time-btn:hover {
  color: black;
}
.time-col > .time-btn {
  text-align: center;
  cursor: pointer;
  transition: color 0.15s linear;
}
.auto-hide > .hide {
  color: transparent;
}
.auto-hide:hover > .hide {
  color: darkgray;
}
.time {
  border: 0px solid transparent;
  text-align: center;
  width: 32px;
  color: #606060;
  font-family: Arial;
  font-size: 28px;
}
.time-arrow {
  line-height: 12px;
  font-size: 28px;
  width: 32px;
}
.delim {
  color: #606060;
  font-family: Arial;
  font-size: 28px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.noselect {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

JavaScript

String.prototype.lpad = function(padString, length) {
    var str = this;
    while (str.length < length)
        str = padString + str;
    return str;
}

var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();

function setTime() {
  $("#hours").val(hours.toFixed(0).lpad("0",2));
  $("#minutes").val(minutes.toFixed(0).lpad("0",2));
  $("#seconds").val(seconds.toFixed(0).lpad("0",2));
}

function nextTime() {
  seconds ++;
  if (seconds === 60) {
  	seconds = 0;
    minutes ++;
  }
  if (minutes === 60) {
  	minutes = 0;
    hours ++;
  }
  if (hours === 24) {
  	hours = 0;
  }
  setTime();
}

var timer;
function stop() {
    clearInterval(timer);
}
function start() {
	setTime();
  timer = setInterval(nextTime, 1000);
}

$("#hours").focus(stop);
$("#minutes").focus(stop);
$("#seconds").focus(stop);
$("#hours").blur(start);
$("#minutes").blur(start);
$("#seconds").blur(start);

start();