ActiveDesktop_ex01

Last-modified: 2014-08-16 (土) 12:41:50 (2014d)

ActiveDesktop

番外編01 大きなデジタル時計を表示する

ActiveDesktop画像

02 デジタル時計を表示する の応用です。

ベッドサイドPCに最適な(?)全画面時計を Active Desktop によって実現します。

正直アナログ時計の方がかっこいいと思うのですが、そのへんはFlashの仕事ということで今回はパス。

動作サンプル

動作サンプル (IE(Trident)でないと正常表示できません)

HTMLソースコード

<HTML>
<HEAD>
<STYLE>
BODY{
    margin:0;
    padding:0;
    background:#000;
    text-align:center;
    overflow:hidden;
}

#borderline{
    margin:150px 0 0 0;
    padding:100px 0;
    width:100%;
    border:solid #355;
    border-width:1px 0 1px 0;
    filter:progid:DXImageTransform.Microsoft.gradient(
        startcolorstr=#000000,
        endcolorstr=#003333,
        gradienttype=0
    );
    color:#566;
}

#time{
    margin:auto;
    font-size:300px;
    line-height:250px;
    font-family:"Arial";
    }
#date{
    margin:auto;
}
#calender{
    margin:auto;
    margin-left:50px;
}
</STYLE>

<SCRIPT type="text/JScript">

var strDay = "日月火水木金土日";
var intCheckNum = false;

function displayClock(){
    var d = new Date();
    if(intCheckNum == d.getMinutes()) return;
    document.getElementById("time").innerHTML=
        dateDigitTrim(d.getHours()) + ":"+
        dateDigitTrim(d.getMinutes());
    document.getElementById("date").innerHTML=
        d.getFullYear() + "." +
        dateDigitTrim(d.getMonth()+1) + "." +
        dateDigitTrim(d.getDate()) + " ("+
        strDay.charAt(d.getDay()) + ")";
    intCheckNum = d.getMinutes();
}

//setInterval(displayClock,20000);
setInterval(displayClock,1000);

function dateDigitTrim(intTmp){
    if(intTmp<10) return "0"+intTmp;
    return intTmp;
}

</SCRIPT>
</HEAD>
<BODY onLoad="displayClock();">

<DIV id="borderline">
<DIV id="time"></DIV>
<SPAN id="date"></SPAN>
<SPAN id="calender">
<SCRIPT type="text/JScript">
//20日分のカレンダーを表示
a = new Date();
for(i=0;i<20;i++){
    b = "";
    switch(a.getDay()){
    case 0: //日曜
        b += "<SPAN style=\"color:#844\" ";
        break;
    case 6: //土曜
        b += "<SPAN style=\"color:#448\" ";
        break;
    default:
        b += "<SPAN " ;
        break;
    }
    b += "title=\""+i+"日後 … "+(a.getMonth()+1)+"月"+a.getDate()+"日\"";
    b += ">" + a.getDate() + "</SPAN>\n";
    document.write(b);
    a.setTime(a.getTime()+ 24*60*60*1000);//1日進める。(iで乗算すべきか?)
}

</SCRIPT>
</SPAN>

</DIV>

</BODY>
</HTML>

02 デジタル時計を表示する のであった時計描画タイミングの問題を修正しています。