<!doctype html>
<html>
<head>
<title>HTML5 Meter Element - RJM Programming - April, 2015</title>
<script type='text/javascript'>
var cnt=0;
var offdays=0;
var numyears=0;
var iyear=1999;
var numdays=365;
var ydays=0;
var ystr=" Year ";
function onesecond() {
cnt=eval((eval(document.getElementById('mysel').value) + cnt));
document.getElementById('mymeters').value=eval(cnt % 60);
document.getElementById('tdseconds').innerHTML=eval(cnt % 60);
document.getElementById('mymeterm').value=eval(eval(cnt / 60) % 60);
document.getElementById('tdminutes').innerHTML=eval(eval(Math.floor(cnt / 60)) % 60);
document.getElementById('mymeterh').value=eval(eval(cnt / 3600) % 24);
document.getElementById('tdhours').innerHTML=eval(eval(Math.floor(cnt / 3600)) % 24);
var days=eval(Math.floor(cnt / 86400));
if (eval(days - offdays) > eval(numdays) || (eval((days - offdays) % numdays) == 0 && days > 0)) {
offdays = eval(offdays + numdays);
numyears = eval(1 + numyears);
if (numyears != 1) ystr=" Years ";
days = eval(days % numdays);
iyear = eval(1 + iyear);
numdays=365;
if (eval(iyear % 4) == 0) { numdays=366; }
ydays=numyears + ystr + days;
} else if (numyears != 0) {
days = eval((days - offdays) % numdays);
ydays=numyears + ystr + days;
} else {
ydays=days;
}
document.getElementById('mymeterd').value=days;
document.getElementById('tddays').innerHTML=ydays;
}

function myownfraction(event) {
var x=0, y=0;
if (event.clientX || event.clientY) {
x = event.clientX;
y = event.clientY;
} else {
x = event.pageX;
y = event.pageY;
}
var rect = event.target.getBoundingClientRect();

if (eval('' + x) >= eval('' + rect.left) && eval('' + x) <= eval('' + eval('' + rect.left) + eval('' + rect.width))) {
document.getElementById('numerator').value = eval('' + eval('' + x) - eval('' + rect.left));
document.getElementById('denominator').value = eval('' + rect.width);
document.getElementById('myfraction').value=eval(document.getElementById('numerator').value / document.getElementById('denominator').value);
}
}

</script>
</head>
<body style='background-color:teal;' onload="var isd=new Date().toJSON().slice(0,21); iyear=eval(isd.substring(0,4)); if (eval(iyear % 4) == 0) { numdays=366; } document.getElementById('myth').innerHTML += ' at ' + isd.replace('T', ':') + ' GMT'; setInterval(onesecond, 1000);">
<div align='center'>
<h1>Our Stopwatch ... <select id='mysel' onchange="if (eval(this.value) < 0) { location.href='./meter.html'; }"><option value='-1' selected>Reset</option><option value='0' selected>0x</option><option value='1' selected>Usual speed ...</option><option value='2'>2x</option><option value='3'>3x</option><option value='4'>4x</option><option value='5'>5x</option><option value='10'>10x</option><option value='100'>100x</option><option value='1000'>1000x</option><option value='10000'>10000x</option><option value='100000'>100000x</option><option value='1000000'>1000000x</option></select></h1><br><br>
<table style='background-color:lightblue;' cellspacing=10 cellpadding=10>
<tr><th id='myth'>Since We Began ...</th></tr>
<tr><td>
<meter id='mymeterd' value="0" min="0" max="366" title='0'></meter> <span id='tddays'></span> Days
</td></tr>
<tr><td>
<meter id='mymeterh' value="0" min="0" max="24" title='0'></meter> <span id='tdhours'></span> Hours
</td></tr>
<tr><td>
<meter id='mymeterm' value="0" min="0" max="60" title='0'></meter> <span id='tdminutes'></span> Minutes
</td></tr>
<tr><td>
<meter id='mymeters' value="0" min="0" max="60" title='0'></meter> <span id='tdseconds'></span> Seconds
</td></tr>
</table>
<br><br><h1>Our Fraction ...</h1><br>
Numerator <input type="number" value="0" id="numerator"></input> / <input type="number" value="1" id="denominator"></input> Denominator<br><br>
<input type="button" value="Show Fraction" id="show" onclick="document.getElementById('myfraction').value=eval(document.getElementById('numerator').value / document.getElementById('denominator').value);"></input> <meter title=" ... or you can click here" onclick="myownfraction(event);" id='myfraction' value="0"></meter>
</div>
</body>
</html>