Søg
Avatar billede flodhesten Nybegynder
03. august 2007 - 23:04 Der er 70 kommentarer og
2 løsninger

Grafisk nedtælling

Hej eksperter.

Jeg er ikke så erfaren inde på javascript, så jeg vil spørge om det på nogen måde er muligt at lave et lille script som grafisk tæller ned fra 15 sekunder til 0?

Altså noget lignende med en tabel i html og hvor width i procent bliver ændret i 15 forskellige trin:

__________________________________________
||||||||||||||||||||||||||||||||||||||||||| 
(Der er 15 sekunder tilbage - skal ikke vises.)

__________________________________________
|||||||||||||||||||||||||||||||||||||||___| 
(Der er 14 sekunder tilbage - skal ikke vises.)

__________________________________________
|||||||||||||||||_________________________|
(Der er 6 sekunder tilbage - skal ikke vises.)

Kan det mon laves?

På forhånd tak
Avatar billede flodhesten Nybegynder
03. august 2007 - 23:05 #1
Hmm, nu er mit eksempel ovenfor ikke helt så godt, ser anderledes ud i det tekstfelt her man skriver i, håber det kan forståes alligevel, ellers kan det jo kopieres herned for at se hvordan jeg mente det skulle se ud :)
Avatar billede thesurfer Nybegynder
03. august 2007 - 23:48 #2
Jeg tror at illustrationen ser lidt mere rigtig ud, hvis man "indlæser" denne kode i adresselinien i browseren:

java script: document.getElementsByTagName("td")[31].style.fontFamily = "courier new"; void(0)

:-)
Avatar billede olebole Juniormester
04. august 2007 - 00:18 #3
<ole>

- og strandløven spiller med musklerne ... r-e-s-p-e-e-e-c-t!  ;D

/mvh
</bole>
Avatar billede thesurfer Nybegynder
04. august 2007 - 00:31 #4
Og en udgave der kan bruges, selvom man ikke er logget ind:

java script:ndx=23;d=document;if (d.body.innerHTML.indexOf("Point ude")>-1) {ndx=31};document.getElementsByTagName("td")[ndx].style.fontFamily="courier new";void(0)

At hardcode værdier er ikke særligt smart.. men vil virke så længe man ikke laver om på strukturen i Eksperten's HTML kode.. :-)
Avatar billede thesurfer Nybegynder
04. august 2007 - 00:46 #5
Jeg burde dog have genbrugt referencen "d":

java script:ndx=23;d=document;if (d.body.innerHTML.indexOf("Point ude")>-1) {ndx=31};d.getElementsByTagName("td")[ndx].style.fontFamily="courier new";void(0)



En mulig løsning på "grafisk nedtælling", som sikkert kan forbedres:

<!-- HUSK DOCTYPE -->
<html>
<head>
<title>grafisk nedt&aelig;lling</title>
<style type="text/css">
#outerbar
{
height:15px;
border:1px solid #0000aa;
}

#innerbar
{
margin:1px;
background-color:#0000aa;
height:100%;
}
</style>
</head>

<script type="text/JavaScript" language="JavaScript">
innerbar = null;
outerbar = null;
step = 1;

function init()
{
    // --- ret her
    antal_sekunder = 10; // antal sekunder
    margin_bredde = 2; // dobbelt af "margin" i "#innerbar"
    innerbar_width = 200; // bredden på det markerede område
    // ----

    outerbar_width = innerbar_width + margin_bredde; // kanten på progressbaren
    step = innerbar_width / antal_sekunder;
    innerbar = document.getElementById("innerbar");
    outerbar = document.getElementById("outerbar");
    outerbar.style.width = (innerbar_width + margin_bredde) + "px";
    innerbar_width = innerbar_width + step;
    outerbar.style.display = "";
}

