[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}
тяло{фон-цвят: #D7154A; font-family: 'Microsoft Yahei'}
.demo{ширина: 330px; височина: 100px; бордюр: 3px плътен #fff; маргинал: 200px автоматично; височина на линията: 100px; текст-подравняване: център; цвят: #fff; размер на шрифта: 50px; Тегло на шрифта: 600; позиция: относителна; препълване: скрито; }
.size{width: 100px; височина: 100px; плаване: вляво; }
.pointer{ширина: 10px; височина: 100px; плаване: вляво; }
.bottom{ширина: 200px; височина: 100px; текст-подравняване: център; марж: 0 авто; цвят: #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("втори");
Инициализация по време
функция init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Вземи скрития 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(минута==60){
минута=0;
Час +1
if(час==24){
час=0;
}
Показано в кутията на скривалището на сенките
nhour.innerHTML=fill(hour);
nhour++;
Извикай плаващата функция
движение (nhour, ohour);
Кутията също трябва да се нулира
nhour.style.top="100px";
}
Показано в кутията на скривалището на сенките
nminute.innerHTML=fill(minute);
минута++;
Извикай плаващата функция
move(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 стар=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
move(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;
връща се;
}else{
възвръщаема сила;
}
}
</script>
[/</html>mw_shl_code]
|
Публикувано в 14.11.2014 г. 18:13:17 ч.
|
|
|
|
