CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

steen_hansen Forsker

09. august 2016 - 23:19 Der er 34 kommentarer og
1 løsning

Countdown skal starte nedtælling fra et givent tidspunkt hver dag

Jeg har brug for at kunne sætte en countdown til at starte nedtællingen hver dag f.eks. kl. 14:15. Når der er talt ned til kl. 14:15, skal ny nedtælling gå i gang. Altså når der er talt ned fra 24 timer til 00:00:00 kl. 14:15.

Jeg skal faktisk bruge 2 countdowns. Men jeg går ud fra, at det bare er et spørgsmål om at ændre navne og starttidspunkt.

Jeg ser en masse spændende scripts, men de er næsten alle sammen med nedtælling af dage også. Og det skal jeg ikke bruge.

Jeg har kigget på http://keith-wood.name/countdown.html. Men der er PHP inde over det. Håber virkelig på noget hjælp.

Synes godt om

Slater Ekspert

10. august 2016 - 08:02 #1

Hvor ser du noget om PHP i det, du linker til?

Synes godt om

steen_hansen Forsker

10. august 2016 - 10:53 #2

Jeg tager fejl?

Jeg prøvede at stille det op, men der kom ingen tal, ingen nedtælling. Det er slettet igen.

Synes godt om

steen_hansen Forsker

10. august 2016 - 11:36 #3

Er siden pillet af, eller ....?

Synes godt om

olsensweb.dk Ekspert

10. august 2016 - 13:17 #4

>Er siden pillet af, eller ....?
nej den virker udemærket, hvis man lige fjerner punktummet i slutningen af url'en

start tiden ville være oplagt at tage fra serveren (php), da du ikke har styr på brugerens ur

hvilke af fanerne har du kigget på ??
relative og callback ser interessant ud

Synes godt om

steen_hansen Forsker

10. august 2016 - 13:59 #5

Relative ser rigtig god ud. Den skal bare kunne tælle ned fra f.eks. 14:15 hver dag, så den går i 0 (nul) hver dag klokken 14:15, for eksempel. Eller 18:45.

Men jeg prøvede at sætte det op. Det kunne have gået bedre, der kom intet frem. Hvordan får jeg det til at tælle ned? I det viste eksempel på "Relative" er det uden et nul foran. Jeg vil gerne have TT:MM:SS, f.eks. 02:07:23

Synes godt om

steen_hansen Forsker

10. august 2016 - 14:15 #6

Og jeg er ligeglad med Hours/Timer, Minutes/Minutter og Seconds/Sekunder. Jeg skal bare have tallene adskilt af kolon

Synes godt om

olsensweb.dk Ekspert

11. august 2016 - 13:54 #7

>I det viste eksempel på "Relative" er det uden et nul foran. Jeg vil gerne have TT:MM:SS, f.eks. 02:07:23

ref http://keith-wood.name/countdownRef.html
citat

padZeroes boolean false Set to true to pad values with zeroes for a minimum of two digits.

Since 2.0.0.

/citat

virker ikke på layout

her er lidt du kan starte på:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css">
<style type="text/css">

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// format: -> Vis altid timer, minutter, sekunder
// padZeroes: true -> vis foran stillet nul
// until: +500 -> start fra 500 sekunder (8 min, 20 sek) og tæl ned
// layout:'<b>{hnn} : {mnn} : {snn} </b>' -> nn foran stillet nul
// {hn} {hl}, {mn} {ml}, {sn} {sl} -> l = label eks hl = time label

$('#until300s').countdown({until: +500, format: 'HMS', layout:'<b>{hnn} : {mnn} : {snn} </b>'});
// $('#until300s').countdown({until: +500, padZeroes: true, format: 'HMS'});
// $('#until300s').countdown({until: +500});
});
</script>
</head>
<body>
<span id="until300s" class="countdown"></span>
</body>
</html>