function run()
{
    innerbar_width = innerbar_width - step;
    if (innerbar_width > 0)
    {
        setTimeout("run()", 1000);
    } else {
        innerbar_width = 0;
    }
    innerbar.style.width = innerbar_width + "px";
}
</script>
</head>
<body onload="init()">

<a href="#" onclick="run();return false">start nedt&aelig;llingen</a>
<br><br>
<div id="outerbar" style="display:none">
<div id="innerbar"></div>
</div>

</body>
</html>
Avatar billede olebole Juniormester
04. august 2007 - 00:51 #6
<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        //alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+", "+nEndTime+")", 10);
    }
}
</script>

<div style="padding:40px;background:buttonface">
<p><button onclick="runProgressBar('bar', 300, 15000)">TEST</button></p>

<div style="width:300px;border:1px inset threedhighlight">
    <div id="bar" style="width:100%;height:14px;background:highlight;overflow:hidden"></div>
</div>

</div>
Avatar billede olebole Juniormester
04. august 2007 - 00:55 #7
- det giver en _meget_ smooth animation  ;o)

Naturligvis kan man også tage et screenshot af en XP-progressbar og lægge et enkelt segment ind som baggrundsbillede i 'bar' divet - og repeate det i bredden
Avatar billede thesurfer Nybegynder
04. august 2007 - 00:56 #8
olebole> Super nice :-)
Avatar billede thesurfer Nybegynder
04. august 2007 - 00:59 #9
Jeg ville nok bare have brugt (15) sekunder: ('bar', 300, 15)

function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    nDur = nDur * 1000;
Avatar billede olebole Juniormester
04. august 2007 - 01:00 #10
Ja, det ville du nok ... prøv!  ;D
Avatar billede thesurfer Nybegynder
04. august 2007 - 01:01 #11
Hmmm... Hvis man altid kun har 1 progressbar, er det vel knapt så godt, at man gætter referencen hele tiden?:

    var nNow, nPerc, nW, oElm = document.getElementById(sId);
Avatar billede olebole Juniormester
04. august 2007 - 01:01 #12
*hint* - så stiger nDur med en faktor 1000 ved hvert gennemløb  ;o)
Avatar billede olebole Juniormester
04. august 2007 - 01:03 #13
Man kan sagtens have flere:

<div style="padding:40px;background:buttonface">
<p><button onclick="runProgressBar('bar', 300, 15000);runProgressBar('bar2', 300, 25000)">TEST</button></p>

<div style="width:300px;border:1px inset threedhighlight">
    <div id="bar" style="width:100%;height:14px;background:highlight;overflow:hidden"></div>
</div>

<div style="width:300px;border:1px inset threedhighlight">
    <div id="bar2" style="width:100%;height:14px;background:highlight;overflow:hidden"></div>
</div>

</div>
Avatar billede thesurfer Nybegynder
04. august 2007 - 01:04 #14
Hahaha.. Det havde jeg ikke tænkt over.. :-)

Hvad så med?:

        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+ (nDur / 1000) +", "+nStartTime+", "+nEndTime+")", 10);

Fixer det ikke "faktor 1000" problemet..?
Avatar billede thesurfer Nybegynder
04. august 2007 - 01:05 #15
Ja, jeg lavede en test med 2 progressbars.. sjovt nok fik nr 2 også navnet "bar2".. :-)

Men er det ikke korrekt, at man kan vinde (/ikke tabe) performance, hvis 04/08-2007 01:01:24 ?
Avatar billede olebole Juniormester
04. august 2007 - 01:05 #16
Det er ikke så effektivt at finde referencen hver gang, men det sikrer netop, at du kan have flere. Ellers kunne man opbygge den OOP'et - og naturligvis med mulighed for 'op' og 'ned'.
Avatar billede olebole Juniormester
04. august 2007 - 01:07 #17
- du har helt ret i, at man sagtens kunne lægge referencen globalt, hvis man kun har én bar  ;o)
Avatar billede thesurfer Nybegynder
04. august 2007 - 01:08 #18
..eller indsætte 15x "&nbsp;" og derefter bruge innerHTML til at fjerne et enkelt "&nbsp;" ad gangen.. :-)

