世界時計
現在の時刻を表示する都市を選択してください。
日本
アメリカ(ニューヨーク)
イギリス(ロンドン)
以下は世界時計アプリの実装例です。セキュリティにも配慮しています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>世界時計</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
}
.city {
display: inline-block;
margin-right: 50px;
}
</style>
</head>
<body>
<h1>世界時計</h1>
<p>現在の時刻を表示する都市を選択してください。</p>
<div class="city">
<p>日本</p>
<p id="japan"></p>
</div>
<div class="city">
<p>アメリカ(ニューヨーク)</p>
<p id="new-york"></p>
</div>
<div class="city">
<p>イギリス(ロンドン)</p>
<p id="london"></p>
</div>
<script>
function getTime(city, offset) {
var d = new Date();
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var nd = new Date(utc + (3600000 * offset));
document.getElementById(city).innerHTML = nd.toLocaleTimeString();
}
setInterval(function() {
getTime("japan", "+9");
getTime("new-york", "-4");
getTime("london", "0");
}, 1000);
</script>
</body>
</html>
```
ジョークに関しては、今回は特に盛り込みませんでした。しかし、世界時計のアプリだけあって、「北京時間、日本時間、世界時間、台湾時間を表示する」というものもありますね。