Hatena::ブログ(Diary)

Gattyan

2011-11-29

世界時計と宿題

dt.dd横並び定義

f:id:Gattyan2:20111129121406p:image

html
<dl>
<dt>2011.11.29</dt>
<dd>横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト</dd>
<dt>2011.11.29</dt>
<dd>横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト</dd>
<dt>2011.11.29</dt>
<dd>横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト</dd>
<dt>2011.11.29</dt>
<dd>横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト</dd>
<dt>2011.11.29</dt>
<dd>横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト横並びテスト</dd>
</dl>
css
dt {
  float:left;
  width:100px;
}
dd {
  margin-bottom:0.8em;
  margin-left:100px;
}

世界時計

先週日付の取得を勉強したのでjavascriptで主要都市の時刻を表示してみた。
404 Not Found|忍者ホームページ
f:id:Gattyan2:20111129122009p:image

javascript
function jikoku() {
	
  dd = new Date();					//基準のデータを宣言
  date = dd.getDate();
  hours = dd.getHours();
  minutes = dd.getMinutes();
  seconds = dd.getSeconds();
	
  tz_tokyo = -9;					//各国の時差を代入
  tz_newYork = 5;
  tz_pari = -1;
  tz_london = 0;
  tz_hongKong = -8;
	
  nyJisa = tz_newYork - tz_tokyo;					//東京を基準に時差を求める
  pariJisa = tz_pari - tz_tokyo;
  londonJisa = tz_london - tz_tokyo;
  hongKongJisa = tz_hongKong - tz_tokyo;
	
  japan = date + "日" + hours + "時" + minutes + "分" + seconds + "秒";					//日本の時刻
  document.clockForm.time1.value = japan; 
	
  d2 = new Date();					//ニューヨークの時刻
  d2.setTime(dd.getTime() - nyJisa * 3600 * 1000);
  date = d2.getDate();
  hours = d2.getHours();
  minutes = d2.getMinutes();
  seconds = d2.getSeconds();
  newYork = date + "日" + hours + "時" + minutes + "分" + seconds + "秒";
  document.clockForm.time2.value = newYork;
	
  d3 = new Date();					//パリの時刻
  d3.setTime(dd.getTime() - pariJisa * 3600 * 1000);
  date = d3.getDate();
  hours = d3.getHours();
  minutes = d3.getMinutes();
  seconds = d3.getSeconds();
  pari =  date + "日" + hours + "時" + minutes + "分" + seconds + "秒";
  document.clockForm.time3.value = pari;
	
  d4 = new Date();					//ロンドンの時刻
  d4.setTime(dd.getTime() - londonJisa * 3600 * 1000);
  date = d4.getDate();
  hours = d4.getHours();
  minutes = d4.getMinutes();
  seconds = d4.getSeconds();
  london =  date + "日" + hours + "時" + minutes + "分" + seconds + "秒";
  document.clockForm.time4.value = london;
	
  d5 = new Date();					//香港の時刻
  d5.setTime(dd.getTime() - hongKongJisa * 3600 * 1000);
  date = d5.getDate();
  hours = d5.getHours();
  minutes = d5.getMinutes();
  seconds = d5.getSeconds();
  hongKong =  date + "日" + hours + "時" + minutes + "分" + seconds + "秒";
  document.clockForm.time5.value = hongKong;
	
  window.setTimeout("jikoku()" , 1000);
}
html
<body onload="jikoku()">
<div id="container">
<h1>WORLD CLOCK</h1>
<form name="clockForm">
<div class="section">
<h2>NEW YORK</h2>
<p><input type="text" name="time2" size="10" /></p>
</div>
<div class="section">
<h2>LONDON</h2>
<p><input type="text" name="time4" size="10" /></p>
</div>
<div class="section">
<h2>PARI</h2>
<p><input type="text" name="time3" size="10" /></p>
</div>
<div class="section">
<h2>TOKYO</h2>
<p><input type="text" name="time1" size="10" /></p>
</div>
<div class="section">
<h2>HONG KONG</h2>
<p><input type="text" name="time5" size="10" /></p>
</div>
</form>
</div>
</body>

標準課題【H01】〜【H02】作成
標準課題【H01】
標準課題【H02】

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証