beste,
Ik zou een tijdbalk willen maken. ongeveer zoals die van msn messenger bij een bestandoverdracht.
Het moet het volgende kunnen :
- op een bedaald punt van de totale tijd vertrekken en dan volopen
- als het volgelopen is moet het terug naar het begin en dan aan het aangegeven tempo volopen etc.
Weet er iemand waar ik dat kan vinden ?
Als het niet duidelijk genoeg is zeg het dan maar
Alvast d.b.v.
Pj
(dus als hij vol is moet hij loopen) en het tempo is bv. dat hij in 25 seconden moet vol zijn en een bepaald startpunt is bv. 10 sec.
[EDIT] het is eigenlijk een variatie op eeb countdown ... dus niet zo moeilijk denk ik... maar ik kan toch niet
Wil je dit op een website doen, zonder hem steeds hoeven te vernieuwen? Dus een zichtbaar vollopende balk?
Dan moet je flash of een speciale code (http_request, ofzo) gebruiken.
Of wil je gewoon dat hij stilstaat vanaf het laden van de pagina?
Sorry als ik onduidelijk ben;-)
Brycer:)
Je kan het ook als een .gif maken ;) ook makkelijk kan je zelf de tijd bepalen en alles ook het start punt enz enz all1 moet je wel iets als Image Ready hebben maar ik dnek niet dat je dit bedoeld maar het is een suggestie
@Brycer dat moet toch mogelijk zijn met javascript niet ?
@Keith dat bedoel ik idd niet want er zijn zeer veel verschillende tempo's
Toch bedankt voor jullie reactie
Pj
ok dolfie hier gaan we dan ,
Dus hij haalt eerst via php uit de database hoeveel seconden er nog nodig zijn voor dat er een eenheid is gemaakt.
Pak nu dat de totale tijd 20 sec. is en dat hij al aan de 10 sec zit.
Dan zou het moeten aftellen 10 9 8 7 etc. maar dan niet met cijfers maar met een balkje dat gevuld wordt ... en als het op 0 staat springt hij ineens trug op 0 seconden gedaan en telt hij weer af
Ik ben niet zo'n javascript expert:p
Maar een vollopende balk in javascript...
Ik weet niet of het kan;-)
Ik weet wel hoe je in een balk een percentage kunt weergeven, die vastgesteld is bij het laden van de pagina (zoals bij een poll).
Meer kan ik niet voor je doen;-)
Brycer
Ik bedoel dat als je bijv. 5 sec van de 10 sec hebt gehad, dat dan de helft van de balk vol zit, maar hij blijft tot de helft, totdat je de pagina vernieuwd.
Maar jij wilt dus zoiets als een laadbalk van een website, maar dan niet in flash, maar in javascript?
Brycer
Stap 1: Plak onderstaand script in de <body> van je site op de plek waar de "tijdbalk" moet verschijnen.
<script language="javascript" src="tijdlijn.js"></script>
Stap 2: Download het bestand "tijdlijn.js" door op onderstaande button te klikken. Je kunt in het bestand "tijdlijn.js" wijzigingen aanbrengen in het uiterlijk e.d. van de tijdlijn.
Stap 3: Upload het bestand "tijdlijn.js" naar dezelfde plaats als waar je website met het script staat.
Stap 1: Plak onderstaand script in de <body> van je site op de plek waar de "tijdbalk" moet verschijnen.
Stap 2: Download het bestand "tijdlijn.js" door op onderstaande button te klikken. Je kunt in het bestand "tijdlijn.js" wijzigingen aanbrengen in het uiterlijk e.d. van de tijdlijn.
Stap 3: Upload het bestand "tijdlijn.js" naar dezelfde plaats als waar je website met het script staat.
// Timer Bar - Version 1.0
// Author: Brian Gosselin of http://scriptasylum.com
var loadedcolor='000000' ; // PROGRESS BAR COLOR
var unloadedcolor='lightgrey'; // COLOR OF UNLOADED AREA
var bordercolor='3333CC'; // COLOR OF THE BORDER
var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=300; // WIDTH OF THE BAR IN PIXELS
var waitTime=5; // NUMBER OF SECONDS FOR PROGRESSBAR
// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%.
// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})
// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.
// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.
// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:
// window.location="http://redirect_page.html";
// JUST CHANGE THE ACTUAL URL OF COURSE :)
var action=function()
{
alert("Welkom bij Henk's javascript verzameling!");
//window.location="http://home.wanadoo.nl/java.script/
}
//*****************************************************//
//********** DO NOT EDIT BEYOND THIS POINT **********//
//*****************************************************//
var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
var blocksize=(barwidth-2)/waitTime/10;
var loaded=0;
var PBouter;
var PBdone;
var PBbckgnd;
var Pid=0;
var txt='';
if(ns4){
txt+='<table border=0 cellpadding=0 cellspacing=0><tr><td>';
txt+='<ilayer name="PBouter" visibility="hide" height="'+barheight+'" width="'+barwidth+'" onmouseup="hidebar()">';
txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';
txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';
txt+='<layer name="PBdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';
txt+='</ilayer>';
txt+='</td></tr></table>';
}else{
txt+='<div id="PBouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';
txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px;"></div>';
txt+='<div id="PBdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px;"></div>';
txt+='</div>';}
document.write(txt);
function incrCount(){
window.status="Loading...";
loaded++;
if(loaded<0)loaded=0;
if(loaded>=waitTime*10){
clearInterval(Pid);
loaded=waitTime*10;
setTimeout('hidebar()',100);}
resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);}
function hidebar(){
clearInterval(Pid);
window.status='';
//if(ns4)PBouter.visibility="hide";
//else PBouter.style.visibility="hidden";
action();}
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;}
return null;}
function progressBarInit(){
PBouter=(ns4)?findlayer('PBouter',document):(ie4)?document.all['PBouter']:document.getElementById('PBouter');
PBdone=(ns4)?PBouter.document.layers['PBdone']:(ie4)?document.all['PBdone']:document.getElementById('PBdone');
resizeEl(PBdone,0,0,barheight-2,0);
if(ns4)PBouter.visibility="show";
else PBouter.style.visibility="visible";
Pid=setInterval('incrCount()',95);}
function resizeEl(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r+'px';}
window.onload=progressBarInit;
// Timer Bar - Version 1.0
// Author: Brian Gosselin of http://scriptasylum.com
var loadedcolor='000000';// PROGRESS BAR COLOR
var unloadedcolor='lightgrey';// COLOR OF UNLOADED AREA
var bordercolor='3333CC';// COLOR OF THE BORDER
var barheight=15;// HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=300;// WIDTH OF THE BAR IN PIXELS
var waitTime=5;// NUMBER OF SECONDS FOR PROGRESSBAR
// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%.
// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})
// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.
// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.
// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:
// window.location="http://redirect_page.html";
// JUST CHANGE THE ACTUAL URL OF COURSE :)
var action=function()
{
alert("Welkom bij Henk's javascript verzameling!");
Probleempje ...
Het script van haytjes werkt wel maar gaat niet trug naar voledig
En hetgene van gijs zie ik gewoon een grijze balk ... er beweegt niets
var totaalsec = {hier in seconden hoe lang}; // seconden voor balk aan nul
var grootte = 100; // van hoeveel px hij moet aftellen
var snelheid = 100; // de snelheid waarmee hij update in milliseconden
//////////////////////
<head>
<script>
var totaalsec = <?echo $sec;?>; // seconden voor balk aan nul
var grootte = 100; // van hoeveel px hij moet aftellen
var snelheid = 100; // de snelheid waarmee hij update in milliseconden
//////////////////////
...
<head>
<script>
var totaalsec = <?echo$sec;?>; // seconden voor balk aan nul
var grootte = 100; // van hoeveel px hij moet aftellen
var snelheid = 100; // de snelheid waarmee hij update in milliseconden
-Ik zou graag willen dat hij voloopt en niet leegloopt. (zal ik waarschijnlijk de formule moeten veranderen
- En ik zou graag een kader rond het geheel hebben ... dan zie je hoeveel van het totaal.
Nee eigenlijk het zijn er 3
- En kan je me uitleggen hoe ik de var sec. moet gebruiken ... Danku
var totaalsec = 5; // seconden voor balk aan nul
var grootte = 100; // van hoeveel px hij moet aftellen
var snelheid = 100; // de snelheid waarmee hij update in milliseconden
//////////////////////
var sec = 2.5;
var totaalsec =5;// seconden voor balk aan nul
var grootte =100;// van hoeveel px hij moet aftellen
var snelheid =100;// de snelheid waarmee hij update in milliseconden
//////////////////////
var sec =2.5;
Als ik dit doe bv. start hij niet in het midden ...
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