until værdien ville jeg sætte via serverside code.
så server side laves der en beregning fra aktuelle klokkeslet i sekunder, slut tidspunkt i sekunder, og diferancen sættes i until.

hvis klokkeslet er før den slut tid du ønsker, skal until være 0

Synes godt om

steen_hansen Forsker

11. august 2016 - 14:34 #8

Hej ronols

Det er flot arbejde, foreløbig mange tak!

jquery.plugin.js er jeg dog i tvivl om. Jeg går ud fra, at jeg skal hente den på http://plugins.jquery.com/kbw.countdown/ - men hvilken?

countdown.js mener jeg at have rigtig. Men det virker nok først, når jquery.plugin.js er på plads

Synes godt om

steen_hansen Forsker

11. august 2016 - 14:40 #9

jquery.countdown.js:

var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});

$('#removeCountdown').click(function() {
var destroy = $(this).text() === 'Remove';
$(this).text(destroy ? 'Re-attach' : 'Remove');
$('#defaultCountdown').countdown(destroy ? 'destroy' : {until: newYear});
});

Synes godt om

olsensweb.dk Ekspert

11. august 2016 - 15:01 #10

>jquery.plugin.js er jeg dog i tvivl om.
jeg gemte Deres side offline, og brugte den vertion

>countdown.js mener jeg at have rigtig.
jeg har ikke ændret i nogle af Deres JS filer.
jeg vil ikke anbefale du ændre i Deres JS filer, da du så ikke kan bruge Deres opdaterede vertioner, uden at skulle ændre igen, hvilke du nok glemmer :)

demo http://experten.olsensweb.dk/1012157/
eks download http://experten.olsensweb.dk/1012157/1012157.zip

jeg har også taget nogle af de andre formater med for sjov

Synes godt om

steen_hansen Forsker

11. august 2016 - 15:19 #11

Det ser dælme ud til at virke :)

Jeg går ud fra, at jeg skal angive starttidspunktet i jquery.countdown.js?

Synes godt om

olsensweb.dk Ekspert

11. august 2016 - 15:30 #12

>Jeg går ud fra, at jeg skal angive starttidspunktet i jquery.countdown.js?
nej, jeg vil ikke pille i deres filer, lav det i filen (her index.html) evt via serverside.

hvis det er via serverside, så hedder filen selvføgelig ikke .html

Synes godt om

steen_hansen Forsker

11. august 2016 - 15:30 #13

#7 tæller ned fra 8 minutter og 20 sekunder, tror jeg. Og derefter stopper det.

Meningen er, at når tidspunktet (f.eks. klokken 18:20) er nået, skal tælleren gå i 00:00:00.

Et sekund efter skulle den helst tælle de næste 24 timer ned. Dvs når klokken er 18:20:01, starter tælleren forfra med at vise 23:59:59, indtil den når klokken 18:20:00 igen næste dag og viser 00:00:00 igen. Kan det lade sig gøre?

Synes godt om

steen_hansen Forsker

11. august 2016 - 15:35 #14

Så ikke lige din #12, sorry.

Ah, jeg forstår lidt bedre, du nævnte until tidligere. Men hvad skal værdierne hedde, når det f.eks. 14:45 der skal tælles ned til?

Synes godt om

olsensweb.dk Ekspert

11. august 2016 - 19:13 #15

du kan anvende onTick og teste om felterne er 0, (start værdi), og sette until option, og for hvert Tick tester du om alle felterne er 0, tælles dagen (her timerne) 1 op.

dit script kunne se sådan ud (kan nok optimeres)

prøv at lege med denne

Synes godt om

steen_hansen Forsker

12. august 2016 - 20:24 #16