Jeg kan allerede forstille mig, hvordan du krøller tæerne.. :-)
Avatar billede olebole Juniormester
04. august 2007 - 01:08 #19
Jeg ville nok hellere lave en startProgressBar-funktion, hvor jeg gangede med 1000 og derefter kaldte runProgressBar. Så er vi fri for at regne frem og tilbage  ;o)
Avatar billede olebole Juniormester
04. august 2007 - 01:12 #20
hva' ...?!??!!! *knitre-knase* eg kan ikke hø *knitre* du siger!

- pokkers til dårlig forbindelse, jeg har *host-host* ... INNERfu***ngHTML ...!!! hrmpfff
Avatar billede olebole Juniormester
04. august 2007 - 01:21 #21
Man kan faktisk også argumentere for, at det er 'performance-gris' at kalde timeren med 10 msek intervaller. Årsagen er, at forskellige browsere og styresystemer har forskellige grænser for deres JS-timer.

Derfor får man alle steder en yderst jævn animation, hvis man timer meget hurtigt og ved hvert gennemløb beregner, hvor 'vi skulle have været nu' på baggrund af et timestamp og nDur (duration) - og derefter flytter derhen.
Avatar billede olebole Juniormester
04. august 2007 - 01:24 #22
- og selvom der går klumper i JS-timeren på grund af andre processer, så tager animationen altid 15 sek  ;o)
Avatar billede thesurfer Nybegynder
04. august 2007 - 01:26 #23
Fantastisk! :-)

Jeg tror godt at du kan smide et svar, for du har da helt sikkert besvaret spørgsmål.. :-)
Avatar billede olebole Juniormester
04. august 2007 - 01:30 #24
Lad os dele. I en app, hvor der sker en masse andet, ville jeg nok vælge din. Min version sælger sikkert en masse testosteron på bekostning af lækkerligheden - selvom jeg faktisk ikke har tjekket dem med TaskManager'en åben  ;o)

Læg et svar og lad os dele  =)
Avatar billede thesurfer Nybegynder
04. august 2007 - 01:33 #25
Den er jeg med på.. :-)
Avatar billede flodhesten Nybegynder
04. august 2007 - 07:24 #26
Nøj, de er flotte :D

Lige et spørgsmål inden I får jeres point; kan man lave det med en autostart?
Avatar billede olebole Juniormester
04. august 2007 - 14:30 #27
Sagtens:

window.onload = function() {
    //runProgressBar();
    init();
    run();
}

De to nederst linjer, hvis du vil bruge thesurfers version. Den øverste - som er udkommenteret ligenu - hvis du ønsker at bruge min  =)
Avatar billede thesurfer Nybegynder
04. august 2007 - 16:03 #28
Husk at "window.onload = function() {" vil overskrive en evt anden "window.onload"-sætning.. :-)
Avatar billede olebole Juniormester
04. august 2007 - 16:39 #29
Yups ... alt, der skal afvikles på onload-event'en skal kaldes herfra - eller man kan bruge attachEvent eller addEventListener  ;o)
Avatar billede flodhesten Nybegynder
04. august 2007 - 18:40 #30
Okay, kan ikke lige finde ud af hvor koden skal indsættes?

Det her virker nemlig ikke. Som sagt - jeg aner intet om javascript ;)

<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        //alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+",

"+nEndTime+")", 10);
    }


window.onload = function() {
  runProgressBar();
}
}
</script>
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:09 #31
<html>
<head>
<title>sidens titel</title>

<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        //alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+",

"+nEndTime+")", 10);
    }


window.onload = function() {
  runProgressBar();
}
}
</script>

</head>
<body>

<div style="padding:40px;background:buttonface">
<p><button onclick="runProgressBar('bar', 300, 15000)">TEST</button></p>

