Den enkleste og mest praktiske nedtellingstidtakeren

HTML

Nedtellingsklokke

CSS

body ( text-align: center; background: #00ecb9; font-family: sans-serif; font-weight: 100; ) .countdown-title ( farge: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; .nedtelling (font-familie: sans-serif; farge: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; ) .countdown -nummer ( padding: 10px; border-radius: 3px; bakgrunn: #00bf96; display: inline-block; ) .countdown-time ( padding: 15px; border-radius: 3px; bakgrunn: #00816a; display: inline-block ; ) .nedtellingstekst (display: blokk; utfylling: 5px; skriftstørrelse: 16px; )

Javascript

funksjon getTimeRemaining(endtime) ( var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor(( t / 1000 / 60) % 60 var timer = Math.floor((t / (1000 * 60 * 60)) % 24 var days = Math.floor(t / (1000 * 60 * 24)); ); return ( "total": t, "days": days, "hours": hours, "minutes": minutes, "seconds": seconds ) function initializeClock(id, endtime) ( var clock = document.getElementById) ( id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); () ( var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t. minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);<= 0) { clearInterval(timeinterval); } } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); // for endless timer initializeClock("countdown", deadline);

Angi sluttdatoen for tidtakeren

ISO 8601 datoutdataformat:

Var frist = "2015-12-31";

Kort format:

Var frist = "31/12/2015";

Langt format:

Var frist = "31. desember 2015";

Viser datoen med nøyaktig tid og tidssone:

Var deadline="01. januar 2018 00:00:00 GMT+0300";

Tidtakerutgang for landingssider – tidtakeren vil alltid vise at det er 15 dager igjen (du kan spesifisere når som helst)

Var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);

Arbeidseksempel på en nedtellingstidtaker

Skjul timeren etter at tiden er utløpt, og vis en melding om at tiden er utløpt

Denne løsningen ble foreslått i kommentarene av Igor.

Legg til en blokk med en melding i HTML-en

Legg til følgende stiler til CSS:

Deadline-message( display: none; font-size: 24px; font-style: italic; ) .visible( display: block; ) .hidden( display: none; )

I skriptet endrer vi timerinitialiseringsfunksjonen initializeClock(id, endtime) (...) , og lar resten være som den var:

Funksjon initializeClock(id, endtime) ( var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector (".minutes"); var secondsSpan = clock.querySelector(".seconds");<= 0) { document.getElementById("countdown").className = "hidden"; document.getElementById("deadline-message").className = "visible"; clearInterval(timeinterval); return true; } daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); } updateClock(); var timeinterval = setInterval(updateClock, 1000); }

Det som har endret seg i denne funksjonen er at når timeren utløper, legges en .hidden-klasse til selve timeren (skjuler timeren), og en .visible-klasse legges til meldingen om tidens slutt (viser en melding), og vi slutter også å utføre funksjonen ved å kalle clearInterval(timeinterval)-metoden ); . Og utgangen av tidsenheter plasseres etter å ha sjekket om tiden er utløpt eller ikke.

Arbeidseksempel på en nedtellingstidtaker med en melding når tiden er utløpt

Klikk på knappen Kjør på nytt for å sikre at alt fungerer som det skal.

Nedtellingstidtaker med omstart

Essensen av timeren er at når tiden utløper, stopper ikke timeren, ingen melding vises, men begynner ganske enkelt en ny nedtelling:

Timeren er stilt inn på 5 sekunder og vil starte på nytt i ytterligere 5 sekunder når tiden går ut

