[mw_shl_code=CSS, 참] <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>전자 시계</title>
</head>
<style type="text/css">
*{여백: 0; 패딩: 0; 목록 스타일: 없음}
body{배경색: #D7154A; font-family: 'Microsoft Yahei'}
.demo{width: 330px; 높이: 100px; 경계선: 3px 고#fff; 마진: 200px 자동차; 라인 높이: 100px; 텍스트-정렬: 중앙; 색상: #fff; 글꼴 크기: 50px; 폰트 굵기: 600; 위치: 친척; 오버플로우: 숨겨짐; }
.size{width: 100px; 높이: 100px; 플로트: 왼쪽; }
.포인터{width: 10px; 높이: 100px; 플로트: 왼쪽; }
.bottom{width: 200px; 높이: 100px; 텍스트-정렬: 중앙; 마진: 0 자동; 색상: #fff}
#next-h{위치: 절대; 너비: 100px; 높이: 100px; 왼쪽: 0px; 상단: 100px; }
#next-m{위치: 절대; 너비: 100px; 높이: 100px; 왼쪽: 110px; 상단: 100px; }
#next-s{position: absolute; 너비: 100px; 높이: 100px; 왼쪽: 220px; 상단: 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 포럼</div>
</body>
<스크립트 유형="text/javascript">
현재 시간 확인해 보세요
var date=new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
표시된 시간의 DOM을 받아보세요
var ohour=document.getElementById("hour");
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){
second=0;
분침 수에 1을 더하세요
if(minute==60){
분=0;
시간 +1
if(hour==24){
시간=0;
}
그림자 은신처 상자에 나타난 모습
nhour.innerHTML=fill(hour);
nhour++;
floating 함수를 호출합니다
move(nhour, ohour);
박스도 리셋해야 합니다
nhour.style.top="100px";
}
그림자 은신처 상자에 나타난 모습
nminute.innerHTML=fill(minute);
분화=;
floating 함수를 호출합니다
이동(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]
|
게시됨 2014. 11. 14. 오후 6:13:17
|
|
|
|