<div style="width:300px;border:1px inset threedhighlight">
    <div id="bar" style="width:100%;height:14px;background:highlight;overflow:hidden"></div>
</div>

</div>

</body>
</html>


olebole> Vil det ikke give problemer, at kalde "runProgressBar()" i window.onload, uden at angive parametere..?

Du har nemlig heller ikke parametere med, i dit sidste indlæg (04/08-2007 14:30:07):

---
Sagtens:

window.onload = function() {
    //runProgressBar();
    init();
    run();
}

De to nederst linjer, hvis du vil bruge thesurfers version. Den øverste - som er udkommenteret ligenu - hvis du ønsker at bruge min  =)
---
Avatar billede olebole Juniormester
04. august 2007 - 19:38 #32
Jo, da ... dooohhhhh ... råd under hjelmen!  :o|
Der skal st f.eks:
    runProgressBar('bar', 300, 15000)
Avatar billede olebole Juniormester
04. august 2007 - 19:39 #33
- og 'st' er den senere så udbredte shorthand-syntaks for 'stå'  :D
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:41 #34
olebole> Hahahaha! Den syntaks burde jeg bruge.. så sparer jeg å-tasten, som jeg ikke bruger nok i forvejen.. :-)
Avatar billede flodhesten Nybegynder
04. august 2007 - 19:41 #35
Altså:

<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        //alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+",

"+nEndTime+")", 10);
    }


window.onload = function() {
  runProgressBar('bar', 300, 15000)
}
}
</script>


?

For det ser ikke ud til at virke.
Avatar billede olebole Juniormester
04. august 2007 - 19:42 #36
Det virker, hvis du har dette i din HTML:

<div style="width:300px;border:1px inset threedhighlight">
    <div id="bar" style="width:100%;height:14px;background:highlight;overflow:hidden"></div>
</div>
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:43 #37
Hvis det ikke virker, får du sikkert en fejlmelding..
Hvis du får en fejlmelding, skal du lige smide HELE fejlmeldingen her ind..

Og lige et spørgsmål:

Har du husket at tilføje de korrekte divs, med de korrekte id'er?:

<div style="padding:40px;background:buttonface">
<p><button onclick="runProgressBar('bar', 300, 15000)">TEST</button></p>

<div style="width:300px;border:1px inset threedhighlight">
    <div id="bar" style="width:100%;height:14px;background:highlight;overflow:hidden"></div>
</div>

</div>
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:43 #38
Der er vist 1x "}" for meget i slutningen af kode:

window.onload = function() {
  runProgressBar('bar', 300, 15000)
}
}
</script>
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:45 #39
olebole skal vist på et indrykningskursus eller ligende.. :-)

Sådan:

<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime)
{
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        //alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+", "+nEndTime+")", 10);
    }
}

window.onload = function()
{
  runProgressBar('bar', 300, 15000)
}
</script>
Avatar billede olebole Juniormester
04. august 2007 - 19:46 #40
Nej, flodhesten har sat onload-handleren ind i slutningen af funktionen  ;o)

<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        //alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+",

"+nEndTime+")", 10);
    }
}

window.onload = function() {
  runProgressBar('bar', 300, 15000)
}
</script>
Avatar billede flodhesten Nybegynder
04. august 2007 - 19:46 #41
Altså hele koden ser sådan ud:
<html>
<head>
<title>sidens titel</title>

<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        //alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+",

"+nEndTime+")", 10);
    }

window.onload = function() {
  runProgressBar('bar', 300, 15000)
}
}
</script>

</head>
<body>
<div style="width:300px;border:1px solid #000000#">
    <div id="bar" style="width:100%;height:14px;background:orange;overflow:hidden"></div>
</div>

</body>
</html>


Jeg får ingen fejlmelding ved ovenstående. Der står dog udført men med en fejl påsiden, hvis jeg ferne en }.
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:46 #42
Hmm.. Jeg tror at jeg har anklaget den forkerte bruger.. :-)

