CSS JQUERY klockan

Hej alla, i denna tutorial jag ville skapa en enkel digital klocka som visar datum och tid, med hjälp av jQuery script och CSS3, det är lätt att förstå de olika metoder som används.

HTML

Markeringen är verkligen enkel och flexibel och anpassar sig till många tänkbara scenarier som du kan stöta på. En div "klocka", skapa en annan div id "Datum" den kommer att innehålla våra data, slutligen definierar en oordnad lista som innehåller den timme, minuter och sekunder.

< div class = "klocka" >

< div id = "Datum" >< / div >
< ul >
< li-id = "timmar" >< /li >
< li-id = "punkt" >: < /li >
< li-id = "min" >< /li >
< li-id = "punkt" >: < /li >
< li-id = "SEK" >< /li >
/UL >
/div >

CSS

Styling är mycket enkel, kan du skapa stil du vill, detta är bara en mall för dig.

/ * Om du vill kan du använda font-face * / {font-family: 'BebasNeueRegular', src: url('BebasNeue-webfont.eot'), src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal, font-style: normal;}

.container {bredd: 960px; marginal: 0 auto; overflow: hidden;}

.Clock {bredd: 800px; marginal: 0 auto; padding: 30px; border: 1px solid #333; färg: #fff;}

#Date {font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size: 36px; text-align: center; text-shadow: 0 0 5px #00c6ff;}

UL {bredd: 800px; marginal: 0 auto; padding: 0px; list-style: none; text-align: center;}

ul li {Visa: inline; font-size: 10em; text-align: center; font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; text-shadow: 0 0 5px #00c6ff;}

#point {position: släkting; -moz-animering: mymove 1s lätthet oändlig; -webkit-animering: mymove 1s underlätta oändlig; padding-vänster: 10px; padding-höger: 10px;}

/ * Enkel Animation * / mymove {0% {opacitet: 1.0; text-shadow: 0 0 20px #00c6ff;}

50% {opacitet: 0; text-shadow: none;}

100% {opacitet: 1.0; text-shadow: 0 0 20px #00c6ff;}}

mymove {0% {opacitet: 1.0; text-shadow: 0 0 20px #00c6ff;}

50% {opacitet: 0; text-shadow: none;}

100% {opacitet: 1.0; text-shadow: 0 0 20px #00c6ff;}; }

jQuery

Det första steget är att ringa den jQuery filen.

< script type = "text/javascript" src = "http://code.jquery.com/jquery-1.6.4.min.js" >

Skapa en ny skripttagg och infoga kod.

< script type = "text/javascript" > $(document).ready(function() {/ / skapa två variabel med namn på månader och dagar i en array var monthNames = ["Januari", "Februari", "Mars", "April", "kan", "Juni", "Juli", "Augusti", "September", "Oktober", "November", "December"]; var dayNames = ["Söndag", "Monday", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag"]

Skapa en newDate() objektet var hänsyn = nya Date(); Extrahera det aktuella datumet från datum objektet newDate.setDate(newDate.getDate()); Utgång den dag, datum, månad och år $(' #Date').html(dayNames[newDate.getDay()] + "" + newDate.getDate() + "" + monthNames[newDate.getMonth()] + "" + newDate.getFullYear());

setInterval (function() {/ / skapa ett newDate()-objekt och extrahera sekunder av den aktuella tiden på besökarens var sekunder = nya Date().getSeconds(); / / Lägg till en inledande nolla till sekunder värde $("#sec").html ((sekunder < 10? "0": "") + sekunder);}, 1000); setInterval (function() {/ / skapa ett newDate()-objekt och extrahera protokollet från den aktuella tiden på besökarens var minuter = nya Date().getMinutes(); / / Lägg till en inledande nolla till minuter värde $("#min").html ((minuter < 10? "0": "") + minuter);}, 1000); setInterval (function() {/ / skapa ett newDate()-objekt och extrahera timmarna av den aktuella tiden på besökarens var timmar = nya Date().getHours(); / / Lägg till en inledande nolla till timmar värde $("#hours").html ((timmar < 10? "0": "") + timmar);}, 1000);});

Logiken
nya datum()

Skapar ett nytt Date-objekt med värdet av det aktuella datumet och tiden i webbläsaren PC.

setDate() och getDate()

setDate() metoden anger dag i månaden (från 1 till 31), enligt lokal tid, medan getDate() metoden returnerar dagen i månaden (från 1 till 31) för det angivna datumet, enligt lokal tid. getSeconds(), getMinutes() och getHours()

Dessa metoder kan extrahera sekunder, minuter och timmar av den aktuella tiden på webbläsaren PC. (sekunder < 10? "0": "") + sekunder)

Lägga till en inledande nolla sekunder värde, detsamma gäller för minuter och timmar. Den? och: symbolerna ovan består de ternär operatorn. Detta är en särskild operatör som returnerar värdet före kolontecknet om skick innan frågan (?) är sant, eller värdet efter kolonet om villkoret är falskt.

setInterval funktion

setInterval är en standard JavaScript-funktion, inte en del av jQuery. Du kallar det med en funktion för att köra och en tid i millisekunder.