[mw_shl_code=css,true] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jam elektronik</title>
</head>
<style type="text/css">
*{margin: 0; bantalan: 0; list-style: none}
body{background-color: #D7154A; font-family: 'Microsoft Yahei'}
.demo{lebar: 330px; tinggi: 100px; perbatasan: 3px solid #fff; margin: 200px otomatis; tinggi baris: 100px; Menyelaraskan teks: tengah; warna: #fff; ukuran font: 50px; berat font: 600; posisi: relatif; luap: tersembunyi; }
.size{lebar: 100px; tinggi: 100px; mengapung: kiri; }
.pointer{width: 10px; tinggi: 100px; mengapung: kiri; }
.bottom{width: 200px; tinggi: 100px; Menyelaraskan teks: tengah; margin: 0 otomatis; warna: #fff}
#next-h{posisi: mutlak; lebar: 100px; tinggi: 100px; kiri: 0px; atas: 100px; }
#next-m{posisi: absolut; lebar: 100px; tinggi: 100px; kiri: 110px; atas: 100px; }
#next-s{posisi: mutlak; lebar: 100px; tinggi: 100px; kiri: 220px; atas: 100px; }
</style>
<body>
<div class="demo">
<div id="hour" class="size"></div>
<div id="next-h"></div>
<div class="penunjuk">:</div>
<div id="minute" class="size"></div>
<div id="next-m"></div>
<div class="penunjuk">:</div>
<div id="second" class="size"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Forum Wusoft</div>
</body>
<script type="text/javascript">
Dapatkan waktu saat ini
var date=new Date();
var hour=tanggal.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Dapatkan DOM waktu yang ditampilkan
var ohour=document.getElementById("jam");
var ominute=document.getElementById("menit");
var osecond=document.getElementById("kedua");
Inisialisasi waktu
fungsi init(){
ohour.innerHTML=isi(jam);
ominute.innerHTML=isi(menit);
osecond.innerHTML=isi(detik);
}
init();
Dapatkan DOM tersembunyi, di sini DOM akan ditampilkan lain kali
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Pengatur waktu mengontrol perubahan waktu
setInterval(function(){
jika(detik==60){
detik = 0;
Tambahkan 1 ke jumlah jarum menit
jika(menit==60){
menit = 0;
Jam +1
jika(jam==24){
jam = 0;
}
Ditampilkan di kotak bayangan menyembunyikan
nhour.innerHTML=isi(jam);
nhour++;
Panggil fungsi mengambang
bergerak (nhour, ohour);
Kotak juga perlu diatur ulang
nhour.style.top="100px";
}
Ditampilkan di kotak bayangan menyembunyikan
nminute.innerHTML=isi(menit);
menit ++;
Panggil fungsi mengambang
bergerak (nmenit, minutu);
Kotak juga perlu diatur ulang
nminute.style.top="100px";
}else{
kedua++;
}
nsecond.innerHTML=isi(detik);
}, 1000)
Detik berikutnya dom bergerak ke atas
Parameter 1: Kotak yang akan dipindahkan
Parameter 2: Kotak yang akhirnya menunjukkan waktu
fungsi move(obj,show){
var timer=setInterval(function(){
obj.style.top=getStyle(obj,"top")-1+'px';
if(getStyle(obj,"top")<=0){
clearInterval(pengatur waktu);
show.innerHTML=obj.innerHTML;
}
}, 1)
}
Apakah ada perubahan dalam waktu mendengarkan?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
bergerak (ndetik, odetik);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Fungsi tambahan untuk mendapatkan nilai atribut
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Hapus px unit
attr=attr.irisan(0, -2);
return parseInt(attr);
}
Jika lamanya 1 bit, 0 ditambahkan di depan
fungsi fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
mengembalikan s;
}else{
mengembalikan str;
}
}
</script>
[/</html>mw_shl_code]
|
Diposting pada 14/11/2014 18.13.17
|
|
|
|
