Team:Osaka
From 2013.igem.org
(Difference between revisions)
Line 3: | Line 3: | ||
<body style="background-image: url("https://static.igem.org/mediawiki/2013/3/32/Team-bg-01.jpg") overflow: hidden;"> | <body style="background-image: url("https://static.igem.org/mediawiki/2013/3/32/Team-bg-01.jpg") overflow: hidden;"> | ||
<html> | <html> | ||
+ | |||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | input.internettime { | ||
+ | background:#eee; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | |||
<div style="width:700px; top:100px; position:fixed; left:50%; margin-left:-350px; height:180px;"> | <div style="width:700px; top:100px; position:fixed; left:50%; margin-left:-350px; height:180px;"> | ||
<img src="https://static.igem.org/mediawiki/2013/2/2d/Logggo.png" alt="logologo" style="width:700px;position:absolute; left:50%; margin-left:-350px;"> | <img src="https://static.igem.org/mediawiki/2013/2/2d/Logggo.png" alt="logologo" style="width:700px;position:absolute; left:50%; margin-left:-350px;"> | ||
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
+ | |||
+ | <body bgcolor="#ffffff" onLoad="update_watch()"> | ||
+ | |||
<script> | <script> | ||
- | + | // まず今が何年か調べる | |
- | + | var today = new Date(); | |
- | + | var year = today.getYear(); | |
- | year = | + | if (year < 1900) { year += 1900; } |
- | + | ||
- | + | // ローカル時間とグリニッジ標準時の差を分で表示 | |
- | + | var tz_offset = today.getTimezoneOffset(); | |
- | + | ||
- | + | // 米英のサマータイムの期間を格納 | |
- | + | var pos_startUS = GetDstStartUS(year); | |
- | + | var pos_endUS = GetDstEndUS(year); | |
- | hour | + | var pos_startUK = GetDstStartUK(year); |
- | + | var pos_endUK = GetDstEndUK(year); | |
+ | |||
+ | // 各都市の時差を格納 | ||
+ | var tz_ldn = 0 * 60; // GMT +-0 | ||
+ | var tz_tyo = 9 * 60; // GMT +9 | ||
+ | var tz_lax = -8 * 60; // GMT -8 | ||
+ | var tz_nyc = -5 * 60; // GMT -5 | ||
+ | |||
+ | |||
+ | |||
+ | // | ||
+ | // ◆各都市の表示欄の色づけ | ||
+ | // | ||
+ | cities = Array(4); | ||
+ | cities[0] = "ldn"; | ||
+ | cities[1] = "tyo"; | ||
+ | cities[2] = "lax"; | ||
+ | cities[3] = "nyc"; | ||
+ | |||
+ | document.writeln("<style type=text/css>"); | ||
+ | |||
+ | // いまの時刻を取得(たぶん1000ミリ秒単位) | ||
+ | var now = new Date(); | ||
+ | var n_t = now.getTime(); | ||
+ | |||
+ | for ( i=0; i<4; i++ ) { | ||
+ | |||
+ | if (cities[i] == "ldn") { var str = printtime(n_t,tz_ldn); } | ||
+ | else if (cities[i] == "tyo") { var str = printtime(n_t,tz_tyo); } | ||
+ | else if (cities[i] == "lax") { var str = printtime(n_t,tz_lax); } | ||
+ | else if (cities[i] == "nyc") { var str = printtime(n_t,tz_nyc); } | ||
+ | |||
+ | var hour = str.substring(0,2); | ||
+ | |||
+ | /* | ||
+ | * ○時刻ごとの背景色設定 | ||
+ | * 白 ....... 6-16 | ||
+ | * 薄い青 ... 16-18, 5-6 | ||
+ | * 青 ....... 18-20, 4-5 | ||
+ | * 濃い青 ... 20-4 | ||
+ | */ | ||
+ | |||
+ | if ( 6 <= hour && hour < 16 ) { | ||
+ | document.writeln("input." + cities[i] + " { background:#eee }"); | ||
+ | } else if ( (16 <= hour && hour < 18) || (5 <= hour && hour < 6) ) { | ||
+ | document.writeln("input." + cities[i] + " { background:#ccf }"); | ||
+ | } else if ( (18 <= hour && hour < 20) || (4 <= hour && hour < 5) ) { | ||
+ | document.writeln("input." + cities[i] + " { background:#77c;color:#ddd }"); | ||
+ | } else { | ||
+ | document.writeln("input." + cities[i] + " { background:#448;color:#ddd }"); | ||
+ | } | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | document. | + | document.writeln("</style>"); |
- | setTimeout(' | + | |
+ | |||
+ | |||
+ | // ◆メインルーチン | ||
+ | function update_watch() { | ||
+ | // いまの時刻を取得(たぶん1000ミリ秒単位) | ||
+ | var now = new Date(); | ||
+ | var n_t = now.getTime(); | ||
+ | |||
+ | document.worldclock.ldn.value = printtime(n_t,tz_ldn); | ||
+ | document.worldclock.tyo.value = printtime(n_t,tz_tyo); | ||
+ | document.worldclock.lax.value = printtime(n_t,tz_lax); | ||
+ | document.worldclock.nyc.value = printtime(n_t,tz_nyc); | ||
+ | |||
+ | document.worldclock.internettime.value = internettime(); | ||
+ | |||
+ | setTimeout('update_watch()', 999); // 1000msec = 1sec(秒) | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
+ | // ◆米国版 DST 開始設定(4月第1日曜日2:00AM から 10月最終日曜日1:00AM まで) | ||
+ | // 引数arg_yearで指定された年のサマータイム開始時刻を return で返す | ||
+ | function GetDstStartUS(arg_year) { | ||
+ | // 第2引数の3→4月 第3引数の1→1日 第4引数の2→2:00AM | ||
+ | var dst_start = new Date(arg_year, 3, 1, 2, 0, 0); | ||
+ | for (var i = 1; i <= 7; i++) { | ||
+ | dst_start.setDate(i); | ||
+ | if (0 == dst_start.getDay()) { // 0は日曜日を意味する | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | return dst_start.getTime(); | ||
+ | } | ||
- | + | // ◆米国版 DST 終了設定(4月第1日曜日2:00AM から 10月最終日曜日1:00AM まで) | |
+ | // 引数arg_yearで指定された年のサマータイム終了時刻を return で返す | ||
+ | function GetDstEndUS(arg_year) { | ||
+ | // 第2引数の9→10月 第3引数の31→31日 第4引数の1→1:00AM | ||
+ | var dst_end = new Date(arg_year, 9, 31, 1, 0, 0); | ||
+ | for (var i = 31; i > 24; i--) { | ||
+ | dst_end.setDate(i); | ||
+ | if (0 == dst_end.getDay()) { // 0は日曜日を意味する | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | return dst_end.getTime(); | ||
+ | } | ||
- | |||
+ | // ◆英国版 DST 開始設定(3月最終土曜日2:00AM から 10月最終土曜日2:00AM まで) | ||
+ | // 引数arg_yearで指定された年のサマータイム開始時刻を return で返す | ||
+ | function GetDstStartUK(arg_yearUK) { | ||
+ | // 第2引数の2→3月 第3引数の31→31日 第4引数の2→2:00AM | ||
+ | var dst_startUK = new Date(arg_yearUK, 2, 31, 2, 0, 0); | ||
+ | for (var i = 31; i > 24; i--) { | ||
+ | dst_startUK.setDate(i); | ||
+ | if (6 == dst_startUK.getDay()) { // 6は土曜日を意味する | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | return dst_startUK.getTime(); | ||
+ | } | ||
- | + | // ◆英国版 DST 終了設定(3月最終土曜日2:00AM から 10月最終土曜日2:00AM まで) | |
+ | // 引数arg_yearで指定された年のサマータイム終了時刻を return で返す | ||
+ | function GetDstEndUK(arg_yearUK) { | ||
+ | // 第2引数の9→10月 第3引数の31→31日 第4引数の2→2:00AM | ||
+ | var dst_endUK = new Date(arg_yearUK, 9, 31, 2, 0, 0); | ||
+ | for (var i = 31; i > 24; i--) { | ||
+ | dst_endUK.setDate(i); | ||
+ | if (6 == dst_endUK.getDay()) { // 6は土曜日を意味する | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | return dst_endUK.getTime(); | ||
+ | } | ||
+ | |||
+ | // ◆表示・サマータイム処理 | ||
+ | function printtime(now_time, timezone) { | ||
+ | var hour, min, sec; | ||
+ | |||
+ | var pos_t = now_time + (tz_offset + timezone) * 60 * 1000; | ||
+ | |||
+ | // サマータイム処理 | ||
+ | if (timezone == tz_ldn) { | ||
+ | // ロンドン編 | ||
+ | if ((pos_startUK <= pos_t) && (pos_endUK > pos_t)) { | ||
+ | pos_t += 60 * 60 * 1000; | ||
+ | } | ||
+ | } else if ( timezone == tz_lax || timezone == tz_nyc ) { | ||
+ | // LA & NY 編 | ||
+ | if ((pos_startUS <= pos_t) && (pos_endUS > pos_t)) { | ||
+ | pos_t += 60 * 60 * 1000; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var t = new Date(); | ||
+ | t.setTime(pos_t); | ||
+ | hour = t.getHours(); | ||
+ | min = t.getMinutes(); | ||
+ | sec = t.getSeconds(); | ||
+ | |||
+ | // 「XX時00分00秒」で、かつ、XX が「4,5,6,16,18,20」のうち | ||
+ | // いずれかであるときにページをリロード | ||
+ | // この処理により時間ごとの背景色が自動的に変わる | ||
+ | if ( (hour==4||hour==5||hour==6||hour==16||hour==18||hour==20) && min==0 && sec==0 ) { | ||
+ | window.location.reload(); | ||
+ | } | ||
+ | |||
+ | if (hour < 10) { | ||
+ | hour = "0" + hour; | ||
+ | } | ||
+ | if (min < 10) { | ||
+ | min = "0" + min; | ||
+ | } | ||
+ | if (sec < 10) { | ||
+ | sec = "0" + sec; | ||
+ | } | ||
+ | |||
+ | return hour + ":" + min + ":" + sec; | ||
+ | // return hour + ":" + min; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | // ◆インターネットタイムの処理 | ||
+ | function internettime() { | ||
+ | var c = new Date(); | ||
+ | var gmt = c.toGMTString(); | ||
+ | var d = gmt.indexOf(":") | ||
+ | |||
+ | var h = eval( gmt.slice(d-2,d) ); | ||
+ | var m = eval( gmt.slice(d+1,d+3) ); | ||
+ | var s = eval( gmt.slice(d+4,d+6) ); | ||
+ | |||
+ | // LONDON と BIEL(SWATCH本社所在地/PARISとtime zoneが同じ)の 時差は1時間(3600秒) | ||
+ | var beat = (h * 3600 + m * 60 + s + 3600) / 86.4; | ||
+ | |||
+ | if (beat >= 1000) beat = beat - 1000; | ||
+ | beat = Math.floor(beat); | ||
+ | |||
+ | var zero = ""; | ||
+ | if (beat < 100) zero = "0"; | ||
+ | if (beat < 10) zero = "00"; | ||
+ | |||
+ | return "@" + zero + beat; | ||
+ | } | ||
+ | </script> | ||
+ | |||
+ | <div style="width:700px; top:280px; position:fixed; left:50%; margin-left:-350px;"> | ||
+ | <form method="post" name="worldclock" > | ||
+ | <span style="font-size:smaller">LDN: </span><input name="ldn" class="ldn" size=8> | ||
+ | | ||
+ | <span style="font-size:smaller">TYO: </span><input name="tyo" class="tyo" size=8> | ||
+ | | ||
+ | <span style="font-size:smaller">LAX: </span><input name="lax" class="lax" size=8> | ||
+ | | ||
+ | <span style="font-size:smaller">NYC: </span><input name="nyc" class="nyc" size=8> | ||
+ | <br><br> | ||
+ | <span style="font-size:smaller">INTERNET TIME: </span> | ||
+ | <input name="internettime" class="internettime" SIZE="5"> | ||
+ | </form> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 05:47, 24 September 2013
<body style="background-image: url("") overflow: hidden;">