JS counter

revision:

counter examples

example 1

Click the button counter!!

code: 
          <div class="counter">
            <h4>Click the button counter!!</h4>
            <button id="clickme">click me: 0</button>
          </div>
          <script>
            let button = document.getElementById("clickme"),
            count = 0;
            button.onclick = function() {
            count += 1;
            button.innerHTML = "click me: " + count;
            }
          </script>

example 2

Time remaining till the new year ( i.e. 2024 ):

code: 
        <div>
          <h4>Time remaining till the new year ( i.e. 2023 ):</h4>
          <p class="spec" id="moment"></p> 
        </div>
        <script>
          let countDownDate = new Date("Dec 31, 2022, 24").getTime();
          let x = setInterval(function() {
              let now = new Date().getTime();
              let remaining = countDownDate - now;
              let days = Math.floor(remaining / (1000 * 60 * 60 * 24));
              let hours = Math.floor((remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
              let minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
              let seconds = Math.floor((remaining % (1000 * 60)) / 1000);

              document.getElementById("moment").innerHTML = days + "d " + hours + "h " + minutes + "m " +
              seconds + "s ";

              if (remaining < 0) {
              clearInterval(x);
              document.getElementById("moment").innerHTML = "EXPIRED";
              }
              }, 1000);
        </script>

example 3

The number increases when the picture is replaced, until the end of the package. Then it restarts from 1.


code: 
          <div>
            <h4 class="w3-center">The number increases when the picture is replaced, until the end of the package. 
            Then it restarts from 1.</h4>
            <div class="w3-container w3-center w3-large w3-text-red" id="showCount"></div> 
            <br>
            <div class="w3-content w3-section w3-display-container" style="max-width:calc(35 * 1vw)">
                <img id="slide" class="slides w3-card-4" src="1.jpg" style="width:100%"/>
                <img id="slide" class="slides w3-card-4" src="2.jpg" style="width:100%"/>
                <img id="slide" class="slides w3-card-4" src="3.jpg"  style="width:100%"/>
                <img id="slide" class="slides w3-card-4" src="4.jpg" style="width:100%"/>
                <img id="slide" class="slides w3-card-4" src="5.jpg" style="width:100%"/>
                <img id="slide" class="slides w3-card-4" src="6.jpg" style="width:100%"/>
                <img id="slide" class="slides w3-card-4" src="7.jpg" style="width:100%"/>
                <img id="slide" class="slides w3-card-4" src="8.jpg" style="width:100%"/>
              </div>
          </div>
          <script>
              let myIndex = 0;
              let myCounter = 0;
              slideShow();
          
              function slideShow() {
                  let i;
                  let x = document.getElementsByClassName("slides");
                  for (i = 0; i < x.length; i++) {
                      x[i].style.display = "none";  
                  }
                  myIndex++;
                  if (myIndex > x.length) {myIndex = 1}    
                  x[myIndex-1].style.display = "block";  
                  setTimeout(slideShow, 5000); // Change image every 5 seconds   
                  
                  myCounter++;
                  if(myCounter > x.length){myCounter = 1}
                  x[myCounter-1].return = myCounter + 1;      
                  document.getElementById("showCount").innerHTML = 'slide ' + myCounter +
                  ' of 8 slides';           
              }
            </script>