Mrežni mjerač vremena sa uštedom podataka. Besplatni online generatori mjerača vremena za odbrojavanje

Pozdrav dragi prijatelji. U jednom od prethodnih članaka raspravljao sam o tome isplati li se koristiti (također nazvan mjerač vremena) na odredišnoj stranici. Dakle, ako mislite da vam treba, danas ću vam reći kako da ga povežete sa svojom odredišnom stranicom.

Razgovarat ćemo o nekoliko opcija, u jednom slučaju to će biti skripta brojača odbrojavanja koja će se ponavljati svaka 24 sata. Odnosno, moći ćete napraviti promociju. Na primjer: “do kraja dana -” i mjerač vremena će pokazati koliko je vremena preostalo do kraja dana. Nakon jednog dana, mjerač vremena će se ponovno pokrenuti i ponovno početi brojati

A u drugoj verziji, reći ću vam o internetskoj usluzi koja vam omogućuje povezivanje brojača odbrojavanja. Ali ovdje se pretpostavlja da je mjerač dizajniran za dugo vremensko razdoblje. Na primjer, planirate otvoriti web stranicu za mjesec dana, a za sada ste napravili ovakav zaglavak:

Može se koristiti na različite načine, na primjer, ako je promocija jednokratna i osmišljena za dugo vremensko razdoblje, tada je internetska veza isplativija, jer trebate dodati samo jedan redak koda na pravo mjesto. Općenito, ovisno o namjeni, odaberite odgovarajuću opciju za vas. Započnimo...

Brojač odbrojavanja s ponovnim pokretanjem

Dakle, brojač odbrojavanja koji će se ponovno pokrenuti nakon jednog dana. Razvio ga je majstor koji ima blog mywpnote.ru. Naišao sam na blog prije otprilike šest mjeseci i tada mi je stvarno pomogao. Danas vam želim reći o jednom od mjerača koje je razvio i opisati kako ga spojiti.

Tajmeri izgledaju ovako:

Preuzmite izvore i u arhivi ćete vidjeti 4 mape s nazivima vid1, vid2, vid3, vid4 - sadrže različite vrste dizajna timera. Možete vidjeti sve i odabrati ono što vam se sviđa. Način povezivanja je isti za sve.

Pokazat ću na 4, jer mi se čini da je najuniverzalniji. Otvorimo vid4 i vidimo standardni skup mapa za većinu izvora na mreži. (indeks datoteka, mapa sa stilskim listovima, mapa sa slikama i mapa sa skriptom). Malo sam promijenio strukturu datoteke kako bih početnicima olakšao spajanje mjerača. To jest, premjestio sam skriptu timera u zasebnu datoteku, ali prije je bila u indeksnoj datoteci.

Kako povezati skriptu brojača odbrojavanja na vašu odredišnu stranicu?

Otvorite index.html bilo kojim editorom (ja koristim sublime3) i pogledajte sljedeći kod.

Odavde morate kopirati vezu lista stilova i skripte (linije 7 i 8) u svoj projekt.

Također, na mjesto gdje želite postaviti mjerač vremena, morate dodati div oznaku s klasom “countbox” – linija 13. Kod posebno postavlja višestruke veze mjerača vremena kako bi bilo jasno da se mogu koristiti više puta na stranici. Mnoge skripte imaju problema s tim, a drugi put ne žele biti prikazane na ekranu.

Sada samo trebate kopirati mape img, css i js, kao i njihov sadržaj, u svoj projekt - i to je to! Brojač će raditi! Kao što vidite, potrebno je najviše 5 minuta, a tako važan element bit će prisutan na vašoj stranici. Ako imate bilo kakvih pitanja, napišite u komentarima, sigurno ću vam pomoći spojiti brojilo!

Brojač odbrojavanja online

Za one koji trebaju drugačiju vrstu brojača odbrojavanja, što je spomenuto na početku članka, postoji usluga s nevjerojatno jednostavnim načinom povezivanja. Sve što trebate učiniti je otići na web stranicu www.timegenerator.ru i odabrati jedan od predloženih mjerača vremena.

Najjednostavniji i najprikladniji mjerač vremena za odbrojavanje

