[mw_shl_code=css,doğru] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elektronik saat</title>
</head>
<style type="text/css">
*{marjin: 0; Dolgu: 0; liste-stili: hiçbiri}
body{arka plan rengi: #D7154A; font-family: 'Microsoft Yahei'}
.demo{width: 330px; yükseklik: 100px; sınır: 3px sağlam #fff; Kayır: 200px otomatik; hat yüksekliği: 100px; metin hizalama: orta; renk: #fff; font boyutu: 50px; font-weight: 600; konum: göreli; Taşmak: gizli; }
.size{width: 100px; yükseklik: 100px; float: sol; }
.pointer{width: 10px; yükseklik: 100px; float: sol; }
.bottom{width: 200px; yükseklik: 100px; metin hizalama: orta; Kenar: 0 otomatik; Renk: #fff}
#next-h{pozisyon: mutlak; genişlik: 100px; yükseklik: 100px; sol: 0px; üst: 100px; }
#next-m{pozisyon: mutlak; genişlik: 100px; yükseklik: 100px; sol: 110px; üst: 100px; }
#next-s{pozisyon: mutlak; genişlik: 100px; yükseklik: 100px; sol: 220px; üst: 100px; }
</style>
<body>
<div class="demo">
<div id="saat" sınıf="size"></div>
<div id="next-h"></div>
<div class="işaretçi">:</div>
<div id="minute" class="size"></div>
<div id="next-m"></div>
<div class="işaretçi">:</div>
<div id="second" class="size"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Wusoft Forum</div>
</body>
<script type="text/javascript">
Mevcut zamanı alın
var date=yeni Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Gösterilen zamanın DOM'unu alın
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Zaman başlatma
function init(){
ohour.innerHTML=fill(saat);
ominute.innerHTML=fill(dakika);
osecond.innerHTML=fill(second);
}
init();
Gizli DOM'u al, işte DOM bir dahaki sefere gösterecek
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Zamanlayıcı zaman değişimini kontrol eder
setInterval(function(){
if(second==60){
second=0;
Dakika elleri sayısına 1 ekleyin
if(minute==60){
dakika=0;
Saat +1
if(saat==24){
saat=0;
}
Gölge gizinin kutusunda gösteriliyor
nhour.innerHTML=fill(saat);
nhour++;
Yüzen fonksiyonu çağırın
hareket (nhour, ohour);
Kutunun da sıfırlanması gerekiyor
nhour.style.top="100px";
}
Gölge gizinin kutusunda gösteriliyor
nminute.innerHTML=fill(dakika);
dakika++;
Yüzen fonksiyonu çağırın
hareket (ndakika, dakika);
Kutunun da sıfırlanması gerekiyor
nminute.style.top="100px";
}else{
ikinci++;
}
nsecond.innerHTML=fill(second);
}, 1000)
Bir sonraki saniye dom yukarı doğru hareket eder
Parametre 1: Taşınacak kutu
Parametre 2: Sonunda zamanı gösteren kutu
function move(obj,show){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top")-1+'px';
if(getStyle(obj,"top")<=0){
clearInterval(zamanlayıcı);
show.innerHTML=obj.innerHTML;
}
}, 1)
}
Dinleme süresinde bir değişiklik var mı?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
hareket (nsecond, osecond);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Özellik değerlerini elde etmek için yardımcı fonksiyon
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Ünite px'i çıkarın
attr=attr.dilim(0, -2);
return parseInt(attr);
}
Zaman uzunluğu 1 bitse, önüne 0 eklenir
function fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
dönüş s;
}else{
dönüş str;
}
}
</script>
[/</html>mw_shl_code]
|
Yayınlandı 14.11.2014 18:13:17
|
|
|
|
