✔ Anfänger am Werk bitte um Hilfe !

T

Tekker

Grünschnabel
ich habe folgenenden quelltext der mir einen steuerbaren counter in einer tabelle erstellt.
Könnte mir bitte jemand dabei behilflich sein daraus meherere unabhängig voneinander steuerbare zähler ,in der tabelle untereinander oder so , zuerstellen ?

meine bescheidenen fähigkeiten reichen dazu leider nicht aus !

mfg und danke
robert
HTML: 
<html>
<head>
<title>
stop watch
</title>
<script type="text/javascript">
function StopWatch (showTime) {
  this.id = StopWatch.watches.length;
  StopWatch.watches[this.id] = this;
  this.showTime = typeof showTime == 'function' ? showTime : function 
() {};
  this.reset();
}
StopWatch.prototype.reset = function () {
  this.time = 0;
  this.components = {};
  this.computeComponents();
  this.showTime(this.components);
}
StopWatch.prototype.start = function () {
  this.tid = setTimeout('StopWatch.watches[' + this.id + '].run()', 
1000);
}
StopWatch.prototype.stop = function () {
  clearTimeout(this.tid);
}
StopWatch.prototype.run = function () {
  this.tid = setTimeout('StopWatch.watches[' + this.id + '].run()', 
1000);
  this.time++;
  this.computeComponents();
  this.showTime(this.components);
}
StopWatch.prototype.computeComponents = function () {
  var hours = Math.floor(this.time / StopWatch.secondsPerHour);
  var remainingTime = this.time - hours * StopWatch.secondsPerHour;
  var minutes = Math.floor(remainingTime / StopWatch.secondsPerMinute);
  var seconds = remainingTime - minutes * StopWatch.secondsPerMinute;
  var formattedTime = '';
  formattedTime += hours + ':';
  formattedTime += minutes < 10 ? '0' + minutes + ':' : minutes + ':';
  formattedTime += seconds < 10 ? '0' + seconds : seconds;
  this.components.time = this.time;
  this.components.hours = hours;
  this.components.minutes = minutes;
  this.components.seconds = seconds;
  this.components.formattedTime = formattedTime;
}
StopWatch.secondsPerMinute = 60;
StopWatch.secondsPerHour = StopWatch.secondsPerMinute * 60;
StopWatch.watches = new Array();
</script>

<script type="text/javascript">
var stopWatch2;
function showTimeTableWatch (components) {
  if (document.all)
    document.all.timeCell.innerText = components.formattedTime;
  else if (document.getElementById)
    document.getElementById('timeCell').firstChild.nodeValue = 
components.formattedTime;
}
</script>
<style type="text/css">
td.time {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  background-color: lightblue;
  color: orange;
}   
</style>
</head>
<body>
<table border="0">
<tr>
<td id="timeCell" class="time" align="center" 
valign="middle">Â </td>
<td>
<input type="button"
       value="start"
       onclick="stopWatch2.start();"
/>
<input type="button"
       value="stop"
       onclick="stopWatch2.stop();"
/>
<input type="button"
       value="reset"
       onclick="stopWatch2.reset();"
/>
</td>
</tr>
</table>
<script type="text/javascript">
stopWatch2 = new StopWatch(showTimeTableWatch);
</script>
</body>
</html>
 
*offtopic*

Bitte benutze zukünftig die Syntax-Highlighter zum Formatieren des Codes und achte in deinen Beiträgen auf die Groß- und Kleinschreibung, siehe Netiquette Nr.15.
 
So, wie es aussieht, ist dieses Skript nicht dafür konzipiert, mehrfach auf einer Seite verwendet zu werden....Grund:
Code: 
document.all.timeCell
...es wird immer auf dasselbe Element im Dokument zugegriffen, wo die Zeit ausgegeben wird :(
 
Habs jetzt mal geändert:
Code: 
<html>
<head>
<title>
stop watch
</title>
<script type="text/javascript">
<!--
function StopWatch (showTime) 
{
  if(typeof StopWatch.watches=='undefined')StopWatch.watches=[];
  this.id = StopWatch.watches.length;
  writeWatch(this.id);
  StopWatch.watches[this.id] = this;
  this.showTime = typeof showTime == 'function' ? showTime : function() {};
  this.reset();
}

StopWatch.prototype.reset = function () 
{
  this.time = 0;
  this.components = {};
  this.computeComponents();
  this.showTime(this.components,this.id);
}

StopWatch.prototype.start = function () 
{
  this.tid = setTimeout('StopWatch.watches[' + this.id + '].run()',1000);
}

StopWatch.prototype.stop = function () 
{
  clearTimeout(this.tid);
}

StopWatch.prototype.run = function () 
{
  this.tid = setTimeout('StopWatch.watches[' + this.id + '].run()', 1000);
  this.time++;
  this.computeComponents();
  this.showTime(this.components);
}

StopWatch.prototype.computeComponents = function () 
{
  var hours = Math.floor(this.time / StopWatch.secondsPerHour);
  var remainingTime = this.time - hours * StopWatch.secondsPerHour;
  var minutes = Math.floor(remainingTime / StopWatch.secondsPerMinute);
  var seconds = remainingTime - minutes * StopWatch.secondsPerMinute;
  var formattedTime = '';
  formattedTime += hours + ':';
  formattedTime += minutes < 10 ? '0' + minutes + ':' : minutes + ':';
  formattedTime += seconds < 10 ? '0' + seconds : seconds;
  this.components.time = this.time;
  this.components.hours = hours;
  this.components.minutes = minutes;
  this.components.seconds = seconds;
  this.components.formattedTime = formattedTime;
  this.components.id=this.id;
}

function writeWatch(id_)
{
  document.write(
                  '<div class="timer" id="watch_'+id_+'"><span>&nbsp;</span>'+
                  ' <input name="_start" type="button" value="start"  onclick="StopWatch.watches['+id_+'].start();" />'+
                  ' <input name="_stop"  type="button" value="stop"   onclick="StopWatch.watches['+id_+'].stop();"  />'+
                  ' <input name="_reset" type="button" value="reset"  onclick="StopWatch.watches['+id_+'].reset();" />'+
                  '</div>'
                );
                
}

function showTimeTableWatch (components,id_) 
{
  document.getElementById('watch_'+components.id).firstChild.innerHTML=
    components.formattedTime;
}

StopWatch.secondsPerMinute = 60;
StopWatch.secondsPerHour  = StopWatch.secondsPerMinute * 60;
//-->
</script>
<style type="text/css">
<!--
.timer span {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  background-color: #323232;
  color: orange;
  padding:1px 4px;
}   
-->
</style>
</head>
<body>
<script type="text/javascript">
<!--
new StopWatch(showTimeTableWatch);
//-->
</script>
<script type="text/javascript">
<!--
new StopWatch(showTimeTableWatch);
//-->
</script>
<script type="text/javascript">
<!--
new StopWatch(showTimeTableWatch);
//-->
</script>
</body>
</html>
....der Aufruf ist immer derselbe...wie er erfolgt, siehst du ja im Code
Packe in einfach dorthin, wo der Timer zu sehen sein soll....die Buttons usw. brauchst du nicht mehr in die Seite schreiben, das macht das Skript jetzt selbst.:)
Viel Spass damit.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück