DIR : /home/kozerus/public_html/ko/stopwatch1.htm
/home/kozerus/public_html/ko
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Stopwatch</title>
<!-- <link href="./style.css" rel="stylesheet"> -->
<style>
#timer {
width: 460px;
font-size: 70px;
background-color: black;
color: limegreen;
padding: 25px;
border-radius: 10px;
}
#labels {
margin-top: -25px;
z-index: 2;
color: limegreen;
font-size: 12px;
}
#hh {margin-left: 45px;}
#mm {margin-left: 80px;}
#ss {margin-left: 70px;}
#ms {margin-left: 45px;}
#controls {
margin-left:150px;
margin-top: 30px;
}
button {
width: 100px;
height: 40px;
float: left;
margin-left: 50px;
font-size: 25px;
font-weight: bold;
border-radius: 10px;
box-shadow: 5px 5px 5px #888888;
}
#go { background-color: limegreen; }
#stop { background-color: red; display: none; }
#clear { background-color: yellow; display: none;}
body, button {
font-family: 'Courier';
}
</style>
</head>
<body bgcolor=linen>
<div id='timer'>00:00:00:00</div>
<div id='labels'>
<span id='hh'>Hours</span>
<span id='mm'>Minutes</span>
<span id='ss'>Seconds</span>
<span id='ms'>Centiseconds</span>
</div>
<div id='controls'>
<button onclick='startTimer()' id='go'>Go</button>
<button onclick='stopTimer()' id='stop'>Stop</button>
<button onclick='clearTimer()' id='clear'>Clear</button>
</div>
<!-- <script src="./script.js"></script> -->
<script>
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
// global object
T = {} ;
T.timerDiv = document.getElementById('timer');
function displayTimer() {
// initilized all local variables:
var hours='00', minutes='00',
miliseconds=0, seconds='00',
time = '',
timeNow = new Date().getTime(); // timestamp (miliseconds)
T.difference = timeNow - T.timerStarted;
// milliseconds
if(T.difference > 10) {
miliseconds = Math.floor((T.difference % 1000) / 10);
if(miliseconds < 10) {
miliseconds = '0'+String(miliseconds);
}
}
// seconds
if(T.difference > 1000) {
seconds = Math.floor(T.difference / 1000);
if (seconds > 60) {
seconds = seconds % 60;
}
if(seconds < 10) {
seconds = '0'+String(seconds);
}
}
// minutes
if(T.difference > 60000) {
minutes = Math.floor(T.difference/60000);
if (minutes > 60) {
minutes = minutes % 60;
}
if(minutes < 10) {
minutes = '0'+String(minutes);
}
}
// hours
if(T.difference > 3600000) {
hours = Math.floor(T.difference/3600000);
// if (hours > 24) {
// hours = hours % 24;
// }
if(hours < 10) {
hours = '0'+String(hours);
}
}
time = hours + ':'
time += minutes + ':'
time += seconds + ':'
time += miliseconds;
T.timerDiv.innerHTML = time;
}
function startTimer() {
// save start time
T.timerStarted = new Date().getTime()
console.log('T.timerStarted: '+T.timerStarted)
if (T.difference > 0) {
T.timerStarted = T.timerStarted - T.difference
}
// update timer periodically
T.timerInterval = setInterval(function() {
displayTimer()
}, 10);
// show / hide the relevant buttons:
document.getElementById('go').style.display="none";
document.getElementById('stop').style.display="inline";
document.getElementById('clear').style.display="none";
}
function stopTimer() {
clearInterval(T.timerInterval); // stop updating the timer
document.getElementById('stop').style.display="none";
document.getElementById('go').style.display="inline";
document.getElementById('clear').style.display="inline";
}
function clearTimer() {
clearInterval(T.timerInterval);
T.timerDiv.innerHTML = "00:00:00:00"; // reset timer to all zeros
T.difference = 0;
document.getElementById('stop').style.display="none";
document.getElementById('go').style.display="inline";
document.getElementById('clear').style.display="none";
}
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer