Saluttout le monde,dansCeciTutorialJ’aiWantedÀcréerunsimpleDigitalhorlogequiafficheleDateettemps,avecleAidedejQueryscriptetCSS3,Il afacileÀcomprendrelediversMéthodesutilisé.
<>Class = « c1 » > HTML
Lebalisageestvraimentsimpleetflexibleets’adapteÀde nombreuxpossiblescénariosvouspourraitrencontre.Créerundiv« l’horloge »créerun autredivID« Date »Ilseracontiennent desnotredonnées,Enfindéfinitunnon triéelistequiseracontiennent desleheure,minutesetsecondes.
< divClass = « horloge » >
< divID = « Date » >< / div >
< ul >
< liID = « heures » >< /li >
< liID = « point » > : < /li >
< liID = « min » >< /li >
< liID = « point » > : < /li >
< liID = « sec » >< /li >
/UL >
/div >
Lemise en plisesttrèssimple,vouspeutcréerstylevoustiens,Ceciestjusteunmodèlepourvous.
/*Ifvoustiensvouspeututilisationtype de police*/{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') ;police-poids :normal ;style de police :normal ;}
.Container{Largeur:960px ;marge :0Auto ;débordement :caché ;}
.Clock{Largeur:800px ;marge :0Auto ;Rembourrage :30px ;bordure :1pxsolide#333 ;Couleur:#fff ;}
#Date{font-family :« BebasNeueRegular »,Arial,Helvetica,sans-serif ;taille de la police :36px ;text-align :Centre ;text-shadow :005px#00c6ff ;}
UL{Largeur:800px ;marge :0Auto ;Rembourrage :0px ;liste-style :aucun ;text-align :Centre ;}
ULLi{Affichage :Inline ;taille de la police :10em ;text-align :Centre ;font-family :« BebasNeueRegular »,Arial,Helvetica,sans-serif ;text-shadow :005px#00c6ff ;}
#point{position :relative ;-moz-animation :MyMove1 sfacilitéinfinie ;-webkit-animation :MyMove1 sfacilitéinfinie ;padding-left :10px ;padding-right :10px ;}
/*SimpleAnimation*/MyMove{0 %{opacité :1.0 ;text-shadow :0020px#00c6ff ;}
50 %{opacité :0 ;text-shadow :aucun ;}
100 %{opacité :1.0 ;text-shadow :0020px#00c6ff ;}}
MyMove{0 %{opacité :1.0 ;text-shadow :0020px#00c6ff ;}
50 %{opacité :0 ;text-shadow :aucun ;}
100 %{opacité :1.0 ;text-shadow :0020px#00c6ff ;};}
<>Class = « c2 » >jQueryLepremièreétapeestÀappellejQueryfichier.
< scripttype = « text/javascript »src = « http://code.jquery.com/jquery-1.6.4.min.js » >
CréerunNouveauscriptbaliseetInsérerlecode.
< scripttype = « text/javascript » >$(document).ready(function(){//Créerdeuxvariableaveclenoms dedelemoisetjoursdansunTableauvarmonthNames=[« Janvier »,« Février »,« Marche »,« Avril »,« Peut »,« Juin »,« Juillet »,« Août »,« Septembre »,« Octobre »,« Novembre »,« Décembre »];vardayNames =["Dimanche", « Monday », « Mardi », « Mercredi », « Jeudi », « Vendredi », « Samedi »]
//CréerunnewDate()objetvarNouvelle_date=NouveauDate() ;//ExtraitlecoursDateDeDateobjetnewDate.setDate(newDate.getDate()) ;//Sortielejour,date,moisetannée$(' #Date').html(dayNames[newDate.getDay()]+""+newDate.getDate()+''+monthNames[newDate.getMonth()]+''+newDate.getFullYear()) ;
setInterval)function(){//CréerunnewDate()objetetextraitlesecondesdelecourstempssurledes visiteursvarsecondes=NouveauDate().getSeconds() ;//AjouterunmenantzéroÀsecondesvaleur$("#sec").html ()secondes<10?« 0 »:"")+secondes) ;}, 1000) ;setInterval)function(){//CréerunnewDate()objetetextraitleminutesdelecourstempssurledes visiteursvarminutes=NouveauDate().getMinutes() ;//AjouterunmenantzéroÀleminutesvaleur$("#min").html ()minutes<10?« 0 »:"")+minutes) ;}, 1000) ;setInterval)function(){//CréerunnewDate()objetetextraitleheuresdelecourstempssurledes visiteursvarheures=NouveauDate().getHours() ;//AjouterunmenantzéroÀleheuresvaleur$("#hours").html ()heures<10?« 0 »:"")+heures) ;},1000) ;});
<>Class = « c1 » > leLogique
NouveauDate()
CréeunNouveauDateobjetaveclevaleurdelecoursDateettempssurleNavigateurPC.
setDate()etgetDate()
setDate()méthodedéfinitleJournéedelemois(à partir de1À(31),selonÀlocaltemps,tout enlegetDate()méthoderetourneleJournéedelemois(à partir de1À31)pourlespécifiédate,selonÀlocaltemps.getSeconds(),getMinutes()etgetHours()
CesMéthodespermettre àÀextraitlesecondes,minutesetheuresdelecourstempssurleNavigateurPC.(secondes<10?« 0 »:"")+secondes)
AjouterunmenantzéroÀlesecondesvaleur,lemêmes’appliquepourleminutesetheures.Le?et:symbolesutiliséau-dessus decomprendleternaireopérateur.Ceciestunspécialopérateurquiretournelevaleuravantledeux pointsIfleconditionavantlerequête(?)estvrai,oulevaleuraprèsledeux pointsIfleconditionestfaux.
setIntervalfonction
setIntervalestunnormeJavaScriptfonction,paspartiedejQuery.VousappelIlavecunfonctionÀexécuteretunpériodedansmillisecondes.
