PLAYNOTE 日英時差時計スクリプト

2004年07月13日

日英時差時計スクリプト

[ネット・PC] 2004/07/13 18:12

俳句を取り付けたついでに少しMTをいじった。右側に日本時間とイギリス時間を表示させてみました。日本での動作テストができないので、誰か日本からアクセスしたら「時刻あってるよ」「ずれてるよ」等ご報告ください。お願いします。

以下、備忘録(俺以外には無益な情報ばかりです)

日本時間およびイギリス時間を表示するスクリプト。はじめてJavaScriptで書いた。Perlはそこそこ書けるんだがJSは本当にはじめてなので、ここのスクリプトを元に出鱈目に試行錯誤してみた。僕はパソコンオタクなのでこういう試行錯誤が大好きです。

// What time is it Ver 1.03 by Kenichi Tani
// 1.00 見様見真似で作った
// 1.01 JS質問スレ31・160氏による修正
//      http://pc5.2ch.net/test/read.cgi/hp/1095310099/160n
// 1.03 さらにちょっと自力で手直し

dd = new Date();
dd_canterbury = new Date();
dd_japan      = new Date();
offset = dd.getTime()+dd.getTimezoneOffset()*60*1000;
dd_canterbury.setTime(offset+(+0)*60*60*1000);
dd_japan.setTime(offset+(+9)*60*60*1000);

chour= dd_canterbury.getHours();
cmin = dd_canterbury.getMinutes();
jhour= dd_japan.getHours();
jmin = dd_japan.getMinutes();

// カンタベリー時間
chour2 = (chour  > 12) ? chour-12    : chour       ;//13時以降は-12
if(chour2 < 10) chour2 = " "+chour2                ;//時の桁揃え
if(cmin   < 10) cmin   = "0"+cmin                  ;//分の桁揃え
chour2 = (chour >= 12) ? "PM"+chour2 : "AM"+chour2 ;//PM or AMをつける

// ジャパン時間
jhour2 = (jhour  > 12) ? jhour-12    : jhour       ;//13時以降は-12
if(jhour2 < 10) jhour2 = " "+jhour2                ;//時の桁揃え
if(jmin   < 10) jmin   = "0"+jmin                  ;//分の桁揃え
jhour2 = (jhour >= 12) ? "PM"+jhour2 : "AM"+jhour2 ;//PM or AMをつける

document.write(
'<h2 class="sidetitle">What time is it in</h2>',
'<ul class="side">',
'<li>カンタベリー ', chour2, ":", cmin, '</li>',
'<li>ジャパン ',     jhour2, ":", jmin, '</li>',
'</ul>');

こんな感じ。(↓サンプル)

あとカレンダー邪魔なので消した。でも後々復活させるかもしれないから、消した分のソースを貼っておく。

<h2 class="calendarhead"><$MTDate format="%B %Y"$></h2>

<div class="calendar">

<table summary="Monthly calendar with links to each day's posts">
<tr>
<th abbr="Sunday"><span class="calendar">Sun</span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar">Sat</span></th>
</tr>

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

<td><span class="calendar">
<MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank></span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>

</div>

サイドメニューから動作確認ブラウザ一覧を削除。重かったので。(7/19)

<!-- ############### browser icons ############### -->

<div class="browser">
<img src="http://www.playnote.net/img/browser/windows.png"
    alt="動作環境:Windows98"
  title="動作環境:Windows98">
<img src="http://www.playnote.net/img/browser/ie.png"
    alt="IE 6.0 表示確認済"
  title="IE 6.0 表示確認済">
<img src="http://www.playnote.net/img/browser/mozilla.png"
    alt="Mozilla 1.6 表示確認済" 
  title="Mozilla 1.6 表示確認済">
<img src="http://www.playnote.net/img/browser/firebird.png"
    alt="Mozilla Firebird 0.7 表示確認済"
  title="Mozilla Firebird 0.7 表示確認済">
<img src="http://www.playnote.net/img/browser/opera.png"
    alt="Opera 7.23 表示確認済"
  title="Opera 7.23 表示確認済">
<img src="http://www.playnote.net/img/browser/ice.png"
    alt="ICE Browser 5.4 表示確認済"
  title="ICE Browser 5.4 表示確認済">
<img src="http://www.playnote.net/img/browser/hotjava.png"
    alt="Hot Java Browser 3.0 表示確認済"
  title="Hot Java Browser 3.0 表示確認済">
<img src="http://www.playnote.net/img/browser/kfc.png"
    alt="KFC 1.1.3 表示確認済"
  title="KFC 1.1.3 表示確認済">
<img src="http://www.playnote.net/img/browser/msdos.png"
    alt="Lynx285 dev16THc 表示確認済"
  title="Lynx285 dev16THc 表示確認済">
<img src="http://www.playnote.net/img/browser/xyzzy.png"
    alt="xyzzy www-mode 0.0.1.4-2 with w3m 表示確認済"
  title="xyzzy www-mode 0.0.1.4-2 with w3m 表示確認済">
</div>

CSSも切った。

div.calendar 
{
  line-height:120%;
}
	
div.calendar table 
{
  margin:0 0 0 auto;
}
  
.calendar td, 
.calendar th
{
  font-weight:normal;
  font-size:11px;
  text-align:center;
}
 
.browser 
{
  position:absolute;
  top:66px;
  right:2px;
}
	
.browser img 
{
  width:16px;
  height:16px;
}

カレンダーも動作環境一覧アイコンも自己満足のためにつけてたんだけど、重いだけだわ。アイコンの方は逐次ロードされる上にHTML構造的には末尾にあって position:absolute; で先頭に上げてるから、体感的にも重い。切っちゃった。

コメント

投稿者:あきまる (2004年07月14日 01:37)

俳句blogをご利用ありがとうございますm(_ _)m
日本からの時間ですが、正しいですよ。

投稿者:Kenichi Tani (2004年07月14日 07:51)

ご本人からコメント頂けるとは! 感激です。おもろいサービスありがとうございます、発展を祈ってます。

動作確認報告にも感謝! ありがとうございました。

投稿者:Kenichi Tani (2004年09月23日 16:28)

JavaScript質問スレvol.31 160氏の協力で上記JavaScriptをちょっと改変しました。Thanks a lot! >>160
http://pc5.2ch.net/test/read.cgi/hp/1095310099/160n

投稿者:トキ (2004年09月28日 09:40)

はじめまして^^
今イギリスに住んでいるのですが、時間合ってますよ^^
もしよかったら24時間制
(なんて言えばいいのか;17:00とかの、あれです;)
の表示の仕方を教えていただけませんか?

投稿者:Kenichi Tani (2004年09月28日 15:35)

「;//13時以降は-12」と「;//PM or AMをつける」のコメントのある四行を削除して、chour2をchourに、jhour2をjhourにすべて置き換えて下さい。多分それで行けます。わかんなかったらメールで聞くか自分で調べて下さい。