質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2821閲覧

世界時計のプログラミングコードのチェック

Goro1219

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/03/29 09:00

前提・実現したいこと

Java scriptで世界時計を作っています。
こちらのサイトを参照につくりました。
(https://weekly.ascii.jp/elem/000/001/422/1422848/)

発生して いる問題・エラーメッセージ

現在時刻が、表示されません。

該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>世界時計</title> <script> //時計の表示 function clock() { //現在の日時 var now = new Date();

//Tokyoの時間(ミリ秒)
var timeTokyo = now.getTime();

//UTC(協定世界時)の時間(ミリ秒)
var timeUTC= timeTokyo - 96060*1000;

//選択された都市のタイムゾーン
var cityElement = document.getElementById("city");
var index = cityElement.selectedIndex;
var timeZone = cityElement.options[index].value;

//タイムゾーン用の要素の取得
var timezoneElement = document.getElementById("timezone")
//タイムゾーンをセット
timezoneElement.innerHTML ="Timezone:" + timeZone;

//選択された都市の時間(ミリ秒)
var timeCity = timeUTC + timeZone6060*1000;

//選択された都市の日時
now = new Date(timeCity);

//時間の取得
var h =now.getHours();
//分の取得
var m = now.getMinutes();
//秒の取得
var s = now.getSeconds();

//2桁表示に変更
if (hour < 10)hour = "0" + hour;
if (min < 10)min = "0" + min;
if (sec < 10)sec = "0" + sec;

//時間表示用の要素の取得
var timeElement = document.getElementById("time");
//時間をセット
timeElement.innerHTML = hour+":"+min+":"+sec;

//年の取得
var year = now.getFullYear();
//月の取得
var month = now.getMonth() + 1;
//日の取得
var day = now.getDate();

//月、日を2ケタ表示に変更
if (month< 10) month = "0" + mo;
if(day < 10) day = "0" + da;

//曜日の名称
var weekArray = ["Sun","Mon","Tue""Wed","Thu","Fri","Sat"];
//曜日の取得
var week =weekArray[now.getDay()];

//日付表示用の要素の取得
var dateElement = document.getElementById("date");
//時間をセット
dateElement.innerHTML = years+"/"+month+"/"+day+" "+week;
}
</script>

<style> #clock { font-family:"Courier New"; background-color:#CCCCCC; border:solid #999999 1px; color:#000000; width:300px; padding:10px; } #date { font-size:20pt; } #time { font-size:42pt; } </style> </head> <body onLoad="setInterval('clock()'.1000)"> <p>世界時計</p> <hr> <div id="clock"> <select id="city"> <option value="-10">Honolulu (USA) <option value="-8">Los Angels (USA) <option value="-5">New York (USA) <option value="-3">Rio de Janeiro (BRA) <option value="0">London (U.K.) <option value="2">Cairo (EGYPT) <option value="5.5">New Delhi (INDIA) <option value="7">Bangkok (THAILAND) <Option value="9"> selected>Tokyo(JAPAN) <Option value="10">Sydney (AUSTRALIA) </select> <span id="timezone"></span> <img src="worldmap.jpg"> <div id="date">----/--/-- ---</div> <div id="time">--:--:--</div> </div> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

