/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Simpel 'count-up'-funktion
Fra : Ace


Dato : 18-08-08 14:32

Hejsa

Jeg står og mangler en simpel stopwatch-agtig funktion, som
starter omtællingen via onClick på <div id="start"> og som pauser
ved tryk på <div id="pause"> og således forsætter optællingen
igen ved tryk på <div id="start">.

Har fundet et javascript som næsten lever op til mit behov:
<head>
<script type="text/javascript">
var timerRunning = false;
var timerID = null;
var initial = new Date();

function start_clock() {
document.forms['clock'].stop.value = "stop";
document.forms['clock'].stop.onclick = stop;

initial=new Date();
if( document.forms['clock'].displayScreen.value ) {
var t2 =
String(document.forms['clock'].displayScreen.value).split(":");
initial.setHours( initial.getHours() - parseInt(t2[0]) );
initial.setMinutes( initial.getMinutes() - parseInt(t2[1]) );
initial.setSeconds( initial.getSeconds() - parseInt(t2[2]) );
t1=t2=null;}
startTime = initial.getTime();
stopTimer();
showTimer();}

function stop() {
document.forms['clock'].start.value = "start";
document.forms['clock'].start.onclick = start_clock;
stopTimer();}

function stopTimer() {
if (timerRunning)
clearTimeout(timerID)
timerRunning = false}

function showTimer() {
var current = new Date();
var curTime = current.getTime();
var dif = curTime - startTime;
var result = dif / 1000;
if (result < 1)
result = "0" + result;
result = parseFloat(result.toString());
var hrs = parseInt(result/3600);
var mins = parseInt(result/60);
var secs = (parseInt(result)%1000);
hrs = (hrs < 10) ? "0" + hrs: hrs;
mins = ((mins%60) < 10) ? "0" + mins%60: mins%60;
secs = String(secs).split(".");
var secs = (parseInt(secs[0]%60) < 10) ? "0" + secs[0]%60 :
secs[0]%60;
document.forms['clock'].displayScreen.value =
hrs+":"+mins+":"+secs;
timerID = setTimeout("showTimer()", 0);
timerRunning = true;}
</script>
</head>
<body>
<form name="clock">
<input type="text" name="displayScreen" value="00:00:00"
onFocus="this.blur()" size="20">
<input type="button" name="start" value="start"
onClick="start_clock();">
<input type="button" name="stop" value="stop"
onClick="start_clock();">
</form>
</body>

.. det eneste problem er, at jeg har brug for at der ikke er en
formular involveret, og altså udelukkende opereres med
div-layers.

Håber nogen kan hjælpe mig med min efterspørgsel

