最初のボタンがクリックされた場合には、第2ボタンはクリックすることができます

ユチョン:

私は、あなたがクリックした現在の時刻が表示されます開始クロックのためにこのスクリプトを持っているので。停止をクリックしたときにも同じことが起こります。私が今起きたいのは、私が最初のボタンをクリックすると、最初の1がクリックされたときに、第2のボタンは、あなたのようにアクティブになることだけ番目のボタンをクリックすることができるということです。

私のHTML

**<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style/new-style.css">
  <title>Digital Clock</title>
</head>

<body>
<center>
  <button class="panel2" onclick="CurrentTime()">Start rit</button>
  <p>Start van de Rit: <span id="Start Rit" /></p>
  <button class="panel1" onclick="ZaWarduu()">Stop rit</button>
  <p>Einde van de Rit: <span id="Einde Rit"/></p>
  <p>Clock : <span id="Clock" /></p>
    <script type="text/javascript">
    </script>
  </center>
  </body>

  </html>

Javascriptコード

    //Met deze functie word de tijd op dit moment laten zien in de html code met het id:clock
    var time;
    function ItsShowTime(){
            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();

            h = (h < 10) ? "0" + h : h;
            m = (m < 10) ? "0" + m : m;
            s = (s < 10) ? "0" + s : s;
            time = h + ":" + m + ":" + s;

            document.getElementById("Clock").textContent = time;
            setTimeout(ItsShowTime, 1000);
    }

    //Met deze functie zorg je ervoor dat als je klikt op start rit de tijd op dit moment er komt te staan.
    function CurrentTime(){
      //var value kijkt hoeveel er word geklikt op de knop start rit. Je kan dat zijn door de pagina te inspecteren en naar console te gaan als je daar eenmaal bent klik op start rit dan zie je hoe de var value omhoog gaat bij een laat hij de tijd zjin bij twee komt de alert te staan.
      var value = parseInt(document.getElementById('Start Rit').value, 10);
      value = isNaN(value) ? 0 : value;
      value++;
      document.getElementById('Start Rit').value = value;
      console.log(value);
      // deze if statement zorgt ervoor dat als er nog een keer geklikt word op start dat er een alert oppupt.
      if (value == 1) {
        document.getElementById("Start Rit").innerText = time;

      }
      if(value != 1){
        alert("Rit kan niet opnieuw gestart worden.");
      }
    }
    function ZaWarduu(){
      var value2 = parseInt(document.getElementById('Einde Rit').value, 10);
      value2 = isNaN(value2) ? 0 : value2;
      value2++;
      document.getElementById('Einde Rit').value = value2;
      console.log(value2);
      // deze if statement zorgt ervoor dat als er nog een keer geklikt word op start dat er een alert oppupt.
      if (value2 == 1) {
        document.getElementById("Einde Rit").innerText = time;

      }
      if(value2 != 1){
        alert("Rit kan niet opnieuw gestopt worden.");
      }
    }

    function KeepTime(){
      if (Location.reload(DigitalClock.html)){

      }
    }
    ItsShowTime();
    KeepTime();

私は、スタックオーバーフロー上の同様の質問のカップルを見て、残念ながら、私は何かを見つけることができませんでしたグーグルでいくつかの検索結果を見てみました。

トーマス・ミニョン:

あなたは複雑さを追加したい場合はexempleため、またはReduxのような店を経由してのlocalStorageを経由して、これらの二つのボタンの間で状態を共有する:)

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=282798&siteId=1