Forked from: yasu0519's nict clock View Diff (7) clock yasu0519 Follow 2017-01-07 02:35:33 License: MIT License Fork0 Fav0 View504 Play Stop Reload Fullscreen Smart Phone 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); }); <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> 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 Pゴシック" , "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 Pゴシック" , "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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author yasu0519 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/IKo4/js"></script> clock CSS3 HTML5 html5_elements&api jQuery library&test Discussion Questions on this code? Tags CSS3 HTML5 clock html5_elements&api jQuery library&test