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

前提・実現したいこと

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();

//２桁表示に変更
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();

//月、日を２ケタ表示に変更
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>

m.ts10806

2020/03/29 12:23

コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

行動規範の内容に同意します

回答1件

ベストアンサー

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

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//２桁表示に変更
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//月、日を２ケタ表示に変更
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>