[mw_shl_code=css,adevărat] <!DOCTYPE html>
<html lang="en">
<head>
<meta carset="UTF-8">
<title>Ceas electronic</title>
</head>
<style type="text/css">
*{margine: 0; Umplutură: 0; stil-listă: niciunul}
corp{culoare-fundal: #D7154A; font-family: 'Microsoft Yahei'}
.demo{lățime: 330px; înălțime: 100px; bordură: 3px solid #fff; marjă: 200px auto; Înălțimea liniei: 100px; text-align: centru; Culoare: #fff; dimensiune font: 50px; greutate-font: 600; Poziție: relativă; Overflow: Ascuns; }
.size{width: 100px; înălțime: 100px; plutitoare: stânga; }
.pointer{lățime: 10px; înălțime: 100px; plutitoare: stânga; }
.bottom{lățime: 200px; înălțime: 100px; text-align: centru; marjă: 0 auto; culoare: #fff}
#next-h{poziție: absolută; lățime: 100px; înălțime: 100px; stânga: 0px; top: 100px; }
#next-m{poziție: absolută; lățime: 100px; înălțime: 100px; stânga: 110px; top: 100px; }
#next-s{poziție: absolută; lățime: 100px; înălțime: 100px; rămasă: 220px; top: 100px; }
</style>
<body>
<div class="demo">
<div id="oră" clasă="mărime"></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="second" class="size"></div>
<div id="next-s"></div>
</div>
<div class="bottom"> Forumul Wusoft</div>
</body>
<script type="text/javascript">
Obține ora actuală
var date=data nouă();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Obține DOM al momentului afișat
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Inițializare în timp
funcția init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Ia DOM-ul ascuns, aici DOM este să-l arate data viitoare
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Cronometrul controlează schimbarea timpului
setInterval(function(){
if(second==60){
al doilea=0;
Adaugă 1 la numărul de ace de minute
if(minute==60){
minut=0;
Oră +1
if(oră==24){
oră=0;
}
Arătată în cutia ascunzii de umbră
nhour.innerHTML=fill(hour);
nhour++;
Apelați funcția flotantă
mișcă-te (oră, ooră);
Cutia trebuie de asemenea resetată
nhour.style.top="100px";
}
Arătată în cutia ascunzii de umbră
nminute.innerHTML=fill(minute);
minute++;
Apelați funcția flotantă
mișcă-te (nminut, ominut);
Cutia trebuie de asemenea resetată
nminute.style.top="100px";
}else{
al doilea++;
}
nsecond.innerHTML=fill(second);
}, 1000)
În secunda următoare, domul se mișcă în sus
Parametrul 1: Cutia care urmează să fie mutată
Parametrul 2: Cutia care arată în sfârșit ora
funcția 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)
}
Există o schimbare în timpul de ascultare?
var vechi=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
mișcă-te(nsecundă, secundă);
nsecond.style.top="100px";
vechi=nsecond.innerHTML;
}
}, 1)
Funcție auxiliară pentru obținerea valorilor atribuților
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Scoate unitatea px
atrac=atr.slice(0, -2);
return parseInt(attr);
}
Dacă durata este 1 bit, 0 se adaugă în față
funcția fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
return s;
}else{
returnează forță;
}
}
</script>
[/</html>mw_shl_code]
|
Postat pe 14.11.2014 18:13:17
|
|
|
|