Venligst Ace

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Jørgen Farum Jensen (18-08-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 18-08-08 14:54

Ace skrev:

> . det eneste problem er, at jeg har brug for at der ikke er en
> formular involveret, og altså udelukkende opereres med
> div-layers.

Det kan dsu ikke. Grunden til at man bruger
en formular til den slags er, at et formular-
felt er et aktivt element, der løbende kan
opdateres uden at siden skal genindlæses.

Jeg har set løsninger, der er baseret på at
klokken består af grafiske elementer, og
at hvert ciffer så udskiftes ved hjælp af
ændring af src-attributten.

Det er muligt at der findes en Ajax-løsning,
men så må andre træde til ...


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Birger Sørensen (18-08-2008)
Kommentar
Fra : Birger Sørensen


Dato : 18-08-08 15:41

Jørgen Farum Jensen forklarede:
> Ace skrev:
>
>> . det eneste problem er, at jeg har brug for at der ikke er en
>> formular involveret, og altså udelukkende opereres med
>> div-layers.
>
> Det kan dsu ikke. Grunden til at man bruger
> en formular til den slags er, at et formular-
> felt er et aktivt element, der løbende kan
> opdateres uden at siden skal genindlæses.
>
> Jeg har set løsninger, der er baseret på at
> klokken består af grafiske elementer, og
> at hvert ciffer så udskiftes ved hjælp af
> ændring af src-attributten.
>
> Det er muligt at der findes en Ajax-løsning,
> men så må andre træde til ...


Det tror jeg da godt man kan.
Brug innerHTML til at udskifte teksten via javascript.
Det kræver godt nok, at dit script modificeres en del, for det anvender
form - men det er ikke nødvendigt, som jeg ser det.

Birger



Ace (18-08-2008)
Kommentar
Fra : Ace


Dato : 18-08-08 16:46

Birger Sørensen skrev:
>
> Det tror jeg da godt man kan.
> Brug innerHTML til at udskifte teksten via javascript.
> Det kræver godt nok, at dit script modificeres en del, for det anvender
> form - men det er ikke nødvendigt, som jeg ser det.
>
Undskyld Birger, jeg forstår mig ikke særlig meget på javascript.. men
ville det være total upassende af mig, at spørge dig om du vil være mig
behjæpelig med, at midificere scriptet så du mener det fungerer det virker
med <div> i stedet for form? :$

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (18-08-2008)
Kommentar
Fra : Birger Sørensen


Dato : 18-08-08 22:36

Ace:
> Birger Sørensen skrev:
>>
>> Det tror jeg da godt man kan.
>> Brug innerHTML til at udskifte teksten via javascript.
>> Det kræver godt nok, at dit script modificeres en del, for det anvender
>> form - men det er ikke nødvendigt, som jeg ser det.
>>
> Undskyld Birger, jeg forstår mig ikke særlig meget på javascript.. men
> ville det være total upassende af mig, at spørge dig om du vil være mig
> behjæpelig med, at midificere scriptet så du mener det fungerer det virker
> med <div> i stedet for form? :$

Jeg har ikke gået i detallier med dit script - blot kommenteret på om
(og hvordan) man kan modificere indholdet af en side, uden brug af
form, og uden at skulle reloade hele siden hver gang.
Jeg har ikke tid før en gang i morgen, og kan ikke love dig noget...

Egentlig betragter jeg grupperne her som hjælp til selvhjælp.
Men der skal jo være nogle undtagelser der bekræfter reglen...

Birger



Birger Sørensen (20-08-2008)
Kommentar
Fra : Birger Sørensen


Dato : 20-08-08 09:42

Beklager jeg ikke nåede det i går.

http://clock.bbsorensen.dk/

Der er godt nok brugt button - men hvis du absolut skal have dem i
div'er, kan du bare ændre dem til div'er.

Tilføjede en reset knap (nulstiller og stopper, hvis timeren kører).
Din kode talte desuden forkert - og kunne ikke lige overskue hvorfor,
så jeg lavede det lidt simplere, med tre variable der tæller tiden i 1
sekunds intervaller, i stedet for datofunktions roderiet...
(Ved faktisk ikke hvor nøjagtig setTimeout er, men kan ikke forestille
mig andet end det er "godt nok").

Birger



Ace (22-08-2008)
Kommentar
Fra : Ace


Dato : 22-08-08 15:27

Birger Sørensen skrev:

> http://clock.bbsorensen.dk/
>
> Der er godt nok brugt button - men hvis du absolut skal have dem i
> div'er, kan du bare ændre dem til div'er.
>
> Tilføjede en reset knap (nulstiller og stopper, hvis timeren kører).
> Din kode talte desuden forkert - og kunne ikke lige overskue hvorfor,
> så jeg lavede det lidt simplere, med tre variable der tæller tiden i 1
> sekunds intervaller, i stedet for datofunktions roderiet...
> (Ved faktisk ikke hvor nøjagtig setTimeout er, men kan ikke forestille
> mig andet end det er "godt nok").

Tusind tak Birger, det virker perfect *thumbs up*

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Birger Sørensen (22-08-2008)
Kommentar
Fra : Birger Sørensen


Dato : 22-08-08 17:48

Ace frembragte:
> Birger Sørensen skrev:
>
>> http://clock.bbsorensen.dk/
>>
>> Der er godt nok brugt button - men hvis du absolut skal have dem i
>> div'er, kan du bare ændre dem til div'er.
>>
>> Tilføjede en reset knap (nulstiller og stopper, hvis timeren kører).
>> Din kode talte desuden forkert - og kunne ikke lige overskue hvorfor,
>> så jeg lavede det lidt simplere, med tre variable der tæller tiden i 1
>> sekunds intervaller, i stedet for datofunktions roderiet...
>> (Ved faktisk ikke hvor nøjagtig setTimeout er, men kan ikke forestille
>> mig andet end det er "godt nok").
>
> Tusind tak Birger, det virker perfect *thumbs up*

Velbekomme ;>)