Funksjon getTimeRemaining(endtime) ( var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor(( t / 1000 / 60) % 60 var timer = Math.floor((t / (1000 * 60 * 60)) % 24 var days = Math.floor(t / (1000 * 60 * 24)); ); return ( totalt: t, dager: dager, timer: timer, minutter: minutter, sekunder: sekunder ) funksjon initializeClock(id, sluttid) ( var clock = document.getElementById(id); var daysSpan = clock.querySelector (" .days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); ( var t = getTimeRemaining( slutttid); if (t.total<= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline); } daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline);

Forskjellen i JS-koden mellom alternativet med å vise en melding om tidens slutt er kun i å erstatte denne koden

Hvis(t.totalt<= 0) { document.getElementById("countdown").className = "hidden"; document.getElementById("deadline-messadge").className = "visible"; clearInterval(timeinterval); return true; }

Hvis(t.totalt<= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline); }

Vær oppmerksom på at når du tilbakestiller tidtakeren, må vi sette en ny frist, og den kan være helt annerledes enn den opprinnelige, som er angitt på den nest siste kodelinjen:

Var deadline = new Date(Date.parse(new Date()) + 5 * 1000);

Innenfor rammen av det presenterte verktøyet er forskjellige driftsmoduser for den elektroniske stoppeklokken implementert:

• Stoppeklokke - nedtelling
• Nedtellingstidtaker med lyd
• Intervalltimer

Den gratis stoppeklokken kan for eksempel brukes til å måle pulsen din, registrere uoffisielle sportsprestasjoner eller bestå standarder. For markedsførere og testere kan en nettstoppklokke være nyttig for å telle tid når man sjekker brukervennligheten til en nettside eller applikasjon (brukerbarhetsvurdering). Nedtelling kan brukes under trening, for eksempel ved montering og demontering av våpen eller en Rubiks kube.

De innledende innstillingene til stoppeklokken eller nedtellingstidtakeren stilles inn direkte i grensesnittet, bare klikk på tallene og still inn ønsket verdi.

Intervalltimer for trening

Fitnesstimeren kan brukes til å stille inn intervaller for Tabata og annen intervalltrening med vekslende hvileperioder og høyintensivt arbeid. Den støtter innstilling av arbeids- og hvileintervaller og innstilling av antall runder (repetisjoner).

Stoppeklokken er tilgjengelig online og gratis. I timeren kan du stille inn nedtellingen til 30 sekunder, 1, 2 minutter eller en vilkårlig tid. Det er ikke nødvendig å laste ned programmet til datamaskinen eller installere programmet på telefonen. Den elektroniske timertjenesten kan brukes på et passende tidspunkt og sted via Internett.

En Tabata-timer kan kjøpes i en butikk som en separat enhet, brukes online eller installeres som en applikasjon på en smarttelefon (for eksempel for Android, for iPhone). Nettversjonen er praktisk fordi du ikke trenger å installere noe, alt er enkelt og oversiktlig.

Slik bruker du intervalltimeren:

Intervalltider kan endres ved hjelp av knappene - Og + , etter å ha valgt ønsket element:

Forberedelse- standard 10 sek. Dette er tiden som trengs for å gå bort fra datamaskinen og forberede seg til treningen.

Jobb- satt som standard 20 sek. Dette er tiden for å gjøre øvelsene.

Hvile- standard 10 sek. Dette er hviletiden mellom rundene.

runder- satt som standard 8 . Dette er antall tilnærminger (arbeid + hvile).

Sykluser- satt som standard 1 . Dette er antall runder på 8 runder. Over tid, øk til 3-4 sykluser. Mellom syklusene hviler du vanligvis i 1 minutt. Hviletiden mellom sykluser settes i punktet "Forberedelse".

Videoversjon av intervalltimer med musikk:

Vi presenterer for deg en ny, mest enkel og funksjonell tjeneste for alle som bryr seg om tid av en eller annen grunn. En online timer lar deg registrere tid når det er nødvendig. Enten det gjelder timing av sportsbegivenheter, sette dine egne personlige rekorder, eller kanskje du bare trenger å ta tid mens du lager dumplings. Personlig bruker jeg, skaperen av denne tjenesten, den selv til å spore koketiden til visse retter. Veldig praktisk og praktisk. Matlagingen min kan ikke leve uten en timer. Jeg tar tid på alt - fra steking av koteletter til å lage borsjtsj eller kyllingsuppe. For nylig innrømmet vennen min at han bruker min online timer som vekkerklokke! Tross alt, på slutten av nedtellingen, en forhåndsinnstilt tid, kan timeren spille av en lyd. Og her er det klart at lyden fra datahøyttalerne vil være høyere enn en vanlig vekkerklokke, det vil si at sannsynligheten for å våkne er høyere. Dette er noe nytt for meg, for å være ærlig, jeg hadde aldri trodd at en online timer kunne brukes som vekkerklokke, og alt fordi den har en lydfunksjon. Nå skal jeg prøve det selv. Men denne siden har mer enn bare en timer. Du kan også bruke den elektroniske stoppeklokketjenesten. Ja, du trenger ikke å bruke en timer i det hele tatt, du har et valg. En stoppeklokke er for eksempel veldig praktisk å bruke når du driver med sport hjemme. Du kan time ulike tilnærminger, pauser mellom øvelsene og tid brukt på øvelser. Men det er ikke alt. Jeg har alltid likt tidtakere som teller ned antall dager frem til en bestemt hendelse, for eksempel en tidtaker for hvor mange dager som er igjen til sommeren eller en tidtaker for hvor mange dager som er igjen til nyttår. Dette er en så banal ting, men noen ganger er det interessant å gå inn og se hvor mange dager som er igjen til...

Hvordan bruke min online timer

Alt er veldig enkelt :)
Besøk nettsiden, velkommen! Gå til "Timer"-fanen, klikk på den grønne pilen for å begynne å telle ned tiden. For å sette nedtellingen på pause, klikk på "Pause" (oransje knapp). Stopp-knappen vil stoppe telletiden. Og den roterende blå pilknappen vil "Tilbakestille" timerverdiene. Selvfølgelig kan du stille inn når du trenger det. Spesielt for enkelhets skyld har jeg forberedt forhåndsinnstillinger for tidsinnstillinger, bare flytt markøren over timerknappen og nettstedet mitt vil be deg om å velge ønsket tid. Hvis den nødvendige tiden ikke er tilgjengelig, er det ikke noe problem, du kan angi tiden som kreves for opptak manuelt.

Det viktigste er at online timeren er helt gratis og enkel å bruke. Jeg laget den først og fremst for meg selv, for å passe mine kulinariske behov, og derfor med høy kvalitet. Se selv akkurat nå, bruk en gratis tjeneste – en online timer, stoppeklokke eller nedtelling til viktige hendelser.

Det hender at du trenger noe nedtellingsklokke, det finnes mange løsninger på Internett, men de er enten svært tungvinte eller har avhengigheter av andre biblioteker. I dag skal vi se på hvordan lage en nedtellingstidtaker i javascript i 18 linjer med kode.

Plan

• Beregn gjenværende tid

Still inn riktig sluttdato

Først må du angi riktig sluttdato. Dette vil være en streng i alle formatene den forstår Date.parse() metode. For eksempel:

Var frist = "2015-12-31";

Kort format

Var frist = "31/12/2015";

Eller langt format

Var frist = "31. desember 2015";

Hvert av disse formatene lar deg stille inn nøyaktig tid (i timer, minutter, sekunder) og tidssone. For eksempel:

Var deadline = "31. desember 2015 23:59:59 GMT+02:00";

Beregn gjenværende tid

Funksjon getTimeRemaining(endtime)(
var t = Date.parse(sluttid) - Date.parse(ny dato());
var sekunder = Math.floor((t/1000) % 60);
var minutter = Math.floor((t/1000/60) % 60);
var timer = Math.floor((t/(1000*60*60)) % 24);
var dager = Math.floor(t/(1000*60*60*24));
komme tilbake (
"totalt": t,
"dager": dager,
"timer": timer,
"minutes": minutter,
"sekunder": sekunder
};
}

Først lager vi en variabel t for å lagre den gjenværende tiden. Date.parse() metoden er innebygd javascript og lar deg konvertere en streng med tid til en verdi i millisekunder. Dette vil tillate oss å trekke en gang fra en annen og få forskjellen mellom dem.

Var t = Date.parse(sluttid) - Date.parse(ny dato());

Konverter datoen til et praktisk format

Nå ønsker vi å konvertere millisekunder til dager, timer, minutter og sekunder. La oss bruke sekunder som et eksempel:

Var sekunder = Math.floor((t/1000) % 60);

La oss finne ut hva som skjer her.

• Del millisekunder med 1000 for å konvertere dem til sekunder
• Del det totale antallet sekunder med 60 og behold resten - du trenger ikke alle sekundene, bare de som er igjen etter at minuttene er talt opp
• Rund ned til nærmeste hele tall fordi du trenger hele sekunder, ikke brøkdeler av dem

Gjenta denne logikken for å konvertere millisekunder til minutter, timer og dager.

Utdata tidtakerdata som et gjenbrukbart objekt

Når timene, minuttene og sekundene er klare, må vi returnere dem som en gjenbrukbar gjenstand.

Komme tilbake (
"totalt": t,
"dager": dager,
"timer": timer,
"minutes": minutter,
"sekunder": sekunder
};

Dette objektet lar deg kalle funksjonen din og få noen av de beregnede verdiene. Her er et eksempel på hvordan du kan få de resterende minuttene:

GetTimeRemaining(deadline).minutes

Praktisk, ikke sant?

Vis en klokke på siden og stopp den når den når null

Nå har vi en funksjon som returnerer oss resterende dager, timer, minutter og sekunder. Vi kan bygge timeren vår. Lag først følgende html struktur for klokke:

Skriv deretter en funksjon som vil vise dataene inne i vår div"a:

Funksjon initializeClock(id, endtime)(
var klokke = document.getElementById(id);
var timeinterval = setInterval(function())(


" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;

}
},1000);
}

Denne funksjonen tar to parametere: id element som vil inneholde klokken vår, og slutttiden for telleren. Inne i funksjonen vil vi erklære en variabel klokke og vi vil bruke den til å lagre en referanse til klokkeblokken vår, så vi slipper å spørre DOM.

• Beregn gjenværende tid
• Vis gjenværende tid i vår div
• Hvis gjenværende tid = 0, stopp klokken

Det eneste som gjenstår er å starte klokken slik:

InitializeClock("clockdiv", frist);

Gratulerer! Nå har du enkel nedtellingstidtaker på bare 18 linjer med javascript-kode.

Forbered klokken for visning

Før styling må vi avgrense noen ting litt.

• Fjern den første forsinkelsen slik at timeren vises umiddelbart
• Gjør klokkeskriptet mer effektivt slik at du slipper å hele tiden bygge om alle klokkene
• Legg til nuller etter ønske

Fjerner den første forsinkelsen

I klokker vi bruker settintervall for å oppdatere skjermen hvert sekund. Oftest er dette normalt, bortsett fra i begynnelsen, hvor det er en 1s forsinkelse. For å fikse dette må vi oppdatere klokken en gang før settintervall starter.

For å gjøre dette, la oss flytte den anonyme funksjonen vi overfører til settintervall(den som oppdaterer klokken hvert sekund) til sin egen separate funksjon, som vi kaller oppdater Klokke. Ring denne funksjonen en gang utenfor settintervall og ring henne inn igjen settintervall. På denne måten vil klokken vises uten forsinkelse.

