[mw_shl_code=css, правда] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Електронний годинник</title>
</head>
<style type="text/css">
*{margin: 0; наповнення: 0; List-style: none}
body{фоновий колір: #D7154A; font-family: 'Microsoft Yahei'}
.demo{ширина: 330px; висота: 100px; Рамка: 3px суцільний #fff; margin: 200px auto; висота лінії: 100px; Вирівнювання тексту: центр; колір: #fff; розмір шрифту: 50px; товщина шрифту: 600; позиція: відносна; overflow: прихований; }
.розмір{ширина: 100px; висота: 100px; Плаває: ліворуч; }
.pointer{ширина: 10px; висота: 100px; Плаває: ліворуч; }
.bottom{ширина: 200px; висота: 100px; Вирівнювання тексту: центр; margin: 0 auto; колір: #fff}
#next-h{позиція: абсолютна; ширина: 100px; висота: 100px; ліворуч: 0px; верх: 100px; }
#next-m{позиція: абсолют; ширина: 100px; висота: 100px; ліворуч: 110px; верх: 100px; }
#next-s{позиція: абсолютна; ширина: 100px; висота: 100px; ліворуч: 220px; верх: 100px; }
</style>
<body>
<div class="demo">
<div id="година" клас="розмір"></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="другий" клас="розмір"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Wusoft Forum</div>
</body>
<script type="text/javascript">
Отримайте поточний час
var date=нова Дата();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Отримайте DOM часу, який відображається
var ohour=document.getElementById("година");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Ініціалізація за часом
функція init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Візьміть прихований DOM, ось DOM, щоб показати наступного разу
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Таймер керує зміною часу
setInterval(function(){
if(second==60){
другий = 0;
Додайте 1 до кількості хвилинних стрілок
if(minute==60){
хвилина=0;
Година +1
if(година==24){
година=0;
}
Показано в коробці тіньового укриття
nhour.innerHTML=fill(hour);
nhour++;
Викликаємо плаваючу функцію
move (nhour, ohour);
Коробку також потрібно скинути
nhour.style.top="100px";
}
Показано в коробці тіньового укриття
nminute.innerHTML=fill(minute);
хвилина++;
Викликаємо плаваючу функцію
рух(nminute,ominute);
Коробку також потрібно скинути
nminute.style.top="100px";
}else{
другий++;
}
nsecond.innerHTML=fill(second);
}, 1000)
Наступної секунди домінант рухається вгору
Параметр 1: Коробка, яку потрібно перемістити
Параметр 2: Вікно, яке нарешті показує час
function 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(function(){
if(old!=nsecond.innerHTML){
рух(nsecond, osecond);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Допоміжна функція для отримання значень атрибутів
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Видаліть блок px
attr=attr.slice(0, -2);
return parseInt(attr);
}
Якщо тривалість часу дорівнює 1 біту, спереду додається 0
функція fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
повернення s;
}else{
Зворотна сила;
}
}
</script>
[/</html>mw_shl_code]
|
Опубліковано 14.11.2014 18:13:17
|
|
|
|
