Time-Line

Status
Niet open voor verdere reacties.
JeroenE

JeroenE

Terugkerende gebruiker
Lid geworden
20 mrt 2005
Berichten
1.950
Ik heb de volgende code gemaakt voor een tijdlijn van 1 minuut lang.
PHP: 
<html>
<head>
<title>Time line</title>
<script language="javascript">
<!--
ns = (document.layers)?true:false;
ie = (document.all)?true:false;
function init() {
if (ns) blok = document.timeLine;
if (ie) blok = timeLine.style;
blok.sizew = parseInt(blok.width);
slide();
timeInt = setInterval("document.time.seconds.value++;",1000);
};
function slide(){
if (blok.sizew < 600) {
blok.sizew += 0.15575; // Deze waarde zou eigenlijk 600/6000 moeten zijn.
blok.width = blok.sizew;
setTimeout("slide();",10);
} else {
alert(document.time.seconds.value);
blok.sizew = 1;
blok.width = blok.sizew;
slide();
};
if (document.time.seconds.value == 59) {
document.time.seconds.value = 0;
document.time.minutes.value++;
};
document.time.blokw.value = blok.width;
status = blok.width;
};
-->
</script>
</head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" onLoad="init();">
<div id="timeLine" style="background-color:#0099ff;size:absolute;height:10px;width:0px"></div>
<center><form name="time"><input name="blokw" value="0" style="text-align:right" size="3"><br><br>
<input name="minutes" value="0" style="text-align:right" size="1"> minuten
<input name="seconds" value="0" style="text-align:right" size="1"> seconden
</form></center>
</body>
</html>
Daarin staat een waarde van 0.15575 die eigenlijk 600/6000 zou moeten zijn.
rEden dat ik 0.5575 gebruik (wat ook nog niet helemaal klopt), is dat de lijn anders niet juist op de minuut juist volledig is, waarna die weer herbegint.
Wat zit er mis?

-> Script in werking <-

Greetz : Jer:cool:en.
 
Om het op tijd te laten lopen gebruikt dit .getTime()
HTML: 
<html>
<head>
<title>Time line</title>

<script language="javascript">
<!--

var startMilli, blok, timeInt, endTime = 60, endSize = 600;

function init() {
 startMilli = new Date().getTime();
 blok = document.getElementById('timeLine').style;
 endTime *= 1000;
 timeInt = setInterval("slide()",100);
 };

function slide() {
 var milli = new Date().getTime() - startMilli;
 var sizew = Math.round(milli / endTime * endSize);
 blok.width = sizew + 'px';
 var seconds = Math.round(milli / 1000);
 document.time.seconds.value = seconds % 60;
 document.time.minutes.value = Math.floor(seconds / 60);
 document.time.blokw.value = sizew;
 window.status = sizew;
 if (sizew >= endSize) {
  clearInterval(timeInt);
  // 
  };
 };

-->
</script>

</head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" onLoad="init();">
<div id="timeLine" style="background-color: #09f; size: absolute; height: 10px; width: 0px"></div>
<center><form name="time"><input name="blokw" value="0" style="text-align:right" size="5"><br><br>
<input name="minutes" value="0" style="text-align:right" size="2"> minuten
<input name="seconds" value="0" style="text-align:right" size="2"> seconden
</form></center>
</body>
</html>
Zie bijlage. :)


Vr.Gr. Egel.
 

Bijlagen

Laatst bewerkt:
Dank je wel egel, dit werkt perfect. :thumb:
Nu probeer ik die te laten herbeginnen als de lengte bereikt is. :confused:
Ik zet die hier als het gelukt is. ;)

Greetz : Jer:cool:en.
 
Ik zie net dat endTime *= 1000; een beetje in de weg zit bij het herbeginnen. De tweede keer duurt het dan 16 uur en 40 minuten. :o :D

Dit is mooier:
HTML: 
<html>
<head>
<title>Time line</title>

<script language="javascript">
<!--

var startMilli, endMilli, blok, timeInt, endTime = 60, endSize = 600;

endMilli = endTime * 1000;

function init() {
 startMilli = new Date().getTime();
 blok = document.getElementById('timeLine').style;
 timeInt = setInterval("slide()",100);
 };

function slide() {
 var milli = new Date().getTime() - startMilli;
 var sizew = Math.round(milli / endMilli * endSize);
 blok.width = sizew + 'px';
 var seconds = Math.round(milli / 1000);
 document.time.seconds.value = seconds % 60;
 document.time.minutes.value = Math.floor(seconds / 60);
 document.time.blokw.value = sizew;
 window.status = sizew;
 if (sizew >= endSize) {
  clearInterval(timeInt);
  alert('iets');
  init();
  };
 };

-->
</script>

</head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" onLoad="init();">
<div id="timeLine" style="background-color: #09f; size: absolute; height: 10px; width: 0px"></div>
<center><form name="time"><input name="blokw" value="0" style="text-align:right" size="5"><br><br>
<input name="minutes" value="0" style="text-align:right" size="2"> minuten
<input name="seconds" value="0" style="text-align:right" size="2"> seconden
</form></center>
</body>
</html>
Zie bijlage.


Vr.Gr. Egel.
 

Bijlagen

Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan