ラジオボタンを切り替えたときに、選択した国／地域名と時刻に切り替えたいです（世界時計）

java script で世界時計を作っています
日本の現時刻を出力することはできました
ですが海外の時間とラジオボタンを押したときに時その国の時間にあった画像を出力させる方法がわかりません

詳細
日本／東京 ±0
オーストラリア／キャンベラ +1時間
インドネシア／ジャカルタ -2時間
エジプト／カイロ -7時間
イギリス／ロンドン -8時間
アメリカ／ニューヨーク -13時間
アメリカ／サンフランシスコ -16時

画像はhtmlやscript.js　ファイルと同じ階層にあります
コードは日本の時間を1秒おきに時間が更新してるところまでです

途中経過です

javascript
1function set2fig(num) {
2    var ret;
3    if( num < 10 ) { ret = "0" + num; }
4    else { ret = num; }
5    return ret;
6 }
7 function showClock2() {
8    var nowTime = new Date();
9    var nowHour = set2fig( nowTime.getHours() );
10    var nowMin  = set2fig( nowTime.getMinutes() );
11    var nowSec  = set2fig( nowTime.getSeconds() );
12    var msg =  nowHour + ":" + nowMin + ":" + nowSec ;
13    document.getElementById("jikan").innerHTML = msg;
14 }
15 setInterval('showClock2()',1000);
16

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>JavaScript演習問題</title>
6<link rel="stylesheet" href="style.css">
7</head>
8<body>
9<h1>世界時計</h1>
10<h2>現在の『<span id="basyo">日本／東京</span>』の時刻は</h2>
11<h2><span id="jikan"></span>です</h2>
12<img id="pictur" src="chikyuu.png" width="260" height="280" alt="">
13<div id="box">
14  <form id="select">
15    <label><input type="radio" name="kokumei" value="0">日本／東京</label><br>
16    <label><input type="radio" name="kokumei" value="1">オーストラリア／キャンベラ</label><br>
17    <label><input type="radio" name="kokumei" value="2">インドネシア／ジャカルタ</label><br>
18    <label><input type="radio" name="kokumei" value="3">エジプト／カイロ</label><br>
19    <label><input type="radio" name="kokumei" value="4">イギリス／ロンドン</label><br>
20    <label><input type="radio" name="kokumei" value="5">アメリカ／ニューヨーク</label><br>
21    <label><input type="radio" name="kokumei" value="6">アメリカ／サンフランシスコ</label><br>
22  </form>
23</div>
24<script src="script.js"></script>
25</body>
26</html>

ラジオボタン処理前のJavaScript

JavaScript
1let kirikae = 0;
2
3setInterval(nowtime, 1000);
4
5function nowtime() {
6    let now = new Date();
7    let hh = now.getHours();
8    let mm = now.getMinutes();
9    let ss = now.getSeconds();
10    hh = hh +  kirikae;
11    if (hh < 0) {
12        hh = 24 + hh; 
13    }
14    if (hh < 10) {
15        hh = '0' + hh;
16    }
17    if (mm < 10) {
18        mm = '0' + mm;
19    }
20    if (ss < 10) {
21        ss = '0' + ss;
22    }
23    document.getElementById('jikan').textContent = hh + ':' + mm + ':' + ss;
24
25    if (hh < 10) {
26        document.getElementById('picture').src = 'asa.png';
27    }
28    else if (hh < 16) {
29        document.getElementById('picture').src = 'hiru.png';
30    }
31    else if (hh < 19) {
32        document.getElementById('picture').src = 'ban.png';
33    }
34    else if (hh < 24) {
35        document.getElementById('picture').src = 'yoru.png';
36    }
37    else if (hh < 4) {
38        document.getElementById('picture').src = 'sinya.png';
39    }
40}
41

m.ts10806

2021/07/15 06:34

質問タグはJavaではなくJavaScriptになります。また、コードはマークダウンのcode機能を利用してご提示ください。質問は編集できます

pigret

2021/07/15 06:48

変更点がまだあるようならおっしゃってくださいすぐ直します

m.ts10806

2021/07/15 07:05

コードを見ただけなのでどこまで出来ているのかわかりませんが、選択した国地域の時間は取れているのですか？あと「画像」はどのように保持してますか？

pigret

2021/07/15 07:16

あ、持ってきます日本／東京 ±0 オーストラリア／キャンベラ +1時間インドネシア／ジャカルタ -2時間エジプト／カイロ -7時間イギリス／ロンドン -8時間アメリカ／ニューヨーク -13時間アメリカ／サンフランシスコ -16時間

pigret

2021/07/15 07:19

画像はhtmlやscript.js　ファイルと同じ階層にありますコードは日本の時間を1秒おきに時間が更新してるところまでです

Lhankor_Mhy

2021/07/16 03:33

https://caniuse.com/temporal https://2ality.com/2021/06/temporal-api.html 再来年ぐらいには、ブラウザでもタイムゾーンが使えるようになるかも……

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

回答1件

一例です。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>JavaScript演習問題</title>
  <style>
    .hide {
      display: none;
    }
  </style>
</head>

<body>
  <h1>世界時計</h1>
  <h2>現在の『<span id="basyo">日本／東京</span>』の時刻は</h2>
  <h2>
    <span id="jikan0" class="time hide"></span>
    <span id="jikan1" class="time hide"></span>
    <span id="jikan2" class="time hide"></span>
    <span id="jikan3" class="time hide"></span>
    <span id="jikan4" class="time hide"></span>
    <span id="jikan5" class="time hide"></span>
    <span id="jikan6" class="time hide"></span>
    です。
  </h2>
  <img id="img" src="https://placehold.jp/260x280.png?text=日本／東京" width="260" height="280" alt="">
  <div id="box">
    <form id="select">
      <label><input type="radio" name="kokumei" value="0" checked>日本／東京</label><br>
      <label><input type="radio" name="kokumei" value="1">オーストラリア／キャンベラ</label><br>
      <label><input type="radio" name="kokumei" value="-2">インドネシア／ジャカルタ</label><br>
      <label><input type="radio" name="kokumei" value="-7">エジプト／カイロ</label><br>
      <label><input type="radio" name="kokumei" value="-8">イギリス／ロンドン</label><br>
      <label><input type="radio" name="kokumei" value="-13">アメリカ／ニューヨーク</label><br>
      <label><input type="radio" name="kokumei" value="-16">アメリカ／サンフランシスコ</label><br>
    </form>
  </div>
  <script>

    function set2fig(num) {
        var ret;
        if (num < 10) { ret = "0" + num; }
        else { ret = num; }
        return ret;
      }

      function showClock2(value,i) {
        var nowTime = new Date();
        var nowHour = set2fig(nowTime.getHours() + value);
        if(nowTime.getHours() + value < 0) {
          var nowHour = set2fig(24 + nowTime.getHours() + value);
        }
        var nowMin = set2fig(nowTime.getMinutes());
        var nowSec = set2fig(nowTime.getSeconds());
        var msg = nowHour + ":" + nowMin + ":" + nowSec;
        document.getElementById("jikan" + i).innerText = msg;
      }

      const form = document.getElementById("select");
      const radio = form.kokumei;
      const time = document.getElementsByClassName("time");
      const label = document.getElementsByTagName("label");
      const basyo = document.getElementById("basyo");
      const img = document.getElementById("img");

    for(let i = 0; i<radio.length; i++) {
        setInterval(`showClock2(${radio[i].value},${i})`,1000);
        form[i].addEventListener("click", () => {
          basyo.innerText = label[i].innerText;
          img.setAttribute('src', 'https://placehold.jp/260x280.png?text=' + label[i].innerText);
          for (let ind = 0; ind < time.length; ind++) {
            time[ind].classList.add("hide");
          }
          time[i].classList.remove("hide");
        });
    }

    radio[0].click();

  </script>
</body>

</html>

投稿2021/07/16 01:58