I have developed a stopwatch using JavaScript and customized it with a table using HTML and CSS.
Upon testing in Chrome, the UI looked great. However, when I tested it in Mozilla Firefox, I noticed that the input text box appeared smaller than expected.
<script type="text/javascript">
var c = 0;
var t;
var timer_is_on = 0;
function timedCount()
{
document.getElementById('txt').value = c;
c = c + 1;
t = setTimeout("timedCount()", 1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on = 1;
timedCount();
}
}
function resetCount() {
document.getElementById('txt').value = 0;
c = 0;
}
function stopCount()
{
clearTimeout(t);
timer_is_on = 0;
}
</script>
</head>
<body>
<form>
<center><table bgcolor="#000000">
<tr><td><center><h3 class="css">STOP WATCH</h3></center></td></tr>
<tr><td>
<input type="text" id="txt" size="50">
</td></tr><tr><td>
<input type="button" value="START COUNT" onClick="doTimer()" id="start" >
<input type="button" value="STOP COUNT" onClick="stopCount()" id="stop">
<input type="button" value="RESET COUNT" onClick="resetCount()" id="reset"> </td></tr></table></center>
</form>
</body>
</html>
<style>
#start
{
border-bottom-color: #006600;
background-color: #00FF33;
}
#stop
{
border-bottom-color: #006600;
background-color: #FF0000;
}
#reset
{
border-bottom-color: #006600;
background-color: #FFFF00;
}
.css
{
color: #FFFFFF;
}
</style>