I din javascript erstatte dette:

Var tidsintervall = setInterval(function())( ... ),1000);

Funksjon updateClock())(
var t = getTimeRemaining(sluttid);
clock.innerHTML = "days: " + t.days + "
" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;
if(t.total clearInterval(tidsintervall);
}
}

UpdateClock(); // kjør funksjonen én gang for å unngå forsinkelser
var timeinterval = setInterval(updateClock,1000);

Gjør manuset mer effektivt

For å gjøre skriptet mer effektivt, må vi ikke oppdatere alle klokkene, men bare tallene. For å gjøre dette, legg hvert tall i en tag span og vi oppdaterer kun dette innholdet.

Her html:

Var daysSpan = clock.querySelector(".days");
var hoursSpan = clock.querySelector(".hours");
var minutesSpan = clock.querySelector(".minutes");
var secondsSpan = clock.querySelector(".seconds");

Funksjon updateClock())(
var t = getTimeRemaining(sluttid);

DaysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.timer;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;

...
}

Legger til innledende nuller

Hvis du trenger innledende nuller, kan du erstatte kode slik:

SecondsSpan.innerHTML = t.seconds;

Som dette:

SecondsSpan.innerHTML = ("0" + t.seconds).slice(-2);

Konklusjon

Vi har vurdert hvordan lage en enkel nedtellingstidtaker i javascript. Alt som gjenstår for deg å gjøre er å legge til stiler. Takk for din oppmerksomhet!