世界時計と宿題
dt.dd横並び定義
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で主要都市の時刻を表示してみた。
http://kikin.han-be.com/original/clock/clock.html
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>