Den ekstra "}" kommer ind her i indlægget 04/08-2007 19:41:39, skrevet af flodhesten.. :-)
Avatar billede olebole Juniormester
04. august 2007 - 19:47 #43
04/08-2007 19:46:17 er korrekt  o)
Avatar billede flodhesten Nybegynder
04. august 2007 - 19:47 #44
Argh, sådan her så?

<html>
<head>
<title>sidens titel</title>

<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        //alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+",

"+nEndTime+")", 10);
    }
}

window.onload = function() {
  runProgressBar('bar', 300, 15000)
}
</script>

</head>
<body>
<div style="width:300px;border:1px solid #000000#">
    <div id="bar" style="width:100%;height:14px;background:orange;overflow:hidden"></div>
</div>

</body>
</html>

For den bevæger sig stadig ikke :P
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:48 #45
Fejl i setTimeout-linien..

Rettelse:

<html>
<head>
<title>sidens titel</title>

<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        //alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+", "+nEndTime+")", 10);
    }
}

window.onload = function() {
  runProgressBar('bar', 300, 15000)
}
</script>

</head>
<body>
<div style="width:300px;border:1px solid #000000#">
    <div id="bar" style="width:100%;height:14px;background:orange;overflow:hidden"></div>
</div>

</body>
</html>
Avatar billede olebole Juniormester
04. august 2007 - 19:49 #46
Slet dit linjeskift lige før:
    "+nEndTime+")", 10);
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:49 #47
flodhesten> De her 2 linier, er faktisk kun 1 linie:

        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+",

"+nEndTime+")", 10);

Dvs:

        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+", "+nEndTime+")", 10);
Avatar billede olebole Juniormester
04. august 2007 - 19:50 #48
Hold.da.op, hvor der bliver kæmpet på 'Send' knappen i denne tråd ... fedt  :D
Avatar billede flodhesten Nybegynder
04. august 2007 - 19:52 #49
Ah, smart :D

Jeg tænkte på, er det muligt at lave sådan at siden opdateres, når nedtælleren når 0?

Og måske at få en sekundnedtæller under den grafiske nedtæller? altså 15, 14, 13, 12 osv...? Hvis I har lyst til at lave det, vil jeg sætte op til 200 point...

Hvis I ikke har mod på det, deler I som planlagt de 60 point :)
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:54 #50
flodhesten> Angående "sekundtælleren":
Så vidt jeg kan se, står følgende i dit originale spørgmål:

"(Der er 15 sekunder tilbage - skal ikke vises.)"

:-)

Men jeg er sikker på, at olebole allerede er igang med det.. sammen med window.location.href='andensiden.htm'-delen.. :-)
Avatar billede olebole Juniormester
04. august 2007 - 19:56 #51
I stedet for linjen:
    //alert("Her slutter festen");

- skriver du, hvad der skal ske, når tælleren er færdig - f.eks:
    window.location.href = "nyside.html";
Avatar billede flodhesten Nybegynder
04. august 2007 - 19:56 #52
Ja, men også derfor jeg gerne vil ligge lidt ekstra point i puljen :)
Avatar billede olebole Juniormester
04. august 2007 - 19:57 #53
- kikker lige på et sekund-display  =)
Avatar billede olebole Juniormester
04. august 2007 - 19:57 #54
- men ingen ekstra points for det
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:58 #55
Jeg vil gerne se hvordan olebole laver sekundtælleren, uden brug af innerText og innerHTML.. :-)

"Mon han bruge en knap?? Kan han nøjes med et span eller et div?? Følg med i næste afsnit af >>Mester-koderen OleBole's store kode-eventyr<<'.. :-)
Avatar billede thesurfer Nybegynder
04. august 2007 - 19:59 #56
..uden input-elementer.. :-)

