Avatar billede flodhesten Nybegynder
18. november 2007 - 01:20 Der er 15 kommentarer og
1 løsning

Grafisk count up

Hej eksperter.

Jeg har følgende kode udarbejdet af Olebole:

________________________________________

<!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;
       
    } 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>

_________________________________________


Jeg vil høre om det er muligt at ændre lidt i koden, således at den nu tæller op i procent? Den må godt køre en anelse hurtigere.
Det skal være således, at jeg ka skrive eksempelvis 68% ind i koden, så vil den gå op til 68% og stoppe der.

Er der nogen der kan hjælpe mig med dette?

på forhånd tak.
Avatar billede w13 Novice
18. november 2007 - 01:54 #1
Således?:
-------------------------------------------------
<!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">
var nEnd=68;
var nSpeed=20;
var nPerc=0;
function runProgressBar(nDur){
    if(nPerc!=nEnd){
        nPerc++;
        oBar.style.width=nPerc*oDisplA.offsetWidth/100;
        oDisplA.firstChild.nodeValue=oDisplB.firstChild.nodeValue=nPerc+"%";
        setTimeout("runProgressBar("+nDur+")",nSpeed);
    }
}

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(nDuration)
}

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

<div class="barHolder">
    <div id="bar"><div id="displB">0%</div></div>
    <div id="displA">0%</div>
</div>

</body>
</html>
Avatar billede w13 Novice
18. november 2007 - 01:56 #2
Så kan du bare rette:
var nEnd=68;
var nSpeed=20;
var nPerc=0;

I dette tilfælde tæller den op til 68. Hastigheden er sat til, at den skal tælle 1% op hvert 20. millisekund, og den starter på 0.
Avatar billede flodhesten Nybegynder
18. november 2007 - 02:01 #3
Det er jo kanon :-D
Avatar billede w13 Novice
18. november 2007 - 02:03 #4
Takker for point! =)
Avatar billede flodhesten Nybegynder
18. november 2007 - 02:18 #5
Der er dog lige en ting...

Når den er 0% er farven orange... Kan det laves om, sådan at den er hvid?
Avatar billede w13 Novice
18. november 2007 - 02:22 #6
<!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;
    overflow: hidden;
    z-index: 2;
}
#displA {
    z-index: 1;
}
#displB {
    color: white;
}
</style>

</head>
<body>
<script type="text/javascript">
var nEnd=68;
var nSpeed=20;
var nPerc=0;
function runProgressBar(nDur){
    if(nPerc!=nEnd){
        nPerc++;
        oBar.style.width=nPerc*oDisplA.offsetWidth/100;
        oDisplA.firstChild.nodeValue=oDisplB.firstChild.nodeValue=nPerc+"%";
        setTimeout("runProgressBar("+nDur+")",nSpeed);
    }
}

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

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

<div class="barHolder">
    <div id="bar"><div id="displB">0%</div></div>
    <div id="displA">0%</div>
</div>

</body>
</html>
Avatar billede flodhesten Nybegynder
18. november 2007 - 02:32 #7
Hmm, ser desværre ikke ud til at gøre en forskel...
Avatar billede w13 Novice
18. november 2007 - 02:50 #8
Hvor længe står den på 0??

Så brug denne her:
--------------------------------------------------------
<!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;
    overflow: hidden;
    z-index: 2;
}
#displA {
    z-index: 1;
}
#displB {
    color: white;
}
</style>

</head>
<body>
<script type="text/javascript">
var nEnd=68;
var nSpeed=20;
var nPerc=0;
function runProgressBar(nDur){
    oBar.style.backgroundColor="orange";
    if(nPerc!=nEnd){
        nPerc++;
        oBar.style.width=nPerc*oDisplA.offsetWidth/100;
        oDisplA.firstChild.nodeValue=oDisplB.firstChild.nodeValue=nPerc+"%";
        setTimeout("runProgressBar("+nDur+")",nSpeed);
    }
}

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(nDuration)
}

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

<div class="barHolder">
    <div id="bar"><div id="displB">0%</div></div>
    <div id="displA">0%</div>
</div>

</body>
</html>
Avatar billede flodhesten Nybegynder
18. november 2007 - 11:24 #9
Det gjorde det faktisk pænere... Men jeg tænker også på, når var nEnd=0; så er baren helt orange... Der vil jeg gerne have den hvid... Kan det lade sig gøre?
Avatar billede w13 Novice
18. november 2007 - 13:42 #10
Er du helt sikker på, du bruger den sidste udgave af min kode? Prøv ellers:
---------------------------------------------------------------------------
<!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;
    overflow: hidden;
    z-index: 2;
}
#displA {
    z-index: 1;
}
#displB {
    color: white;
}
</style>

</head>
<body>
<script type="text/javascript">
var nEnd=68;
var nSpeed=20;
var nPerc=0;
function runProgressBar(nDur){
    if(nPerc!=nEnd){
        nPerc++;
        oBar.style.width=nPerc*oDisplA.offsetWidth/100;
        oDisplA.firstChild.nodeValue=oDisplB.firstChild.nodeValue=nPerc+"%";
        oBar.style.backgroundColor="orange";
        setTimeout("runProgressBar("+nDur+")",nSpeed);
    }
}

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(nDuration)
}

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

<div class="barHolder">
    <div id="bar"><div id="displB">0%</div></div>
    <div id="displA">0%</div>
</div>

</body>
</html>
-------------------------------------------------------
Ellers må du vise mig din udgave af koden, for jeg ser det ikke.
Avatar billede flodhesten Nybegynder
18. november 2007 - 14:30 #11
Hmm, der må have været gået noget galt. Det må du undskylde.

Og mange tak for hjælpen.
Avatar billede flodhesten Nybegynder
18. november 2007 - 14:59 #12
Den ser dog desværre ikke ud til at fungere i Firefox? Ved du hvorfor og hvad jeg kan gøre for at ændre det?
Avatar billede w13 Novice
18. november 2007 - 17:46 #13
Virkede den anden kode i Firefox?
Avatar billede flodhesten Nybegynder
18. november 2007 - 17:54 #14
Ja :(
Avatar billede w13 Novice
18. november 2007 - 17:59 #15
Så når du siger, at den ikke virker i Firefox, må det være fordi den overhovedet ikke gør noget, right?
Avatar billede flodhesten Nybegynder
18. november 2007 - 18:15 #16
Præcis. Eller den tæller op i %, men grafisk viser den ingenting.
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester