|
|
Posted on 11/14/2014 6:13:17 PM
|
|
|
|
[mw_shl_code=css,true] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electronic clock</title>
</head>
<style type="text/css">
*{margin: 0; padding: 0; list-style: none}
body{background-color: #D7154A; font-family: 'Microsoft Yahei'}
.demo{width: 330px; height: 100px; border: 3px solid #fff; margin: 200px auto; line-height: 100px; text-align: center; color: #fff; font-size: 50px; font-weight: 600; position: relative; overflow: hidden; }
.size{width: 100px; height: 100px; float: left; }
.pointer{width: 10px; height: 100px; float: left; }
.bottom{width: 200px; height: 100px; text-align: center; margin: 0 auto; color: #fff}
#next-h{position: absolute; width: 100px; height: 100px; left: 0px; top: 100px; }
#next-m{position: absolute; width: 100px; height: 100px; left: 110px; top: 100px; }
#next-s{position: absolute; width: 100px; height: 100px; left: 220px; top: 100px; }
</style>
<body>
<div class="demo">
<div id="hour" class="size"></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"> Wusoft Forum</div>
</body>
<script type="text/javascript">
Get the current time
var date=new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
Get the DOM of the time that is being displayed
var ohour=document.getElementById("hour");
var ominute=document.getElementById("minute");
var osecond=document.getElementById("second");
Time initialization
function init(){
ohour.innerHTML=fill(hour);
ominute.innerHTML=fill(minute);
osecond.innerHTML=fill(second);
}
init();
Get the hidden DOM, here the DOM is to show the next time
var nhour=document.getElementById("next-h");
var nminute=document.getElementById("next-m");
var nsecond=document.getElementById("next-s");
Timer controls the change in time
setInterval(function(){
if(second==60){
second=0;
Add 1 to the number of minute hands
if(minute==60){
minute=0;
Hour +1
if(hour==24){
hour=0;
}
Shown in the box of the shadow hide
nhour.innerHTML=fill(hour);
nhour++;
Call the floating function
move(nhour,ohour);
The box also needs to be reset
nhour.style.top="100px";
}
Shown in the box of the shadow hide
nminute.innerHTML=fill(minute);
minute++;
Call the floating function
move(nminute,ominute);
The box also needs to be reset
nminute.style.top="100px";
}else{
second++;
}
nsecond.innerHTML=fill(second);
}, 1000)
The next second the dom moves upwards
Parameter 1: The box to be moved
Parameter 2: The box that finally shows the time
function 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)
}
Is there a change in the listening time?
var old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
move(nsecond,osecond);
nsecond.style.top="100px";
old=nsecond.innerHTML;
}
}, 1)
Auxiliary function to obtain attribute values
function getStyle(obj,style){
var attr=window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
Remove the unit px
attr=attr.slice(0, -2);
return parseInt(attr);
}
If the length of time is 1 bit, 0 is added in front
function fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
return s;
}else{
return str;
}
}
</script>
</html>[/mw_shl_code]
|
Previous:CSS3 Making Sharingan (Animation)Next:The Matrix: The Matrix Revolution
|