Var der ikke noget med noget node-halløj..? det må næsten være den eneste udvej..
Avatar billede olebole Juniormester
04. august 2007 - 20:03 #57
<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        document.getElementById("displ").firstChild.nodeValue = 0;
        //alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+", "+nEndTime+")", 10);
        document.getElementById("displ").firstChild.nodeValue = Math.ceil( (nEndTime-nNow)/1000 );
    }
}

window.onload = function() {
  runProgressBar('bar', 300, 15000)
}
</script>

<div id="displ">&nbsp;</div>
<div style="width:300px;border:1px solid #000000#">
    <div id="bar" style="width:100%;height:14px;background:orange;overflow:hidden"></div>
</div>
Avatar billede olebole Juniormester
04. august 2007 - 20:04 #58
- og igen kunne man godt lægge referencen til display'et ud som global variabel, hvis man kun har den ene bar  =)
Avatar billede thesurfer Nybegynder
04. august 2007 - 20:11 #59
Med skift-side feature (husk at rette "andenside.htm"):

<script type="text/JavaScript">
function runProgressBar(sId, nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW, oElm = document.getElementById(sId);
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oElm.style.width = 0;
        document.getElementById("displ").firstChild.nodeValue = 0;
        //alert("Her slutter festen");
        window.location.href='andenside.htm';
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oElm.style.width = nW + "px";
        setTimeout("runProgressBar('"+sId+"', "+nStartWidth+", "+nDur+", "+nStartTime+", "+nEndTime+")", 10);
        document.getElementById("displ").firstChild.nodeValue = Math.ceil( (nEndTime-nNow)/1000 );
    }
}

window.onload = function() {
  runProgressBar('bar', 300, 15000)
}
</script>

<div id="displ">&nbsp;</div>
<div style="width:300px;border:1px solid #000000#">
    <div id="bar" style="width:100%;height:14px;background:orange;overflow:hidden"></div>
</div>


olebole> Så smukt, at man kan høre englene synge.... :-)
Avatar billede flodhesten Nybegynder
04. august 2007 - 20:17 #60
Rigtig flot.

tænkte på denne:

window.location.href = "test.html";

Kan man skrive et eller andet smart med refresh eller sådan noget, så det et er nødvendigt at angrive navne på filen? Hvis filen nu skulle komme til at hedde noget andet, så skal det jo også ændres.

Tak for hjælpen.
Avatar billede thesurfer Nybegynder
04. august 2007 - 20:19 #61
Du kan reloade siden med:

window.location.reload(true);
Avatar billede flodhesten Nybegynder
04. august 2007 - 20:19 #62
DOH! Skulle have givet olebole 55 point :(
Avatar billede thesurfer Nybegynder
04. august 2007 - 20:21 #63
Muhahaha! Med de 20 points olebole skulle have haft, kan jeg overtage verdensherredømmet.. :-)

Hehe..

olebole> Skal jeg oprette et spørgsmål til dig, på 20 points?
Avatar billede flodhesten Nybegynder
04. august 2007 - 20:24 #64
Hehe, lidt seriøsitet! :P

Trods alt den eneste måde jeg via siden her kan give jer belønning ;)
Avatar billede thesurfer Nybegynder
04. august 2007 - 20:27 #65
flodhesten> Det passer ikke helt.. der er noget der hedder "karma", som de fleste hader.. :-)

http://www.expfaq.dk/karma#karma

Det bliver vist afskaffet i den næste udgave af Eksperten..

Læs evt:
ExpFAQ - Vejledning til nye brugere af Eksperten.dk - http://www.expfaq.dk/
Avatar billede flodhesten Nybegynder
04. august 2007 - 20:35 #66
Jamen jeg vil da med glæde dive jer lidt karma... Også selvom I hader det, så er hensigten god :P
Avatar billede flodhesten Nybegynder
04. august 2007 - 20:39 #67
I øvrigt "ExpFAQ - Vejledning til nye brugere af Eksperten.dk" - Jeg er faktisk ikke helt ny :P

