clock

Readme
JavaScript 164 lines
HTML 26 lines
CSS 72 lines

clock
jQuery v2.1.0

// forked from yasu0519's "nict clock" http://jsdo.it/yasu0519/nictClock
/*

Constants

*/
var NICT_URLS = [
//    "https://ntp-a1.nict.go.jp/cgi-bin/jsont",
    "http://ntp-a1.nict.go.jp/cgi-bin/jsont",
//    "https://ntp-b1.nict.go.jp/cgi-bin/jsont",
    "http://ntp-b1.nict.go.jp/cgi-bin/jsont"
];
var STRING_NUM = 16;    //  日付部分の文字数（この数からフォントサイズを決定する）
/*

functions

*/
/***********************************************
    Dateを拡張する
*/
(function() {
    this.getDayJP = function(){
        var arr = ["日","月","火","水","木","金","土"];
        return arr[this.getDay()];
    };
    this.yyyymmdd = function() {
        var arr = [ this.getFullYear(),
                    this.getMonth() + 1,
                    this.getDate() ];
        return arr.join(".");
    };
    this.hh = function() {
        return ("0"+this.getHours()).slice(-2);
    };
    this.mm = function() {
        return ("0"+this.getMinutes()).slice(-2);
    };
    this.ss = function() {
        return ("0"+this.getSeconds()).slice(-2);
    };
    this.add = function(ms) {
        return new Date(this.getTime() + ms);
    };
    this.rgbArray = function() {
        return [ this.getMinutes(), 100 - (this.getSeconds() + this.getDate()), 100 - this.getHours() ];
    };
    this.rgb = function() {
        return "rgb("+this.rgbArray().join(",") + ")";
    };
    this.rgbReverse = function() {
        var arr = this.rgbArray().map(function(e){ return 255 - e; });
        return "rgb("+arr.join(",") + ")";
    };
}).apply(Date.prototype);
/*

jQuery

*/
$(function(){
    //  ログ出力
    var outputLog = function(str) {
        var $logs = $('#log>div');
        var len = $logs.length;
        if (len > 10) { // 10行で削除
            $logs.slice(0, len - 11).remove();
        }       
        $('#log').append($("<div>").text((new Date()).toString() + " " + str));
    };
    // ウィンドウの横幅に合わせてフォントサイズ変更
    $(window).on('load resize', function(){
        $('body').css("font-size", ""+Math.floor( $(window).width() / STRING_NUM )+"px");
    });
    // bodyをクリックするとデバッグ表示
    $('body').click(function(){$('#debug').toggle();});
    // クライアント時刻とサーバ時刻の差
    var timediff = 0;
    /*
    
        nict.go.jp から正確な時刻の差分を取得し、timediff に設定する
    
    */
    var setTimediff = function() {
        /*
            複数のurlから時刻差分を取得  
        */
        var ajaxNicts = [];
        
        var ajaxNict = function(nict_url) {
            var d = $.Deferred(),
                req = (new Date()).getTime();
            $.ajax({
                type: 'GET',
                url: nict_url,
                cache: false,
                dataType: 'jsonp',
                jsonp: false,
                jsonpCallback: 'jsont'
            })
            .done(function(json){
                outputLog("response from "+ json.id);    /* debug */
                var now = (new Date()).getTime(),
                    //it = (json.it * 1000 ),    //  クライアント側のリクエスト時刻
                    st = (json.st * 1000 );    //  サーバ時刻
                d.resolve( ( (now - req) / 2 + st ) - now );    //  クライアント時刻とサーバ時刻の差を返す
            })
            .fail(function(){
                outputLog("fail");    /* debug */
                d.reject(false);
            });
            return d.promise();
        };
        NICT_URLS.forEach(function(nict_url) {
            ajaxNicts[ajaxNicts.length] = ajaxNict(nict_url);
        });
        /*
            複数の時刻差分から時刻差の平均値を計算
        */
        $.when.apply($, ajaxNicts).always(function() {
            console.log(arguments);
            var t = 0,
                c = 0;
            for (i = 1; i < arguments.length; i++) {
                if ( arguments[i] ) { 
                    t += arguments[i];
                    c += 1;
                }
            }
            if (c > 0) { timediff = Math.round( t / c ); }
        });
    };

setTimediff();
    setInterval(setTimediff, (1 * 60 * 1000) );

setInterval(function() {
        var d = new Date(),
            n = d.add(timediff);
        $('#yyyymmdd').text(n.yyyymmdd());
        $('#dayJP').text(n.getDayJP());
        $('#hh').text(n.hh());
        $('#mm').text(n.mm());
        $('#ss').text(n.ss());
        $('body').css({'color': n.rgbReverse(), 'background-color': n.rgb()});
        /* debug */
        $('#timediff').text(timediff);
        $("#localtime-str").text(d.toString());
        $("#localtime-time").text(d.getTime());
        $("#nict-str").text(n.toString());
        $("#nict-time").text(n.getTime());
        $('body > *').show();
    }, 500);
    setInterval(function(){ location.reload(true) }, 5000);
});

