HTML Sports Timer Solution [Archive]

chasman2001uk

Feb 20th, 2012, 08:17 PM

We are trying to get a timer added to a html overlay.

We currently have an overlay which displays a jpg of team names and logo's along with a current score which is a html file with just the score in. This is overlaid a live stream of a sports event.

What I would like to develop is a clock which is visable to the side of the teams which will display minutes and seconds for the duration of the game. It will need to be able to be reset to 45 minutes for the second half. The start and stop buttons would need to be on a different page. I don't know even how to start this process. Any ideas would be greatly received

clausrei

Feb 23rd, 2012, 12:02 AM

Here you can have my JavaScript clock: Analyze it a bit and then change it to your needs.

<head>
<title>Show Changes</title>

<style type="text/css">
#panel {
width: 200px;
height: 200px;
background: #ddd;
padding: 10px;
margin: 5px;
font-size: 36px;
font-family: Time New Romen;
margin: 0 auto;
text-align: center;
}

</style>

<script type="text/javascript">
var verzoegerung = 1000;

function init()
{
var date1 = new Date();
var theHour = date1.getHours();
var theMinutes = date1.getMinutes();
//date1.setSeconds(1);
var theSeconds = date1.getSeconds();

if (theMinutes < 10) { theMinutes = "0" + theMinutes; }
if (theSeconds < 10) { theSeconds = "0" + theSeconds; }

var panel=document.getElementById("panel");
//alert(theSeconds);
var text = "It is "+theHour+":"+theMinutes+":"+theSeconds;
panel.innerHTML = text;

setTimeout("init();", verzoegerung);
}

window.onload=init;

</script>
</head>
<body>
<div id="panel">
<noscript><div id="ns-text">! JavaScript is Not Enabled.</div></noscript>
</div>
</body>
</html>
:thumbsup: or come back with it I do it for you.