サンプル>無駄に凝ったデジタル時計(WinIE)

無駄に凝ったデジタル時計(WinIE)

2005/09/30

凝ったとはいえないかもしれないが、一応無意味に凝ったデジタル時計スクリプト

View

source

ソースコード。UAでブラウザを判定すると、OperaがIE判定になってエラーになりかねないのでIE独自機能をサポートしているかどうかで判定。

HTML

<div style="position:relative;width:80%;height:3em;background:#efefef;font-size:2em;">
<p id="clock2" style="font-family:Georgia;position:absolute;left:0em;top:0em;filter:Alpha(opacity=0);">--</p>
<p id="clock1" style="font-family:Georgia;position:absolute;left:0em;top:0em;filter:Alpha(opacity=100);">--</p>
</div>
<script type="text/javascript">
<!--
clock();
//-->
</script>

JavaScript(clock.js)

var yobi = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var WinIE5 = false;
document.writeln('<!--[if gte IE 5]>\n<script>\n<!--\nWinIE5 = true;\n//-->\n</script>\n<![endif]-->');

clock = function(){
        
        //時間取得　現在時刻と1秒後の時刻
        var now = new Date();
        var now2 = new Date();
        now2.setTime(now2.getTime()+1000);
        
        //現在時刻を編集
        var y = now.getFullYear();
        var m = now.getMonth() + 1; if(m < 10)m ="0"+m;
        var d = now.getDate();      if(d < 10)d = "0"+d;
        var yo = yobi[now.getDay()];
        var h = now.getHours();     if(h < 10)h = "0"+h;
        var n = now.getMinutes();   if(n < 10)n = "0"+n;
        var s = now.getSeconds();   if(s < 10)s = "0"+s;        
        var now_timestr1 = y+"/"+m+"/"+d+"("+yo+")"+h+":"+n+":"+s;
        
        //1秒後の時刻を編集
        var y2 = now2.getFullYear();
        var m2 = now2.getMonth() + 1; if(m2 < 10)m2 ="0"+m2;
        var d2 = now2.getDate();      if(d2 < 10)d2 = "0"+d2;
        var yo2 = yobi[now2.getDay()];
        var h2 = now2.getHours();     if(h2 < 10)h2 = "0"+h2;
        var n2 = now2.getMinutes();   if(n2 < 10)n2 = "0"+n2;
        var s2 = now2.getSeconds();   if(s2 < 10)s2 = "0"+s2;
        var now_timestr2 = y2+"/"+m2+"/"+d2+"("+yo2+")"+h2+":"+n2+":"+s2;
        
        var c_1 = document.getElementById("clock1");
        var c_2 = document.getElementById("clock2");
        c_1.innerHTML = now_timestr1;
        c_2.innerHTML = now_timestr2;
        //フェードイン効果関数呼び出し
        FadeClock(0);
}


FadeClock = function(cnt){
        var n_cnt = cnt+1;
        var c_1 = document.getElementById("clock1");
        var c_2 = document.getElementById("clock2");
        
        if(WinIE5){
                //IE
                c_1.filters["Alpha"].Opacity = 100-10*n_cnt;
                c_2.filters["Alpha"].Opacity = 10*n_cnt;
        }else{
                //IE以外
                c_2.style.color="#efefef";
        }
        
        if(n_cnt<10)setTimeout("FadeClock("+(n_cnt)+")",100);
        else clock();
}