Jeg takker for dit flid, ronols. Men jeg får bare en hvid side. Jeg er bange for, at jeg ikke har set det store billede. Jeg er bestemt ikke nogen haj til JavaScript, giver snart op :o[

Synes godt om

olsensweb.dk Ekspert

12. august 2016 - 21:13 #17

>Men jeg får bare en hvid side.
har du prøvet at se i din browser console ?? du må have en js fejl, eller en fil der ikke indlæsses

en del af udvikling er at kende udviklings værktøjerne til sin browser.
browseren har nogle indbygget (F12) og andet skal indstalleres som addon

til chrome
bruger jeg
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

til firefox bruger jeg
https://addons.mozilla.org/da/firefox/addon/firebug/
og lidt
https://addons.mozilla.org/da/firefox/addon/web-developer/

åbner du filen direkte eller via en server ??

jeg har før set problemer med denne linje
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

hvis man åbner direkte, men det virker via en server.
du kan evt ligge jquery.min.js lokalt i js folderen.

jeg har opdateret demo'en lidt, så det er denne der ligger der

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>

<style type="text/css">
.timer{
font-weight: bold;
font-size: 200%;
background-color: gray;
width: 150px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// until: +500 -> start fra 500 sekunder (8 min, 20 sek) og tæl ned
// layout:'<b>{hnn} : {mnn} : {snn} </b>' -> nn foran stillet nul
// {hn} {hl}, {mn} {ml}, {sn} {sl} -> l = label eks hl = time label

var d = new Date();
/*
console.log(d.getHours());
console.log(d.getMinutes());
console.log(d.getSeconds());
*/

var year_ = d.getFullYear();
var month_ = d.getMonth();
var day_ = d.getDate();
var hours_ = 17;
var minutes_ = 00;
var seconds_ = 00;

function watchCountdown(periods) {
if(periods[4] == 0 && periods[5] == 0 && periods[6]==0 ){
hours_++; // skal være day_++;
liftOff();
}
}

function liftOff() {
console.log("liftOff kaldt kl " + hours_ +" " + minutes_ + " " + seconds_); // debug info
// var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
start_date = new Date(year_,month_,day_,hours_,minutes_,00); // 2016-08-11 kl 18:00:00 januar er 0 i js
$('#until300s').countdown('option', {until: start_date});
$('#until300s').countdown({onTick: watchCountdown, format: 'HMS', layout:'<div class="timer">{hnn} : {mnn} : {snn} </div>'});
}
liftOff();
});
</script>
</head>
<body>
<span id="until300s" class=""></span>
</body>
</html>

demo http://experten.olsensweb.dk/1012157/
zip filen er ikke opdateret

Synes godt om

steen_hansen Forsker

13. august 2016 - 11:25 #18

Hej ronols

Fornemt, jeg prøver helt forfra senere i dag. Fortsat god weekend!

Synes godt om

steen_hansen Forsker

14. august 2016 - 12:33 #19

Hej ronols

Jeg har fået kigget lidt på det. Jeg håber ikke, at vi har snakket forbi hinanden med alt det arbejde du har lagt i det. Men jeg hælder mere til, at det er mig, der intet fatter :)

Jeg åbner filen fra serveren, kører intet lokalt.

Jeg kan ikke gennemskue det. Hvis jeg vil have, at der tælles ned til klokken 12:45 hver dag, hvor skal jeg sætte tidspunktet? Og skal jeg angive noget i antal minutter eller sekunder nogen steder? F.eks. Until300s. Er det 300 sekunder / 5 minutter? Jeg er helt tabt her, sorry :/

Hvis klokkeslættet, der tælles ned til er 12:45:00, skulle der gerne stå 10:45:00, hvis jeg tjekker nedtællingen kl. 02:00:00 om natten. Eller 23:45:00, hvis jeg tjekker nedtællingen kl, 13:00:00. Hvis jeg tjekker klokken 07:00:00 mandag morgen, burde der gerne stå 05:45:00 osv osv

Jeg er ked af det, men jeg er på bar bund her. Jeg kan ikke se hvad de 8 minutter og 20 sekunder hører hjemme i denne sammenhæng. Medmindre det da er et eksempel du vil vise mig :)

