dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

Add clock and elapsed time to notes view

This commit is contained in:
Charlie DeTar 2013-01-26 11:49:19 -05:00
parent f3b4881cdb
commit ab3f4e5ba3
1 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
plugin/notes/notes.html
View File

@ -95,6 +95,28 @@
.error code { .error code {
font-family: monospace; font-family: monospace;
} }
.time {
text-align: center;
}
.elapsed, .clock {
color: #333;
font-size: 2em;
text-align: center;
display: inline-block;
padding: 0.5em;
background-color: #eee;
border-radius: 10px;
}
.elapsed h2, .clock h2 {
font-size: 0.8em;
line-height: 100%;
margin: 0;
color: #aaa;
}
.elapsed .mute {
color: #ddd;
}
</style> </style>
</head> </head>
@ -108,10 +130,24 @@
<script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script> <script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
<span>UPCOMING:</span> <span>UPCOMING:</span>
</div> </div>
<div class='time'>
<div class='clock'>
<h2>Time</h2>
<span id='clock'>0:00:00 AM</span>
</div>
<div class='elapsed'>
<h2>Elapsed</h2>
<span id='hours'>00</span><span id='minutes'>:00</span><span id='seconds'>:00</span>
</div>
</div>
<div id="notes"></div> <div id="notes"></div>
<script src="../../plugin/markdown/showdown.js"></script> <script src="../../plugin/markdown/showdown.js"></script>
<script> <script>
function zeroPadInteger(num) {
var str = "00" + parseInt(num);
return str.substring(str.length - 2);
}
window.addEventListener( 'load', function() { window.addEventListener( 'load', function() {
if( window.opener && window.opener.location && window.opener.location.href ) { if( window.opener && window.opener.location && window.opener.location.href ) {
@ -157,6 +193,29 @@
} }
var start = new Date(),
clockEl = document.getElementById('clock'),
hoursEl = document.getElementById('hours'),
minutesEl = document.getElementById('minutes'),
secondsEl = document.getElementById('seconds');
setInterval(function() {
var diff, hours, minutes, seconds,
now = new Date();
diff = now.getTime() - start.getTime();
hours = parseInt(diff / (1000 * 60 * 60));
minutes = parseInt((diff / (1000 * 60)) % 60);
seconds = parseInt((diff / 1000) % 60);
clockEl.innerHTML = now.toLocaleTimeString();
hoursEl.innerHTML = zeroPadInteger(hours);
hoursEl.className = hours > 0 ? "" : "mute";
minutesEl.innerHTML = ":" + zeroPadInteger(minutes);
minutesEl.className = minutes > 0 ? "" : "mute";
secondsEl.innerHTML = ":" + zeroPadInteger(seconds);
}, 1000);
}, false ); }, false );
</script> </script>