HTML Sat za odbrojavanje Dani Sati Minute Sekunde CSS tijelo ( text-align: center; background: #00ecb9; font-family: sans-serif; font-weight: 100; ) .countdown-title (boja: #396; font-weight: 100; veličina fonta: 40px 20px; .countdown (familija fonta: sans-serif; boja: inline-block; težina fonta: 100; poravnanje teksta: sredina; font -veličina: 30px; ) .countdown-number ( padding: 10px; border-radius: 3px; background: #00bf96; display: inline-block; ) .countdown-time (padding: 15px; border-radius: 3px; background: #00816a; display: inline-block; ) .countdown-text ( display: block; padding-top: 5px; font-size: 16px; ) Javascript funkcija getTimeRemaining(endtime) (var t = Date.parse(endtime) - Datum .parse(new Date()); var seconds((t / 1000) % 60); var minutes((t / 1000 / 60) % 60); (t / (1000 * 60). * 60)) % var days = Math.floor(t / (1000 * 60 * 60 * 24)); return ("ukupno": t, "days": days, " hours": hours, "minutes ": minute, "sekunde": sekunde ); ) funkcija initializeClock(id, endtime) ( var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = sat. querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); function updateClock() ( 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 ); ako (t.ukupno

Da bi se mjerač vremena pojavio, elementu trebate dati identifikator mjerača vremena i dodati uvjet oznaci

To je to, mjerač vremena je spreman.

opcija 2.
Brojevi za mjerač vremena bit će slika. Također u ovom timeru, osim minuta i sekundi, dostupni su sati i dani. Naš timer će odbrojavati do određenog dana.

Dizajn stranice

Odbrojavanje vremena

Za prikaz vremena koristit će se slika digits2_orange.png

Zatim pišemo js kod

var t=Date.parse(deadline)-Date.parse(new Date());
var seconds = Math.floor((t/1000) % 60);
var minute = Math.floor((t/1000/60) % 60);
var sati = Math.floor((t/(1000*60*60)) % 24);
var days = Math.floor(t/(1000*60*60*24));

$(funkcija())(
$("#counter").countdown((
slika: "pic/digits2_orange.png",
vrijeme početka: dani+":"+sati+":"+minute+":"+sekunde,
timerEnd: funkcija())(
$("#tut").html("Mjerač vremena je završio svoj rad");
}
});
});
slika - naša slika
startTime je točno vrijeme preostalo do 01.09.2017
timerEnd - što se događa kada tajmer završi; u našem slučaju, odgovarajući natpis će biti umetnut u spremnik s identifikatorom tut
Sljedeći je naš mjerač vremena

Lijevo:

Dani Sati Minute Sekunde

Formaliziramo
#sloj(
širina:600px;
poravnanje teksta: središte;
margina:0 automatski;)

#brojač(
margina:10pt auto 0 auto;
širina:414px;)

Desc(
širina:430px;
margina:0px auto;)

#dani,#sati,#minute,#sekunde(
float:lijevo;
font:13px Arial,Verdana,sans-serif;
širina:50px;
margin-desno:63px;
font-weight:bold;
boja:#000;)

#sekunde(margin-right:0px;)

CntSeparator(
veličina fonta:50px;
margina:6px 7px;
boja:#000;)
Opcija 3.
Po našem mišljenju najprikladniji. Kao i prethodni, prikazuje preostali broj dana, sati, minuta, sekundi. Ne koristi sliku za prikaz brojača.
Za rad nam je potrebna biblioteka jquery i datoteka

Dizajn stranice

Odbrojavanje vremena

// ovdje je željeni datum u formatu gggg-mm-dd hh:mm:ss
var deadline="2017-08-20 00:00:00";

00
dana

00
gledati

00
min

00
sek

$(".countdown").downCount((
datum: rok
},
funkcija())(
/* akcija nakon završetka odbrojavanja */
upozorenje("Vrijeme je isteklo!");
});

I css za izgled
.odbrojavanje(
list-style:nema;
margina:6px 0 0 0;
ispuna:0;
prikaz: blok;)

Odbrojavanje li(display: inline-block;)

/* ovdje su dani, sati, minute, sekunde */
.countdown li span(
širina:100%;
boja:#000;
font:18px Verdana;
display:inline-block;)

/* razdjelnici. I: */
.odbrojavanje li.razdjelnik (
boja:#000;
font:16px Verdana;
okomito poravnanje:vrh;)

Odbrojavanje li div(
margina:0;
boja: #a7abb1;
font: 8pt Verdana;)

Mrežni mjerač vremena omogućit će vam praćenje vremena prije raznih događaja - čak i ako se radi o kuhanju jaja. Uz tajmer za odbrojavanje sigurno nećete propustiti pravi trenutak.

Da biste postavili mjerač vremena, trebate kliknuti na gumb "Postavi mjerač vremena" i odrediti potrebno vrijeme (sati, minute i sekunde) u skočnom prozoru ili možete odabrati da odredite određeni datum i vrijeme za mjerenje vremena požar nakon nekoliko dana. Ako trebate obavijestiti zvukom kada dođe određeno vrijeme, odaberite željenu melodiju s popisa (možete slušati svaku melodiju). Također možete odrediti poruku koja će se prikazati na zaslonu kada se aktivira mjerač vremena. Nakon što unesete sve potrebne podatke, kliknite na “Start” za pokretanje mrežnog mjerača vremena.

Imajte na umu da za rad mrežnog mjerača vremena sa zvukom na vašem računalu ili telefonu, glasnoća zvučnika mora biti uključena (na telefonu morate provjeriti je li zvuk "Mediji" postavljen na željenu razinu)! Ako ne trebate svirati melodiju, možete poništiti potvrdni okvir "Timer call". U tom slučaju bit će prikazana samo poruka.

Da bi online mjerač vremena ispravno radio, NEMA potrebe za stalnom internetskom vezom, ali NEĆE raditi ako je preglednik zatvoren ili je računalo isključeno/u stanju mirovanja.