Håber du kan forklare hvordan det hænger sammen, hvordan jeg skal sætte det op. Hvor man skal regne fra, hvis der er datoskift osv.

PS: Tak for værktøjerne :)

Synes godt om

steen_hansen Forsker

14. august 2016 - 12:38 #20

start_date = new Date(year_,month_,day_,hours_,minutes_,00); // 2016-08-11 kl 18:00:00 januar er 0 i js

Jeg kan godt se, at der tælles ned til kolokken 18:00:00 her (den seneste). Men hvor dulen får du sat det ind henne? :)

Synes godt om

steen_hansen Forsker

14. august 2016 - 12:40 #21

Og vil timeren fortsætte den næste nedtælling til mandag kl. 18:00:00 klokken 18:00:01 i dag?

Synes godt om

steen_hansen Forsker

14. august 2016 - 12:44 #22

Jeg vil næsten gå ud fra, at denne har noget med klokken 18:00:00 at gøre:

var hours_ = 17;

Det er ihvertfald det nærmeste jeg kan skyde mig ind på. Man påbegynder nedtællingen den næste hele time efter klokken 17:00:00?

Hvis nedtællingen starter kl. 12:45:00 vil jeg gætte på, at det skal se således ud:

var hours_ = 11;
var minutes_ = 45;

eller

var hours_ = 11;
var minutes_ = 75;

hvis der regnes i 1/100 minutter.

Synes godt om

olsensweb.dk Ekspert

14. august 2016 - 13:52 #23

>Og vil timeren fortsætte den næste nedtælling til mandag kl. 18:00:00 klokken 18:00:01 i dag?
nej den tæller den næste time, da jeg tæller time tælleren op i denne hours_++; // skal være day_++;
havde det været næste dag kl:18:00 havde det selvføgelig været skal være day_++.

>$('#until300s').
på id until300s laved der en nedtælling.

>Er det 300 sekunder / 5 minutter? Jeg er helt tabt her, sorry :/
ja

du må ikke sammenligne #until300s med værdien i until der oprindelig var 300 sekunder, men som jeg har sat op til 500 sekunder

>Hvis klokkeslættet, der tælles ned til er 12:45:00, skulle der gerne stå 10:45:00, hvis jeg tjekker nedtællingen kl. 02:00:00 om natten.
hvor mange sekunder er der mellem de 2 klokkeslet ?? det er det tal der skal stå i until.

ref http://stackoverflow.com/questions/21516809/how-to-get-time-difference-between-two-timestamps-in-seconds-with-jquery

var d2 = new Date('2038-01-19 03:14:07');
var d1 = new Date('2038-01-19 03:10:07');

var seconds = (d2- d1)/1000;

du deler med 1000 pga Date retunerer i milli sekunder.

>eg vil næsten gå ud fra, at denne har noget med klokken 18:00:00 at gøre:
>var hours_ = 17;
ja

>Hvis nedtællingen starter kl. 12:45:00 vil jeg gætte på, at det skal se således ud:

>var hours_ = 11;
>var minutes_ = 45;
sådan

Synes godt om

steen_hansen Forsker

14. august 2016 - 14:16 #24

Ok. Jeg vil lige prøvet at nærlæse :)

Tælleren skal bare køre kontinuerligt, uagtet datoer, årstal .. whatever. Den skal tælle ned til f.eks. 12:45:00 hver dag, hvor den går i 00:00:00. Derefter påbegyndes den næste nedtælling klokken 12:45:01, og tælleren vil vise 23:59:59
Klokken -> Tæller
12:44:59 -> 00:00:01
12:45:00 -> 00:00:00
12:45:01 -> 23:59:59
12:45:02 -> 23:59:58
12:45:03 -> 23:59:57
12:45:04 -> 23:59:56
12:45:05 -> 23:59:55

osv

Synes godt om

steen_hansen Forsker

14. august 2016 - 15:15 #25

