[mw_shl_code=css, sant] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elektronisk klocka</title>
</head>
<style type="text/css">
*{marginal: 0; utfyllnad: 0; liststil: ingen}
body{background-color: #D7154A; font-familj: 'Microsoft Yahei'}
.demo{width: 330px; Höjd: 100px; Kant: 3 px solid #fff; marginal: 200 px automat; linjehöjd: 100px; text-align: center; färg: #fff; Teckenstorlek: 50px; teckensnittsvikt: 600; Position: Släkt; överflöd: dolt; }
.size{width: 100px; Höjd: 100px; flotta: vänster; }
.pointer{width: 10px; Höjd: 100px; flotta: vänster; }
.bottom{width: 200px; Höjd: 100px; text-align: center; marginal: 0 auto; färg: #fff}
#next-h{position: absolut; bredd: 100 px; Höjd: 100px; vänster: 0 px; topp: 100px; }
#next-m{position: absolut; bredd: 100 px; Höjd: 100px; vänster: 110px; topp: 100px; }
#next-s{position: absolut; bredd: 100 px; Höjd: 100px; vänster: 220px; topp: 100px; }
</style>
<body>
<div class="demo">
<div id="timme" klass="storlek"></div>
<div id="next-h"></div>
<div class="pointer">:</div>
<div id="minut" klass="storlek"></div>
<div id="next-m"></div>
<div class="pointer">:</div>
<div id="andra" klass="storlek"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Wusoft Forum</div>
</body>
<script type="text/javascript">
Få aktuell tid
var date=nytt Datum();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Få DOM för den tid som visas
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Tidsinitialisering
funktion init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Skaffa den dolda DOM:en, här är DOM:en för att visa nästa gång
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Timern styr tidsändringen
setInterval(function(){
if(second==60){
second=0;
Lägg till 1 på antalet minutvisare
if(minute==60){
minut=0;
Timme +1
if(hour==24){
timme=0;
}
Visas i skuggskinnets låda
nhour.innerHTML=fill(hour);
nhour++;
Kalla den flytande funktionen
flytta(nhour,ohour);
Lådan behöver också återställas
nhour.style.top="100px";
}
Visas i skuggskinnets låda
nminute.innerHTML=fill(minute);
minut++;
Kalla den flytande funktionen
move(nminute, ominute);
Lådan behöver också återställas
nminute.style.top="100px";
}annars{
andra++;
}
nsecond.innerHTML=fill(second);
}, 1000)
Nästa sekund rör sig domen uppåt
Parameter 1: Lådan som ska flyttas
Parameter 2: Rutan som slutligen visar tiden
funktion move(obj,show){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top")-1+'px';
if(getStyle(obj,"top")<=0){
clearInterval(timer);
show.innerHTML=obj.innerHTML;
}
}, 1)
}
Har lyssnartiden ändrats?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
flytt(nsekund,osekund);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Hjälpfunktion för att erhålla attributvärden
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Ta bort enheten px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Om tidslängden är 1 bit läggs 0 till framför
funktion fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
Returnera S;
}annars{
Återvänd styrka;
}
}
</script>
[/</html>mw_shl_code]
|
Publicerad på 2014-11-14 18:13:17
|
|
|
|