clock

body{
    font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
    line-height: 1.1;
    color: #fff;
    background-color: #000;
}

flex center

*/
html, body, .flexCenter {
    height: 100%;
}
.flexCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flexCenter * {
    text-align: center;
}
/*

date & time

*/
.date { font-size: 2em; }
.time { font-size: 3.5em; }
#dayJP { font-size: 0.8em; }
/*

time colon

*/
.colon {
    animation: blinkcolon 1s infinite alternate;
    vertical-align: 10%;
}
@keyframes blinkcolon {
    from { opacity: 1.0; }
    to { opacity: 0.1; }
}
/*

debug

*/
#debug {
    display: none;
    width: 100%;
    font-size: 0.3em;
}
#debug>* {
    color: #000;
    background-color: #fff;
    opacity: 0.5;
    border-radius: 0.5em;
    padding: 1em;
}
#debug>table {
    position: fixed;
    bottom: 5px;
}
#log {
    position: fixed;
    top: 5px;
}

// forked from yasu0519's "nict clock" http://jsdo.it/yasu0519/nictClock /* Constants */ var NICT_URLS = [ // "https://ntp-a1.nict.go.jp/cgi-bin/jsont", "http://ntp-a1.nict.go.jp/cgi-bin/jsont", // "https://ntp-b1.nict.go.jp/cgi-bin/jsont", "http://ntp-b1.nict.go.jp/cgi-bin/jsont" ]; var STRING_NUM = 16; // 日付部分の文字数（この数からフォントサイズを決定する） /* functions */ /*********************************************** Dateを拡張する */ (function() { this.getDayJP = function(){ var arr = ["日","月","火","水","木","金","土"]; return arr[this.getDay()]; }; this.yyyymmdd = function() { var arr = [ this.getFullYear(), this.getMonth() + 1, this.getDate() ]; return arr.join("."); }; this.hh = function() { return ("0"+this.getHours()).slice(-2); }; this.mm = function() { return ("0"+this.getMinutes()).slice(-2); }; this.ss = function() { return ("0"+this.getSeconds()).slice(-2); }; this.add = function(ms) { return new Date(this.getTime() + ms); }; this.rgbArray = function() { return [ this.getMinutes(), 100 - (this.getSeconds() + this.getDate()), 100 - this.getHours() ]; }; this.rgb = function() { return "rgb("+this.rgbArray().join(",") + ")"; }; this.rgbReverse = function() { var arr = this.rgbArray().map(function(e){ return 255 - e; }); return "rgb("+arr.join(",") + ")"; }; }).apply(Date.prototype); /* jQuery */ $(function(){ // ログ出力 var outputLog = function(str) { var $logs = $('#log>div'); var len = $logs.length; if (len > 10) { // 10行で削除 $logs.slice(0, len - 11).remove(); } $('#log').append($("<div>").text((new Date()).toString() + " " + str)); }; // ウィンドウの横幅に合わせてフォントサイズ変更 $(window).on('load resize', function(){ $('body').css("font-size", ""+Math.floor( $(window).width() / STRING_NUM )+"px"); }); // bodyをクリックするとデバッグ表示 $('body').click(function(){$('#debug').toggle();}); // クライアント時刻とサーバ時刻の差 var timediff = 0; /* nict.go.jp から正確な時刻の差分を取得し、timediff に設定する */ var setTimediff = function() { /* 複数のurlから時刻差分を取得 */ var ajaxNicts = []; var ajaxNict = function(nict_url) { var d = $.Deferred(), req = (new Date()).getTime(); $.ajax({ type: 'GET', url: nict_url, cache: false, dataType: 'jsonp', jsonp: false, jsonpCallback: 'jsont' }) .done(function(json){ outputLog("response from "+ json.id); /* debug */ var now = (new Date()).getTime(), //it = (json.it * 1000 ), // クライアント側のリクエスト時刻 st = (json.st * 1000 ); // サーバ時刻 d.resolve( ( (now - req) / 2 + st ) - now ); // クライアント時刻とサーバ時刻の差を返す }) .fail(function(){ outputLog("fail"); /* debug */ d.reject(false); }); return d.promise(); }; NICT_URLS.forEach(function(nict_url) { ajaxNicts[ajaxNicts.length] = ajaxNict(nict_url); }); /* 複数の時刻差分から時刻差の平均値を計算 */ $.when.apply($, ajaxNicts).always(function() { console.log(arguments); var t = 0, c = 0; for (i = 1; i < arguments.length; i++) { if ( arguments[i] ) { t += arguments[i]; c += 1; } } if (c > 0) { timediff = Math.round( t / c ); } }); }; setTimediff(); setInterval(setTimediff, (1 * 60 * 1000) ); setInterval(function() { var d = new Date(), n = d.add(timediff); $('#yyyymmdd').text(n.yyyymmdd()); $('#dayJP').text(n.getDayJP()); $('#hh').text(n.hh()); $('#mm').text(n.mm()); $('#ss').text(n.ss()); $('body').css({'color': n.rgbReverse(), 'background-color': n.rgb()}); /* debug */ $('#timediff').text(timediff); $("#localtime-str").text(d.toString()); $("#localtime-time").text(d.getTime()); $("#nict-str").text(n.toString()); $("#nict-time").text(n.getTime()); $('body > *').show(); }, 500); setInterval(function(){ location.reload(true) }, 5000); }); <div class="flexCenter" style="display: none;"> <div class="datetime"> <div class="date"><span id="yyyymmdd">0000.00.00</span> (<span id="dayJP">--</span></>)</div> <div class="time"><span id="hh">00</span><span class="colon">:</span><span id="mm">00</span><span class="colon">:</span><span id="ss">00</span></div> </div> </div> <div id="debug" style="display: none;"> <table> <tr> <td>diff:</td> <td><span id="timediff">- </span>ms</td> <td></td> </tr> <tr> <td>localtime:</td> <td id="localtime-str"></td> <td>(<span id="localtime-time">-</span>)</td> </tr> <tr> <td>nict time:</td> <td id="nict-str">-</td> <td>(<span id="nict-time">-</span>)</td> </tr> </table> <div id="log"></div> </div>body{ font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳＰゴシック" , "MS PGothic" , sans-serif; line-height: 1.1; color: #fff; background-color: #000; } /* flex center */ html, body, .flexCenter { height: 100%; } .flexCenter { display: flex; justify-content: center; align-items: center; } .flexCenter * { text-align: center; } /* date & time */ .date { font-size: 2em; } .time { font-size: 3.5em; } #dayJP { font-size: 0.8em; } /* time colon */ .colon { animation: blinkcolon 1s infinite alternate; vertical-align: 10%; } @keyframes blinkcolon { from { opacity: 1.0; } to { opacity: 0.1; } } /* debug */ #debug { display: none; width: 100%; font-size: 0.3em; } #debug>* { color: #000; background-color: #fff; opacity: 0.5; border-radius: 0.5em; padding: 1em; } #debug>table { position: fixed; bottom: 5px; } #log { position: fixed; top: 5px; }

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

clock

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags