現在時刻をデジタル時計風に刻々と表示する

ここでは、秒単位の時刻を画像を用いてデジタル風に表示します。画像表示には、CSSストライプ技術を利用しています。

<script type="text/javascript">
var gDateJSObj;
function viewDate(){
	var argv=['DIGITAL_CLOCK_HOUR1','DIGITAL_CLOCK_HOUR0','DIGITAL_CLOCK_MIN1','DIGITAL_CLOCK_MIN0','DIGITAL_CLOCK_SEC1','DIGITAL_CLOCK_SEC0'];
	gDateJSObj = new DateJS();
	gDateJSObj.dspDigitalClock(argv);
}
function hiddenDate(){
	gDateJSObj.stopDigitalClock();
}
</script>

<script type="text/javascript" src="/AJAX/prototype.js" charset="utf-8"></script>
<script type="text/javascript">
var DateJSBase = {
    Version: '2.0.0',
    Description: '日付・時刻を刻々と表示する、日付を元に画像の表示/非表示'
};
//----------------------------------------------
// prototype.js 
var DateJS = Class.create(DateJSBase, {
    Version: '2.3.a',
    _date: {},               // テンポラリ用オブジェクト
    _classNames: ['zero','one','two','three','four','five','six','seven','eight','nine'],
    // コンストラクタ
    initialize: function() {
        this.NowTimeTitlebarCount=0;
        this.intervalNowTimeOnTitlebarID=0;
    },
    //--------------------------------
    // デジタル時計（１）時分秒
    dspDigitalClock: function (elements){
        elements = $(elements);
        if (AugusAjax.Browser.Trident){
            // IE の場合は、第三引数以降が利用できないので、無名関数で、呼び出せばよい
            this.intervalDigitalClock = setInterval(function () { this._getDigitalClock(elements); }.bind(this),999);
        }
        else
            this.intervalDigitalClock = setInterval(this._getDigitalClock.bind(this), 999, elements);
    },
    _getDigitalClock: function (elements) {
        // １時間経過したら停止する
        if (this.DigitalClockCount++ >= 3600000) {  // 60*60*1000
            this.stopDigitalClock ();
            alert(gAlertStr[0]);
        }
        this._date.now = new Date();
        var nPos=0;
        var n=0;
        var element;
        for (var i=0; i<elements.length; i++) {
            switch(i){
              case 0:
              case 1:
                n = String(this._date.now.get0Hours());
                break;
              case 2:
              case 3:
                n = String(this._date.now.get0Minutes());
                break;
              case 4:
              case 5:
                n = String(this._date.now.get0Seconds());
                break;
            }
            (i%2)?  nPos=n.charAt(1) : nPos=n.charAt(0);
            element = getEl(elements[i]);
            element.className = this._classNames[nPos];
        }
        delete this._date.now;
    },
    stopDigitalClock: function () {
        clearInterval (this.intervalDigitalClock);
    }
});
// End of DateJS

//  $HTML(element,str)     getElementById(element).innerHTML = str;

</script>

 

IT用語辞典

Copyright (c) 2006-2011. T.Augustine.