[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; 高さ:100ピクセル; ボーダー:3ピクセルの実線 #fff; マージン:200px auto; 線高:100px; テキストアライン:中央; カラー:#fff; フォントサイズ:50px; フォントサイズ:600; 位置:親族; オーバーフロー:隠し; }
.size{width: 100px; 高さ:100ピクセル; フロート:左; }
.pointer{width: 10px; 高さ:100ピクセル; フロート:左; }
.bottom{width: 200px; 高さ:100ピクセル; テキストアライン:中央; マージン:0 オート; 色:#fff}
#next-h{position: absolute; 幅:100px; 高さ:100ピクセル; 左:0px; トップ:100ピクセル; }
#next-m{position: absolute; 幅:100px; 高さ:100ピクセル; 左:110ピクセル; トップ:100ピクセル; }
#next-s{position: absolute; 幅:100px; 高さ:100ピクセル; 左:220ピクセル; トップ:100ピクセル; }
</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=新しい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){
2 番目=0;
分針の数に1を足します
if(minute==60){
minute=0;
1時間+1
if(hour==24){
時=0;
}
影の隠れ家の箱に描かれている
nhour.innerHTML=fill(hour);
nhour++;
浮動関数を呼び出します
move(nhour,ohour);
ボックスもリセットする必要があります
nhour.style.top="100px";
}
影の隠れ家の箱に描かれている
nminute.innerHTML=fill(minute);
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 old=0;
setInterval(function(){
if(old!=nsecond.innerHTML){
move(n秒、o秒);
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が前方に加算されます
function fill(str){
var s=str.toString();
if(s.length==1){
s='0'+s;
返すs;
}else{
筋力を戻す;
}
}
</script>
[/</html>mw_shl_code]
|
掲載地 2014/11/14 18:13:17
|
|
|
|