雑誌の掲載されたソースコードは得てして、プログラマーじゃない記者が動作チェックもしないで
掲載していることが多いですからねぇ。修正したコードを載せておきます。修正点も記載しておきました。

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>世界時計</title> 6<script> 7//時計の表示 8function clock() { 9//現在の日時 10var now = new Date(); 11 12//Tokyoの時間(ミリ秒) 13var timeTokyo = now.getTime(); 14 15//UTC(協定世界時)の時間(ミリ秒) 16var timeUTC= timeTokyo - 9*60*60*1000; 17 18//選択された都市のタイムゾーン 19var cityElement = document.getElementById("city"); 20var index = cityElement.selectedIndex; 21var timeZone = cityElement.options[index].value; 22 23//タイムゾーン用の要素の取得 24var timezoneElement = document.getElementById("timezone") 25//タイムゾーンをセット 26timezoneElement.innerHTML ="Timezone:" + timeZone; 27 28//選択された都市の時間(ミリ秒) 29var timeCity = timeUTC + timeZone*60*60*1000; 30 31//選択された都市の日時 32now = new Date(timeCity); 33 34//時間の取得 35var hour =now.getHours(); 36//分の取得 37var min = now.getMinutes(); 38//秒の取得 39var sec = now.getSeconds(); 40 41//2桁表示に変更 42if (hour < 10)hour = "0" + hour; //hourなんて変数作ってない上の時間の取得でhourに直して解決 43if (min < 10)min = "0" + min; //minなんて・・・以下同文 */ 44if (sec < 10)sec = "0" + sec; //secなんて・・・以下同文 */ 45 46//時間表示用の要素の取得 47var timeElement = document.getElementById("time"); 48//時間をセット 49timeElement.innerHTML = hour+":"+min+":"+sec; 50 51//年の取得 52var year = now.getFullYear(); 53//月の取得 54var month = now.getMonth() + 1; 55//日の取得 56var day = now.getDate(); 57 58//月、日を2ケタ表示に変更 59if (month< 10) month = "0" + month; //moなんて変数つくってない上のmonthが該当するので修正 60if(day < 10) day = "0" + day; //daなんて・・・以下同文 61 62//曜日の名称 63var weekArray = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; //"Tue""Wed"になっている。間に,がないので記入 64//曜日の取得 65var week = weekArray[now.getDay()]; 66 67//日付表示用の要素の取得 68var dateElement = document.getElementById("date"); 69//時間をセット 70dateElement.innerHTML = year + "/" + month + "/" + day + " " + week; //yearsなんて変数は作ってない。yearが正しいので修整 71} 72</script> 73 74<style> 75#clock { /* ID属性で要素を指定して適用させるには#を付けないといけない */ 76font-family:"Courier New"; 77background-color:#CCCCCC; 78border:solid #999999 1px; 79color:#000000; 80width:300px; 81padding:10px; 82} 83 84#date { /* ID属性で・・・以下同文 */ 85font-size:20pt; 86} 87 88#time { /* ID属性で・・・以下同文 */ 89font-size:42pt; 90} 91</style> 92 93</head> 94<body onload="setInterval(clock,1000);"> <!-- onloadではなくonLoadになってたので修整、また呼び出し関数名と、時間の間が,じゃなく.だったので修整 --> 95<p>世界時計</p> 96<hr> 97<div id="clock"> 98<select id="city"> <!-- <option>タグは</option>タグで閉じなければいけないペアになってます。追記しました。 --> 99<option value="-10">Honolulu (USA)</option> 100<option value="-8">Los Angels (USA)</option> 101<option value="-5">New York (USA)</option> 102<option value="-3">Rio de Janeiro (BRA)</option> 103<option value="0">London (U.K.)</option> 104<option value="2">Cairo (EGYPT)</option> 105<option value="5.5">New Delhi (INDIA)</option> 106<option value="7">Bangkok (THAILAND)</option> 107<option value="9" selected>Tokyo(JAPAN)</option> <!-- selectedが>の外に出てました中に書いて>で閉じる。また、この行と下の行が<option>ではなく<Option>になっていたので修整 --> 108<option value="10">Sydney (AUSTRALIA)</option> 109</select> 110<span id="timezone"></span> 111<img src="worldmap.jpg"> 112<div id="date">----/--/-- ---</div> 113<div id="time">--:--:--</div> 114</div> 115</body> 116</html>

以上です。ちゃんと動作チェック済みです。
コードのところでCTRL押しながらAを押して全選択してCTRL押しながらCでコピーし
ご自身のファイルにCTRL押しながらVで貼り付けて使ってください。

分からないことがあればレス付けてくだされば、出来る範囲でお答えします。

投稿2020/03/29 11:36

編集2020/03/29 11:51
nekora

総合スコア501

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Goro1219

2020/03/29 14:41

丁寧な解説ありがとうございました。 雑誌の記事を鵜呑みにしていたので ずっと作業が止まったままでした。 大変助かりました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問