[mw_shl_code=css,αληθές] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ηλεκτρονικό ρολόι</title>
</head>
<style type="κείμενο/css">
*{περιθώριο: 0; επένδυση: 0; στυλ λίστας: κανένα}
χρώμα σώματος: #D7154A; font-family: 'Microsoft Yahei'}
.demo{πλάτος: 330px; ύψος: 100 εικονοστοιχεία; περίγραμμα: 3px στερεά #fff; περιθώριο: 200px αυτόματο; ύψος γραμμής: 100 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; χρώμα: #fff; μέγεθος γραμματοσειράς: 50 εικονοστοιχεία; βάρος γραμματοσειράς: 600; θέση: σχετική· υπερχείλιση: κρυφό; }
.size{πλάτος: 100px; ύψος: 100 εικονοστοιχεία; float: αριστερά; }
.pointer{πλάτος: 10px; ύψος: 100 εικονοστοιχεία; float: αριστερά; }
.bottom{πλάτος: 200px; ύψος: 100 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; περιθώριο: 0 αυτόματο; χρώμα: #fff}
#next-h{θέση: απόλυτη; πλάτος: 100 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; αριστερά: 0px; κορυφή: 100 εικονοστοιχεία; }
#next-m{θέση: απόλυτη; πλάτος: 100 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; αριστερά: 110px; κορυφή: 100 εικονοστοιχεία; }
#next-s{θέση: απόλυτη; πλάτος: 100 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; αριστερά: 220 εικονοστοιχεία; κορυφή: 100 εικονοστοιχεία; }
</style>
<body>
<div class="demo">
<div id="ώρα" class="μέγεθος"></div>
<div id="επόμενο-h"></div>
<div class="δείκτης">:</div>
<div id="λεπτό" class="μέγεθος"></div>
<div id="επόμενο-m"></div>
<div class="δείκτης">:</div>
<div id="δεύτερη" class="μέγεθος"></div>
<div id="επόμενο-s"></div>
</div>
<div class="bottom"> Φόρουμ της Wusoft</div>
</body>
<script type="κείμενο/javascript">
Λήψη της τρέχουσας ώρας
var date=νέα ημερομηνία();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Λάβετε το DOM της ώρας που εμφανίζεται
var ohour=document.getElementById("ώρα");
var ominute=document.getElementById("λεπτό");
var osecond=document.getElementById("δεύτερο");
Αρχικοποίηση χρόνου
συνάρτηση init(){
ohour.innerHTML=fill(ώρα);
ominute.innerHTML=fill(λεπτό);
osecond.innerHTML=fill(δεύτερο);
}
init();
Αποκτήστε το κρυφό DOM, εδώ το DOM θα εμφανιστεί την επόμενη φορά
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Ο χρονοδιακόπτης ελέγχει την αλλαγή της ώρας
setInterval(συνάρτηση(){
if(δεύτερο==60){
δευτερόλεπτο=0;
Προσθέστε 1 στον αριθμό των λεπτοδεικτών
if(λεπτό==60){
λεπτό=0;
Ώρα +1
if(hour==24){
ώρα=0;
}
Εμφανίζεται στο πλαίσιο του απόκρυψη σκιάς
nhour.innerHTML=fill(ώρα);
nhour++;
Καλέστε την αιωρούμενη συνάρτηση
κίνηση (nhour,ohour);
Το κουτί πρέπει επίσης να μηδενιστεί
nhour.style.top="100px";
}
Εμφανίζεται στο πλαίσιο του απόκρυψη σκιάς
nminute.innerHTML=fill(λεπτό);
λεπτό++;
Καλέστε την αιωρούμενη συνάρτηση
κίνηση(nminute,ominute);
Το κουτί πρέπει επίσης να μηδενιστεί
nminute.style.top="100px";
}else{
δεύτερο++;
}
nsecond.innerHTML=fill(δεύτερο);
}, 1000)
Το επόμενο δευτερόλεπτο το dom κινείται προς τα πάνω
Παράμετρος 1: Το πλαίσιο που θα μετακινηθεί
Παράμετρος 2: Το πλαίσιο που δείχνει τελικά την ώρα
συνάρτηση move(obj,show){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top")-1+'px';
if(getStyle(obj,"top")<=0){
clearInterval(χρονόμετρο);
show.innerHTML=obj.innerHTML;
}
}, 1)
}
Υπάρχει αλλαγή στον χρόνο ακρόασης;
var old=0;
setInterval(συνάρτηση(){
if(old!=nsecond.innerHTML){
κίνηση(nsecond,osecond);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Βοηθητική συνάρτηση για τη λήψη τιμών χαρακτηριστικών
συνάρτηση getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[στυλ]:obj.currentStyle[στυλ];
Αφαιρέστε τη μονάδα px
attr=attr.slice(0, -2);
επιστροφή parseInt(attr);
}
Εάν το χρονικό διάστημα είναι 1 bit, προστίθεται 0 μπροστά
συνάρτηση fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
επιστροφές s;
}else{
επιστροφή str;
}
}
</script>
</html>[/mw_shl_code]
|
Δημοσιεύτηκε στις 14/11/2014 6:13:17 μ.μ.
|
|
|
|