Ok, nu starter den forfra, jeg testede lige med 13:35 (det rigtige tidspunkt er 14:35).

Der er 86400 sekunder i et døgn. Dvs

$('#until300s').countdown('option', {until: start_date});
$('#until300s').countdown({onTick: watchCountdown, format: 'HMS', layout:'<div class="timer">{hnn} : {mnn} : {snn} </div>'});

skal rettes til

$('#until86400s').countdown('option', {until: start_date});
$('#until86400s').countdown({onTick: watchCountdown, format: 'HMS', layout:'<div class="timer">{hnn} : {mnn} : {snn} </div>'});

...?

Synes godt om

olsensweb.dk Ekspert

14. august 2016 - 15:42 #26

>skal rettes til
>$('#until86400s')
det er ligegyldigt hvad du kalder den bare den svare til dit html tag id

den er denne id dne referarer til
<span id="until300s" class=""></span>

de 2 navne skal være ens

personlig syntes jeg det er dårlig navngivning, at lade en id afspejle en variabels værdi, da en variabel netop er variabel

men giver det mening for dig at ændre navnet så gør det

$('#until86400s').countdown('option', {until: start_date});
$('#until86400s').countdown({onTick: watchCountdown, format: 'HMS', layout:'<div class="timer">{hnn} : {mnn} : {snn} </div>'});
...
<span id="until86400s" class=""></span>

Synes godt om

steen_hansen Forsker

14. august 2016 - 16:45 #27

Ok, så until300s har intet med sekunder at gøre. Jeg kunne kalde den until1145s, og <span id="until1245s" class=""></span>

Den næste kan jeg kalde until1615s og <span id="until1615s" class=""></span>

Det er korrekt forstået?

Synes godt om

steen_hansen Forsker

14. august 2016 - 16:46 #28

Jeg har nemlig brug for at sætte et par tællere op, altså mere end én :)

Synes godt om

steen_hansen Forsker

14. august 2016 - 16:49 #29

Nej, for øvrigt. Den startede ikke korrekt med nedtællingen, den var ikke sat til 24 timer. Vistnok kun én time. Jeg prøver lige at teste igen ...

Synes godt om

steen_hansen Forsker

14. august 2016 - 16:53 #30

Ja, det er kun én time, ikke 24 timer. Og det var der jeg ville hen med de 86400 sekunder.

Som det ser ud nu, tæller den ned til f.eks. 15:55, altså klokken 16:55. Herefter starter den med at tælle ned fra 00:59:59, og ikke 23:59:59

Synes godt om

steen_hansen Forsker

17. august 2016 - 01:25 #31

Jeg har sat 3 tællere op. De to første viser mærkeligt nok rigtigt. Jeg rodede med den 3. inden jeg opdagede, at de to første faktisk viste den rigtige nedtælling. Har du nogen plausibel forklaring?

Dee to første tæller korrekt ned. Den 3. (som jeg rodede med) tæller nu ned fra en time, og ikke 24 timer, som de to første tilsyneladende gør.

Synes godt om

steen_hansen Forsker

17. august 2016 - 12:12 #32

Og nu starter de med at tælle ned fra 00:59:59 :o[ Håber du har en idé til hvorfor.

Synes godt om

steen_hansen Forsker

23. august 2016 - 10:28 #33

Reference error: time is not defined
onload()

Jeg kan heller ikke finde time nogen steder. Kan du huske hvor du fik det fra?

Synes godt om

steen_hansen Forsker

23. august 2016 - 22:24 #34

Du skal have tak for indsatsen, ronols. Men jeg fandt en hel anden løsning fra stackoverflow.

Og jeg fik ordnet mit problem med body onload: http://www.computerworld.dk/eksperten/spm/1012370?k=8229844 - både mht. tre tællere og et ur.

Men tak for indsatsen :)

Synes godt om

steen_hansen Forsker

23. august 2016 - 22:25 #35

ENDELIG lykkedes det :) For den da!

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS