mirror of
https://github.com/flynx/Course-JavaScript.git
synced 2025-10-29 19:10:09 +00:00
223 lines
4.6 KiB
HTML
Executable File
223 lines
4.6 KiB
HTML
Executable File
<html>
|
|
<head>
|
|
<title>Teacher's Timer</title>
|
|
|
|
<style>
|
|
|
|
.timer {
|
|
position: relative;
|
|
min-height: 30px;
|
|
min-width: 100px;
|
|
border: solid 1px silver;
|
|
font-size: 32px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.timer .sum {
|
|
display: inline-block;
|
|
min-width: 100px;
|
|
background: gray;
|
|
margin: 5px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
text-align: right;
|
|
color: white;
|
|
|
|
border-left: solid 10px black;
|
|
border-right: solid 10px black;
|
|
|
|
opacity: 0.8;
|
|
}
|
|
.timer .sum > span {
|
|
margin-left: 10px;
|
|
color: silver;
|
|
}
|
|
.timer .sum > span:last-child {
|
|
margin-right: 10px;
|
|
}
|
|
.timer .sum > span > span {
|
|
color: white;
|
|
text-shadow: black 0.1em 0.1em 0.2em;
|
|
}
|
|
|
|
.timer .run {
|
|
display: inline-block;
|
|
background: silver;
|
|
margin: 5px;
|
|
color: white;
|
|
}
|
|
|
|
.timer .start,
|
|
.timer .end,
|
|
.timer .duration {
|
|
margin: 10px;
|
|
}
|
|
.timer .duration {
|
|
font-weight: bold;
|
|
text-shadow: black 0.1em 0.1em 0.2em;
|
|
}
|
|
|
|
.timer .run:not(:nth-child(2)) .start,
|
|
.timer .run:not(:last-child) .end {
|
|
display: none;
|
|
}
|
|
|
|
.timer .run:nth-child(2) {
|
|
border-left: solid 10px gray;
|
|
}
|
|
.timer .run:last-child {
|
|
border-right: solid 10px gray;
|
|
}
|
|
|
|
#new_timer {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 10px;
|
|
border: solid 1px gray;
|
|
border-radius: 50%;
|
|
color: gray;
|
|
font-size: 39px;
|
|
text-align: center;
|
|
cursor: hand;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
|
|
//var DEBUG = true
|
|
|
|
var TIMER_TEMPLATE = '<div class="run">'+
|
|
'<span class="start" title="Start time">00:00:00</span>'+
|
|
'<span class="duration" title="Duration">0</span>'+
|
|
'<span class="end" title="Current/End time">00:00:00</span>'+
|
|
'</div>'
|
|
|
|
function getFormattedTime(t){
|
|
if(t != null){
|
|
t = new Date(t)
|
|
} else {
|
|
t = new Date()
|
|
}
|
|
|
|
var h = t.getHours()
|
|
var m = t.getMinutes()
|
|
var s = t.getSeconds()
|
|
|
|
return (h < 10 ? '0' + h : h) +':'+
|
|
(m < 10 ? '0' + m : m) +':'+
|
|
(s < 10 ? '0' + s : s)
|
|
}
|
|
|
|
function getDurationInMinutes(a, b){
|
|
var s = b - a
|
|
// return the duration in seconds...
|
|
if(window.DEBUG){
|
|
// for debug use seconds for faster updates...
|
|
return Math.floor(s/1000)
|
|
}
|
|
return Math.floor(s/1000/60)
|
|
}
|
|
|
|
function formatSum(m){
|
|
return '<span title="Astronomical hours">h:<span>'+ (m/60).toFixed(2) +'</span></span>'+
|
|
'<span title="Academic hours">a:<span>'+ (m/45).toFixed(2) +'</span></span>'+
|
|
'<span title="Minutes">m:<span>'+ m +'</span></span>'
|
|
}
|
|
|
|
function createTimer(parent){
|
|
var timer = document.createElement('div')
|
|
timer.className = 'timer'
|
|
timer.innerHTML = '<div class="sum">0</div>'
|
|
parent.appendChild(timer)
|
|
|
|
timer.setAttribute('onclick', 'toggleTimer(this)')
|
|
}
|
|
|
|
function toggleTimer(elem){
|
|
elem = elem
|
|
var t = elem.getAttribute('timer')*1
|
|
|
|
// stop timer...
|
|
if(t){
|
|
clearInterval(t)
|
|
elem.removeAttribute('timer')
|
|
|
|
var start = elem.getAttribute('start')*1
|
|
var end = Date.now()
|
|
var d = getDurationInMinutes(start, end)
|
|
|
|
var duration = elem.getElementsByClassName('duration')
|
|
duration = duration[duration.length-1]
|
|
duration.innerText = d
|
|
|
|
var run = elem.getElementsByClassName('run')
|
|
run = run[run.length-1]
|
|
run.setAttribute('duration', d)
|
|
|
|
// setup a new timer...
|
|
} else {
|
|
var now = Date.now()
|
|
elem.innerHTML += TIMER_TEMPLATE
|
|
elem.setAttribute('start', now)
|
|
|
|
var run = elem.getElementsByClassName('run')
|
|
run = run[run.length-1]
|
|
|
|
var start = elem.getElementsByClassName('start')
|
|
start = start[start.length-1]
|
|
|
|
var end = elem.getElementsByClassName('end')
|
|
end = end[end.length-1]
|
|
|
|
var duration = elem.getElementsByClassName('duration')
|
|
duration = duration[duration.length-1]
|
|
duration.innerText = 0
|
|
|
|
run.setAttribute('duration', 0)
|
|
|
|
// initial data...
|
|
start.innerText = getFormattedTime(now)
|
|
end.innerText = getFormattedTime(now)
|
|
|
|
elem.setAttribute('timer', setInterval(function(){
|
|
var start = elem.getAttribute('start')*1
|
|
var now = Date.now()
|
|
var d = getDurationInMinutes(start, now)
|
|
|
|
run.setAttribute('duration', d)
|
|
|
|
// update end and duration values...
|
|
end.innerText = getFormattedTime(now)
|
|
duration.innerText = d
|
|
|
|
// update total...
|
|
var sum = 0
|
|
var runs = elem.getElementsByClassName('run')
|
|
for(var i=0; i < runs.length; i++){
|
|
sum += (runs[i].getAttribute('duration')*1)
|
|
}
|
|
elem.getElementsByClassName('sum')[0].innerHTML = formatSum(sum)
|
|
}, 1000))
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function setup(){
|
|
//createTimer(document.getElementById('timers'))
|
|
}
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body onload="setup()">
|
|
|
|
<div id="timers"></div>
|
|
<div id="new_timer" title="Add new timer" onclick="createTimer(document.getElementById('timers'))">+</div>
|
|
|
|
|
|
</body>
|
|
<!-- vim:set ts=4 sw=4 : -->
|
|
</html>
|