Integration
<!DOCTYPE html>
<html>
<head>
<!--
# HTML5, CSS3 and JavaScript stopwatch
## License
"its totally free."
-->
<title>Stopwatch</title>
<style type="text/css"><!--
* {margin: 0; padding: 0;}
body{
background: black;
}
.container {
padding: 100px;
text-align: center;
}
.timer {
padding: 10px;
background: linear-gradient(top, #222, #444);
overflow: hidden;
display: inline-block;
border: 7px solid #efefef;
border-radius: 5px;
position: relative;
box-shadow:
inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75),
0 5px 20px -10px rgba(0, 0, 0, 1);
}
.cell {
/*Should only display 1 digit. Hence height = line height of .numbers
and width = width of .numbers*/
width: 0.60em;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.numbers {
width: 0.6em;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #fff;
position: absolute;
top: 0;
left: 0;
/*Glow to the text*/
text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}
/*Styles for the controls*/
#timer_controls {
margin-top: -5px;
}
#timer_controls label {
cursor: pointer;
padding: 5px 10px;
background: #efefef;
font-family: arial, verdana, tahoma;
font-size: 11px;
border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}
/*Control code*/
#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}
.moveten {
/*The digits move but dont look good. We will use steps now
10 digits = 10 steps. You can now see the digits swapping instead of
moving pixel-by-pixel*/
animation: moveten 1s steps(10, end) infinite;
/*By default animation should be paused*/
animation-play-state: paused;
}
.movesix {
animation: movesix 1s steps(6, end) infinite;
animation-play-state: paused;
}
/*Now we need to sync the animation speed with time speed*/
/*One second per digit. 10 digits. Hence 10s*/
.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;} /*60 times .second*/
.milisecond {animation-duration: 1s;} /*1/10th of .second*/
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}
.minute {animation-duration: 600s;} /*60 times .second*/
.tenminute {animation-duration: 3600s;} /*60 times .minute*/
.hour {animation-duration: 36000s;} /*60 times .minute*/
.tenhour {animation-duration: 360000s;} /*10 times .hour*/
/*The stopwatch looks good now. Lets add some styles*/
/*Lets animate the digit now - the main part of this tutorial*/
/*We are using prefixfree, so no need of vendor prefixes*/
/*The logic of the animation is to alter the 'top' value of the absolutely
positioned .numbers*/
/*Minutes and Seconds should be limited to only '60' and not '100'
Hence we need to create 2 animations. One with 10 steps and 10 digits and
the other one with 6 steps and 6 digits*/
@keyframes moveten {
0% {top: 0;}
100% {top: -400px;}
/*height = 40. digits = 10. hence -400 to move it completely to the top*/
}
@keyframes movesix {
0% {top: 0;}
100% {top: -240px;}
/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}
//--></style>
<meta http-equiv="content-type" content= "text/html;charset=utf-8"/>
</head>
<body>
<div class="container">
<!-- time to add the controls -->
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />
<div class="timer">
<div class="cell">
<div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
<!-- Lables for the controls -->
<div id="timer_controls">
<label for="start">Start</label>
<label for="stop">Stop</label>
<label for="reset">Reset</label>
</div>
</div>
<script type="text/javascript"><!--
// StyleFix 1.0.2 + PrefixFree 1.0.6 / Lea Verou / MIT license
(function(){function h(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){try{if("stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(b){return}var c=a.href||a.getAttribute("data-href"),f=c.replace(/[^\/]+$/,""),i=a.parentNode,d=new XMLHttpRequest,g;d.onreadystatechange=function(){4===d.readyState&&g()};g=function(){var b=d.responseText;if(b&&a.parentNode&&(!d.status||400>d.status||600<d.status)){b=e.fix(b,
!0,a);f&&(b=b.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(b,a,c){return!/^([a-z]{3,10}:|\/|#)/i.test(c)?'url("'+f+c+'")':b}),b=b.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+f,"gi"),"$1"));var c=document.createElement("style");c.textContent=b;c.media=a.media;c.disabled=a.disabled;c.setAttribute("data-href",a.getAttribute("href"));i.insertBefore(c,a);i.removeChild(a)}};try{d.open("GET",c),d.send(null)}catch(k){"undefined"!=typeof XDomainRequest&&(d=new XDomainRequest,d.onerror=d.onprogress=
function(){},d.onload=g,d.open("GET",c),d.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){var b=a.disabled;a.textContent=e.fix(a.textContent,!0,a);a.disabled=b},styleAttribute:function(a){var b=a.getAttribute("style"),b=e.fix(b,!1,a);a.setAttribute("style",b)},process:function(){h('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);h("style").forEach(StyleFix.styleElement);h("[style]").forEach(StyleFix.styleAttribute)},register:function(a,b){(e.fixers=
e.fixers||[]).splice(void 0===b?e.fixers.length:b,0,a)},fix:function(a,b){for(var c=0;c<e.fixers.length;c++)a=e.fixers[c](a,b)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(b,a){return a.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()})}};(function(){setTimeout(function(){h('link[rel="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()}})();
(function(h){function e(b,c,f,i,d){b=a[b];b.length&&(b=RegExp(c+"("+b.join("|")+")"+f,"gi"),d=d.replace(b,i));return d}if(window.StyleFix&&window.getComputedStyle){var a=window.PrefixFree={prefixCSS:function(b,c){var f=a.prefix,b=e("functions","(\\s|:|,)","\\s*\\(","$1"+f+"$2(",b),b=e("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+f+"$2$3",b),b=e("properties","(^|\\{|\\s|;)","\\s*:","$1"+f+"$2:",b);if(a.properties.length)var i=RegExp("\\b("+a.properties.join("|")+")(?!:)","gi"),b=e("valueProperties","\\b",
":(.+?);",function(a){return a.replace(i,f+"$1")},b);c&&(b=e("selectors","","\\b",a.prefixSelector,b),b=e("atrules","@","\\b","@"+f+"$1",b));return b=b.replace(RegExp("-"+f,"g"),"-")},property:function(b){return(a.properties.indexOf(b)?a.prefix:"")+b},value:function(b){b=e("functions","(^|\\s|,)","\\s*\\(","$1"+a.prefix+"$2(",b);return b=e("keywords","(^|\\s)","(\\s|$)","$1"+a.prefix+"$2$3",b)},prefixSelector:function(b){return b.replace(/^:{1,2}/,function(b){return b+a.prefix})},prefixProperty:function(b,
c){var f=a.prefix+b;return c?StyleFix.camelCase(f):f}};(function(){var b={},c=[],f=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,d=function(a){if("-"===a.charAt(0)){c.push(a);var a=a.split("-"),d=a[1];for(b[d]=++b[d]||1;3<a.length;)a.pop(),d=a.join("-"),StyleFix.camelCase(d)in i&&-1===c.indexOf(d)&&c.push(d)}};if(0<f.length)for(var g=0;g<f.length;g++)d(f[g]);else for(var e in f)d(StyleFix.deCamelCase(e));var g=0,j,h;for(h in b)f=b[h],g<f&&(j=h,g=f);a.prefix=
"-"+j+"-";a.Prefix=StyleFix.camelCase(a.prefix);a.properties=[];for(g=0;g<c.length;g++)e=c[g],0===e.indexOf(a.prefix)&&(j=e.slice(a.prefix.length),StyleFix.camelCase(j)in i||a.properties.push(j));"Ms"==a.Prefix&&!("transform"in i)&&!("MsTransform"in i)&&"msTransform"in i&&a.properties.push("transform","transform-origin");a.properties.sort()})();(function(){function b(a,b){e[b]="";e[b]=a;return!!e[b]}var c={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},
element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};c["repeating-linear-gradient"]=c["repeating-radial-gradient"]=c["radial-gradient"]=c["linear-gradient"];var f={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display"};a.functions=[];a.keywords=[];var e=document.createElement("div").style,d;for(d in c){var g=c[d],h=g.property,g=d+"("+g.params+")";!b(g,h)&&b(a.prefix+
g,h)&&a.functions.push(d)}for(var j in f)h=f[j],!b(j,h)&&b(a.prefix+j,h)&&a.keywords.push(j)})();(function(){function b(a){e.textContent=a+"{}";return!!e.sheet.cssRules.length}var c={":read-only":null,":read-write":null,":any-link":null,"::selection":null},f={keyframes:"name",viewport:null,document:'regexp(".")'};a.selectors=[];a.atrules=[];var e=h.appendChild(document.createElement("style")),d;for(d in c){var g=d+(c[d]?"("+c[d]+")":"");!b(g)&&b(a.prefixSelector(g))&&a.selectors.push(d)}for(var k in f)g=
k+" "+(f[k]||""),!b("@"+g)&&b("@"+a.prefix+g)&&a.atrules.push(k);h.removeChild(e)})();a.valueProperties=["transition","transition-property"];h.className+=" "+a.prefix;StyleFix.register(a.prefixCSS)}})(document.documentElement);
//--></script>
</body>
</html>