$(document).ready(function() { TimerRMP.init('startButton', 'pauseButton', 'clearButton'); }); var TimerRMP = (function(window) { "use strict"; var document = window.document, timerId = -1, interval = 25, ms = 0, seconds = 0, minutes = 0, startTimer = function() { if (timerId === -1) { timerId = window.setInterval("TimerRMP.turnTimerOn()", interval); } }, displayTimer = function() { document.getElementById('milliseconds').innerHTML = ms; document.getElementById('seconds').innerHTML = seconds; document.getElementById('minutes').innerHTML = minutes; }, turnTimerOn = function() { ms += interval; if (ms >= 1000) { ms = 0; seconds += 1; } if (seconds >= 60) { ms = 0; seconds = 0; minutes += 1; } displayTimer(); }, pauseTimer = function() { window.clearInterval(timerId); timerId = -1; }, clearTimer = function() { pauseTimer(); ms = 0; seconds = 0; minutes = 0; displayTimer(); }, init = function(startButton, pauseButton, clearButton) { document.getElementById(startButton).addEventListener("click", startTimer, false); document.getElementById(pauseButton).addEventListener("click", pauseTimer, false); document.getElementById(clearButton).addEventListener("click", clearTimer, false); displayTimer(); }; return { init: init, turnTimerOn: turnTimerOn }; }(window));
<div id="timerContainer"> <div id="timerSurface" > <div id="timerHeaders" > <div class="HeaderText NormalWidth">MIN</div> <div class="HeaderText NormalWidth">SEC</div> <div class="HeaderText WideWidth">MS</div> </div> <div id="timerNumbers"> <div id="minutes" class="bg TimerText NormalWidth"></div> <div id="seconds" class="bg TimerText NormalWidth"></div> <div id="milliseconds" class="bg TimerText WideWidth"></div> </div> </div> <div id="buttonSurface"> <div id="startButton" class="Button ButtonStart"></div> <div id="pauseButton" class="Button ButtonPause"></div> <div id="clearButton" class="Button ButtonClear"></div> </div> </div>
#timerContainer { width: 290px; height:156px; } #timerSurface { width: 290px; height:108px; background-color: #383431; } #timerHeaders { height:20px; } #timerNumbers { text-align: center; font-family: Impact, sans-serif; font-size: 54px; color: #D0D0D0; } .HeaderText { float:left; height: 20px; padding: 5px 6px 5px 6px; text-align: center; font-family: sans-serif; font-size: 14px; font-weight: bold; color: #D0D0D0; margin-left: 5px; } .TimerText { float:left; height: 60px; padding: 5px 5px 5px 5px; border-right: 2px solid #000000; border-bottom: 2px solid #000000; background-color: #242323; margin-left: 5px; vertical-align: middle; /* background-image: url(http://johnpapa.net/files/downloads/images/bg.png); */ } .NormalWidth { width:68px; } .WideWidth { width:100px; } #buttonSurface { width:236px; margin: auto; } .ButtonStart { background-image: url(http://johnpapa.net/files/downloads/images/start.png); } .ButtonPause { background-image: url(http://johnpapa.net/files/downloads/images/pause.png); } .ButtonClear { background-image: url(http://johnpapa.net/files/downloads/images/clear.png); } .Button { float:left; width:68px; height: 68px; padding: 5px 5px 5px 5px; text-align: center; vertical-align:middle; cursor:pointer; background-repeat: no-repeat; background-position: center; } .Button:hover { -ms-transform: scale(1.05); -webkit-transform: scale(1.05); -webkit-transition: -webkit-transform 0.3s ease-in; -moz-transform: scale(1.05); -moz-transition: -moz-transform 0.3s ease-in; transform: scale(1.05); transition: transform 0.3s ease-in; } .bg { background-image: url(http://johnpapa.net/files/downloads/images/bg.png); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0, 0, 0)), color-stop(0.46, rgb(11, 111, 211)), color-stop(0.48, rgb(0, 0, 0)), color-stop(0.50, rgb(11, 111, 211)), color-stop(1, rgb(0, 0, 0)) ); background-image: -moz-linear-gradient( center bottom, rgb(0, 0, 0) 0%, rgb(211, 111, 111) 46%, rgb(0, 0, 0) 48%, rgb(211, 111, 111) 50%, rgb(0, 0, 0) 100% ); }