Oprettet: onsdag, 16. april 2003, kl. 22:21

Der har bare været store perioder med inaktivitet :)
Avatar billede thesurfer Nybegynder
04. august 2007 - 20:44 #68
Engang i mellem, skal man lige forbi vejledningen.. selvom man ikke er ny.. :-)

Takker for points og karma. Hav en god aften.
Avatar billede olebole Juniormester
04. august 2007 - 20:53 #69
Tak for points. Jeg er sådan set ligeglad med antallet. Der er folk, der går op i points - det gjorde jeg selv for 7 år siden - så derfor synes jeg, man bør overholde pointsytemets regler nogenlunde, når nu det er her ... men det er som sagt længe siden, de har haft min interesse på den måde. Jeg er mere end tilfreds  ;o)

Jeg har indtryk af, du kun har den ene bar på siden. Derfor har jeg 'sexet' koden lidt op, så de værste unødvendigheder undgåes - og så har jeg flyttet sekund-display'et:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>ProgressBar - OleBole</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.barHolder {
    position: relative;
    width: 300px;
    height: 15px;
    border: 1px solid #000000;
    font: bold 11px tahoma, sans-serif;
}
.barHolder div {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
}
#bar {
    height: 15px;
    background: orange;
    overflow: hidden;
    z-index: 2;
}
#displA {
    z-index: 1;
}
#displB {
    color: white;
}
</style>
</head>
<body>
<script type="text/JavaScript">
function runProgressBar(nStartWidth, nDur, nStartTime, nEndTime) {
    var nNow, nPerc, nW;
    if (!nStartTime) var nStartTime = new Date().getTime();
    if (!nEndTime) var nEndTime = nStartTime + nDur;
    nNow = new Date().getTime();
    if (nNow > nEndTime) {
        oBar.style.width = 0;
        oDisplA.firstChild.nodeValue = oDisplB.firstChild.nodeValue = 0;
       
        alert("Her slutter festen");
    } else {
        nPerc = (nNow-nStartTime) / (nEndTime-nStartTime);
        nW = (nPerc * (-nStartWidth)) + nStartWidth;
        oBar.style.width = nW + "px";
        setTimeout("runProgressBar("+nStartWidth+", "+nDur+", "+nStartTime+", "+nEndTime+")", 10);
        oDisplA.firstChild.nodeValue = oDisplB.firstChild.nodeValue = Math.ceil( (nEndTime-nNow)/1000 ) + " sek";
    }
}

var oBar = oDisplA = oDisplB = null;
function startProgressBar(sId, nDuration) {
    oBar = document.getElementById("bar");
    oDisplA = document.getElementById("displA");
    oDisplB = document.getElementById("displB");
    oDisplB.style.width = oDisplB.offsetWidth + "px";
    runProgressBar(oBar.offsetWidth, nDuration*1000)
}

window.onload = function() {
    startProgressBar('bar', 15)
}
</script>

<div class="barHolder">
    <div id="bar"><div id="displB">&nbsp;</div></div>
    <div id="displA">&nbsp;</div>
</div>

</body>
</html>
Avatar billede flodhesten Nybegynder
04. august 2007 - 21:05 #70
Det ser lækkert ud, Ole.

Tusind tak for hjælpen.
Avatar billede olebole Juniormester
04. august 2007 - 21:16 #71
Du er mere end velkommen ... og en tak til min hjælpetræner med svømmevingerne  ;o)
Avatar billede thesurfer Nybegynder
05. august 2007 - 00:25 #72
Hehehe :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
06/0516:53 HTML Af Asky i Programmeringsværktøjer
06/0510:01 Mister internettet efter slumre, Af valby i Windows
05/0513:02 Lille smart tingest Af nu_igen i Fitness & Smartwatches
White papers
Flere white papers »