Tiešsaistes taimeris ļaus izsekot laiku pirms dažādiem notikumiem – pat ja runa ir par olu vārīšanu. Ar atpakaļskaitīšanas taimeri jūs noteikti nepalaidīsit garām īsto brīdi.

Lai iestatītu taimeri, jānoklikšķina uz pogas “Iestatīt taimeri” un uznirstošajā logā jānorāda nepieciešamais laiks (stundas, minūtes un sekundes), vai arī varat norādīt konkrētu datumu un laiku, kurā taimeris jāieslēdz. ugunsgrēks pēc dažām dienām. Ja jums ir jāpaziņo ar skaņu, kad pienāk norādītais laiks, tad sarakstā atlasiet vajadzīgo melodiju (katru melodiju varat klausīties). Varat arī norādīt ziņojumu, kas jāparāda ekrānā, kad tiek aktivizēts atpakaļskaitīšanas taimeris. Pēc visas nepieciešamās informācijas norādīšanas noklikšķiniet uz "Sākt", lai palaistu tiešsaistes taimeri.

Atcerieties, ka, lai datorā vai tālrunī darbotos tiešsaistes taimeris ar skaņu, ir jāieslēdz skaļruņu skaļums (tālrunī ir jāpārliecinās, vai “Media” skaņa ir iestatīta vēlamajā līmenī)! Ja melodija nav jāatskaņo, varat noņemt atzīmi no izvēles rūtiņas Taimera zvans. Šajā gadījumā tiks norādīts tikai ziņojums.

Lai tiešsaistes taimeris darbotos pareizi, NAV nepieciešams pastāvīgs interneta pieslēgums, taču tas NEdarbosies, ja pārlūkprogramma ir aizvērta vai dators ir izslēgts/miega režīmā.

Šajā rakstā mēs apskatīsim vairākas taimera iespējas.

1. iespēja.
Vienkāršs taimeris, kas izmanto tikai minūtes un sekundes



Lai taimeris tiktu parādīts, elementam ir jāpiešķir taimera identifikators un tagam jāpievieno nosacījums

Tas arī viss, taimeris ir gatavs.

2. iespēja.
Taimera cipari būs attēls. Arī šajā taimerī papildus minūtēm un sekundēm ir pieejamas stundas un dienas. Mūsu taimeris skaitīs atpakaļ līdz noteiktai dienai.

Lapas noformēšana


Atpakaļskaitīšanas taimeris




Lai parādītu laiku, tiks izmantots attēls digits2_orange.png

Tālāk mēs rakstām js kodu



var t=Datums.parse(deadline)-Date.parse(new Date());
var sekundes = Math.floor((t/1000) % 60);
var minūtes = Math.floor((t/1000/60) % 60);
var stundas = Math.floor((t/(1000*60*60)) % 24);
var dienas = Math.floor(t/(1000*60*60*24));

$(funkcija())(
$("#skaitītājs").countdown((
attēls: "pic/digits2_orange.png",
sākuma laiks: dienas+":"+stundas+":"+minūtes+":"+sekundes,
taimera beigas: funkcija())(
$("#tut").html("Taimeris ir pabeidzis savu darbu");
}
});
});
attēls - mūsu attēls
startTime ir tieši laiks, kas atlicis līdz 01.09.2017
timerEnd - kas notiek, kad taimeris beidzas mūsu gadījumā, atbilstošais uzraksts tiks ievietots konteinerā ar identifikatoru tut;
Nākamais ir mūsu taimeris

Pa kreisi:


DienasStundasMinūtesSekundes






Mēs formalizējam
#layer(
platums: 600 pikseļi;
text-align:center;
margin:0 auto ;)

#counter(
margin: 10pt auto 0 auto;
platums: 414 pikseļi;)

Desc(
platums: 430 pikseļi;
piemale:0px auto;)

#dienas,#stundas,#minūtes,#sekundes(
pludiņš:pa kreisi;
fonts: 13px Arial,Verdana,sans-serif;
platums: 50 pikseļi;
mala-labā: 63 pikseļi;
fonta svars: treknrakstā;
krāsa:#000;)

#seconds(margin-right:0px;)

CntSeparator(
fonta izmērs: 50 pikseļi;
mala: 6 pikseļi 7 pikseļi;
krāsa:#000;)
3. iespēja.
Mūsuprāt ērtākais. Tāpat kā iepriekšējā, tas parāda atlikušo dienu, stundu, minūšu, sekunžu skaitu. Neizmanto attēlu, lai parādītu skaitītāju.
Lai strādātu, mums ir nepieciešama jquery bibliotēka un fails

Lapas noformēšana


Atpakaļskaitīšanas taimeris

// šeit ir vēlamais datums formātā gggg-mm-dd hh:mm:ss
var deadline = "2017-08-20 00:00:00";

• 
  00
  dienas
  


• 
  00
  skatīties
  


• 
  00
  min
  


• 
  00
  sek
  

$(.countdown").downCount((
datums: termiņš
},
funkcija())(
/* darbība pēc taimera beigām */
brīdinājums("Laiks beidzies!");
});


Un css stilam izskats
.countdown(
saraksta stils: nav;
piemale: 6 pikseļi 0 0 0;
polsterējums:0;
displejs: bloks;)

Atpakaļskaitīšana li(displejs: inline-block;)

/* šeit ir dienas, stundas, minūtes, sekundes */
.countdown li span(
platums: 100%;
krāsa:#000;
fonts: 18px Verdana;
displejs: inline-block;)

/* atdalītāji. Un: */
.countdown li.seperator (
krāsa:#000;
fonts:16px Verdana;
vertikāli izlīdzināt: augšā;)

Atpakaļskaitīšana li div(
piemale:0;
krāsa: #a7abb1;
fonts: 8pt Verdana;)

Tabata taimeri var iegādāties veikalā kā atsevišķu ierīci, lietot tiešsaistē vai instalēt kā aplikāciju viedtālrunī (piemēram, Android, iPhone). Tiešsaistes versija Tas ir ērti, jo jums nekas nav jāinstalē, viss ir vienkāršs un skaidrs.

Kā lietot intervāla taimeri:

Intervāla laiku var mainīt, izmantojot pogas - un + pēc vajadzīgā vienuma izvēles:

Sagatavošana - noklusējuma 10 sek. Šis ir laiks, kas nepieciešams, lai atkāptos no datora un sagatavotos treniņam.

Darbs - pēc noklusējuma ir 20 sek. Šis ir laiks veikt vingrinājumus.

Atpūta - noklusējuma 10 sek. Šis ir atpūtas laiks starp kārtām.

Kārtas — noklusējuma vērtība ir 8. Tas ir pieeju skaits (darbs + atpūta).

Cikli — noklusējuma vērtība ir 1. Tas ir 8 apļu skaits. Laika gaitā palieliniet līdz 3-4 cikliem. Starp cikliem jūs parasti atpūšaties 1 minūti. Atpūtas laiks starp cikliem ir iestatīts sadaļā “Sagatavošana”.

Intervālu taimera video versija ar mūziku:

Vienkāršākais un ērtākais atpakaļskaitīšanas taimeris

HTML Atpakaļskaitīšana Pulkstenis Dienas Stundas Minūtes Sekundes CSS pamatteksts(teksta līdzināšana: centrā; fons: #00ecb9; fontu saime: sans-serif; fonta svars: 100; ) .countdown-title ( krāsa: #396; fonta svars: 100; fonta lielums: 40 pikseļi; mala : 40 pikseļi 0 pikseļi 20 pikseļi ) .backdown ( font-family: sans-serif; color: #fff; displejs: inline-block; font-weight: 100; text-align: centre; font-size: 30px; . .countdown- numurs ( polsterējums: 10 pikseļi; apmales rādiuss: 3 pikseļi; fons: # 00bf96; displejs: inline-block; ) .backdown-time ( polsterējums: 15 pikseļi; apmales rādiuss: 3 pikseļi; fons: #00816a; displejs: inline-block; ) .countdown-text ( displejs: bloks; padding-top: 5px; font-size: 16px; ) Javascript funkcija getTimeRemaining(endtime) ( var t = Date.parse(beigu laiks) - Date.parse(new Date()); var sekundes = Math.floor((t / 1000) % 60); ) )) % 24); var dienas = Math.floor(t / (1000 * 60 * 60 * 24) ( "kopā: t, "dienas": dienas, "stundas": stundas, "minūtes"); : minūtes, "sekundes": sekundes ); ) funkcija inicializēClock(id, beigu laiks) ( var pulkstenis = document.getElementById(id); var daysSpan = pulkstenis.querySelector(.days"); var hoursSpan = clock.querySelector(.hours"); var minutesSpan = pulkstenis. querySelector(.minutes"); var secondsSpan = clock.querySelector(.seconds"); funkcija updateClock() ( var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0"); + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2)Span.innerHTML = ("0" + t.sekundes).slice(-2 ); if (t.total proTimer (apmaksāts)

Apmaksāts atpakaļskaitīšanas taimera ģenerators. Izmaksas: 48 RUR/mēnesī par 1 taimeri vai 199 RUR/mēnesī par jebkuru taimeru skaitu.

Septiņi dizaini, trīs izmēri, trīspadsmit krāsas. Rediģēšanas panelis. Viedie iestatījumi. Testēšanai ir demonstrācijas versija. Koda apjoms ir mazs. Skripts darbojas pakalpojuma pusē.