Birger



Christian Kragh (18-08-2008)
Kommentar
Fra : Christian Kragh


Dato : 18-08-08 20:51

Ace wrote in dk.edb.internet.webdesign.clientside:
> Hejsa
>
> Jeg står og mangler en simpel stopwatch-agtig funktion, som
> starter omtællingen via onClick på <div id="start"> og som pauser
> ved tryk på <div id="pause"> og således forsætter optællingen
> igen ved tryk på <div id="start">.

Det du har fundet virker da som du beder om det.

> .. det eneste problem er, at jeg har brug for at der ikke er en
> formular involveret, og altså udelukkende opereres med
> div-layers.

Hvilken grund må der ikke bruges en form?

Jeg ville have dette i min body sektion hvis det ikke skal ligne en
form:

<form name="clock">
<input type="text" name="displayScreen" value="00:00:00"
onFocus="this.blur()" style="width: 58px; font: normal normal normal
10px verdana; background: white; border: none;" readonly>
<input type="button" name="start" value="start"
onClick="start_clock();" style="background: white; border: 1px solid
black; font: normal normal normal 10px verdana; ">
<input type="button" name="stop" value="stop"
onClick="start_clock();" style="background: white; border: 1px solid
black; font: normal normal normal 10px verdana; ">
</form>

Så vises det ikke som en form, og form feltet er readonly så man kan
ikke som bruger ændre på feltets værdi.

Christian

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Christian Kragh (18-08-2008)
Kommentar
Fra : Christian Kragh


Dato : 18-08-08 20:57

> <form name="clock">
> <input type="text" name="displayScreen" value="00:00:00"
> onFocus="this.blur()" style="width: 58px; font: normal normal normal
> 10px verdana; background: white; border: none;" readonly>
> <input type="button" name="start" value="start"
> onClick="start_clock();" style="background: white; border: 1px solid
> black; font: normal normal normal 10px verdana; ">
> <input type="button" name="stop" value="stop"
> onClick="start_clock();" style="background: white; border: 1px solid
> black; font: normal normal normal 10px verdana; ">
> </form>

Eller også behøver du ikke de to sidste input der kan du entlig bare
have:

<form name="clock">
<input type="text" name="displayScreen" value="00:00:00"
onFocus="this.blur()" style="width: 58px; font: normal normal normal
10px verdana; background: white; border: none;" readonly>

<span onClick="start_clock();"> Start </span>

<span onClick="start_clock();"> Slut </span>

</form>

Det fylder lidt mindre end det første, men ellers ingen forskedld

Christian

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Christian Kragh (18-08-2008)
Kommentar
Fra : Christian Kragh


Dato : 18-08-08 21:00

Glem mit efterfølgende indlæg med de 2 span elementer, da jeg ikke lige
havde luret hele javascriptet...

Scriptet spørger om værdien på elementet der er trykket på så det skal
være en knap, hvis ikke man ændre i scriptet.

Christian

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Martin (19-08-2008)
Kommentar
Fra : Martin


Dato : 19-08-08 02:14

Ace wrote:
> Hejsa
>
> Jeg står og mangler en simpel stopwatch-agtig funktion, som
> starter omtællingen via onClick på <div id="start"> og som pauser
> ved tryk på <div id="pause"> og således forsætter optællingen
> igen ved tryk på <div id="start">.

<html>
<head>
<script type="text/javascript">
var c=0;
var t;
function timedCount() {
document.getElementById('txt').innerHTML=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function stopCount() {
clearTimeout(t);
}
</script>
</head>

<body>

<div onclick="timedCount()">Start</div>
<div id="txt"></div>
<div onclick="stopCount()">Stop</div>

</body>
</html>

Søg
Reklame
Statistik
Spørgsmål : 177579
Tips : 31968
Nyheder : 719565
Indlæg : 6409073
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste