[mw_shl_code=css,vrai] < !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horloge électronique</title>
</head>
<style type="text/css">
*{marge : 0 ; Remplissage : 0 ; style liste : aucun}
corps{couleur de fond : #D7154A ; font-family : 'Microsoft Yahei'}
.demo{width : 330px ; taille : 100px ; Bordure : 3px #fff solide ; marge : 200px auto ; Hauteur de ligne : 100px ; text-align : centre ; Couleur : #fff ; taille de police : 50px ; poids de police : 600 ; Position : relative ; Débordement : Caché ; }
.size{width : 100px ; taille : 100px ; flotteur : gauche ; }
.pointer{width : 10px ; taille : 100px ; flotteur : gauche ; }
.bottom{largeur : 200px ; taille : 100px ; text-align : centre ; marge : 0 auto ; Couleur : #fff}
#next-h{position : absolue ; largeur : 100px ; taille : 100px ; gauche : 0px ; top : 100px ; }
#next-m{position : absolue ; largeur : 100px ; taille : 100px ; gauche : 110px ; top : 100px ; }
#next-s{position : absolue ; largeur : 100px ; taille : 100px ; gauche : 220px ; top : 100px ; }
</style>
<body>
<div class="demo">
<div id="hour » class="size"></div>
<div id="next-h"></div>
<div class="pointer"> :</div>
<div id="minute » class="size"></div>
<div id="next-m"></div>
<div class="pointer"> :</div>
<div id="seconde » class="taille"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Forum Wusoft</div>
</body>
<script type="text/javascript">
Obtenez l’heure actuelle
var date=nouvelle date() ;
var hour=date.getHours() ;
var minute=date.getMinutes() ;
var second=date.getSeconds() ;
Obtenez le DOM de l’heure affichée
var ohour=document.getElementById(« hour ») ;
var ominute=document.getElementById(« minute ») ;
var osecond=document.getElementById(« second ») ;
Initialisation temporelle
fonction init(){
ohour.innerHTML=fill(hour) ;
ominute.innerHTML=fill(minute) ;
osecond.innerHTML = fill(second) ;
}
init() ;
Prends le DOM caché, voici le DOM pour le montrer la prochaine fois
var nhour=document.getElementById(« next-h ») ;
var nminute=document.getElementById(« next-m ») ;
var nsecond=document.getElementById(« next-s ») ;
Le minuteur contrôle le changement de temps
setInterval(function(){
if(second==60){
deuxième=0 ;
Ajoutez 1 au nombre d’aiguilles des minutes
if(minute==60){
minute=0 ;
Heure +1
if(hour==24){
heure=0 ;
}
Montré dans la boîte de la peau d’ombre
nhour.innerHTML=fill(hour) ;
nhour++ ;
Appelez la fonction flottante
bouger (n’hour, ohour) ;
La boîte doit aussi être réinitialisée
nhour.style.top="100px » ;
}
Montré dans la boîte de la peau d’ombre
nminute.innerHTML=fill(minute) ;
minute++ ;
Appelez la fonction flottante
bouger (nminute, ominute) ;
La boîte doit aussi être réinitialisée
nminute.style.top="100px » ;
}else{
deuxièmement++ ;
}
nsecond.innerHTML=fill(second) ;
}, 1000)
La seconde suivante, le dom monte
Paramètre 1 : La boîte à déplacer
Paramètre 2 : La boîte qui montre enfin l’heure
function move(obj,show){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top »)-1+'px' ;
if(getStyle(obj,"top »)<=0){
clearInterval(minuter) ;
show.innerHTML=obj.innerHTML ;
}
}, 1)
}
Y a-t-il un changement dans l’heure d’écoute ?
var vieux=0 ;
setInterval(function(){
if(vieux !=nsecond.innerHTML){
bouger (nseconde, oseconde) ;
nsecond.style.top="100px » ;
vieux=nsecond.innerHTML ;
}
}, 1)
Fonction auxiliaire pour obtenir des valeurs d’attribut
fonction getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style] :obj.currentStyle[style] ;
Retirez l’unité px
attr=attir.tranche(0, -2) ;
return parseInt(attr) ;
}
Si la durée est de 1 bit, 0 est ajouté devant
fonction fill(str){
var s=str.toString() ;
if(s.length==1){
s='0'+s ;
retour s ;
}else{
retour de force ;
}
}
</script>
[/</html>mw_shl_code]
|
Publié sur 14/11/2014 18:13:17
|
|
|
|
