Timer loop instead of click event-CodePudding

Here's a flip card that works on lick but I'd like to use a timer instead of click event. The idea is that the card is flipped every 5 seconds without clicking. Is there a way where click function can be swapped with a timer/loop without affecting the entire function or structure?

var card = document.querySelector('.card');
    card.addEventListener( 'click', function() {
      card.classList.toggle('is-flipped');
    });

.scene {
      width: 200px;
      height: 260px;
      border: 1px solid #CCC;
      margin: 40px 0;
      perspective: 600px;
    }
    
    .card {
      width: 100%;
      height: 100%;
      transition: transform 1s;
      transform-style: preserve-3d;
      cursor: pointer;
      position: relative;
    }
    
    .card.is-flipped {
      transform: rotateY(180deg);
    }
    
    .card__face {
      position: absolute;
      width: 100%;
      height: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 20px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    .card__face--front {
      background: green;
    }
    
    .card__face--back {
      background: gray;
      transform: rotateY(180deg);
    }

<div >
      <div >
        <div >some text on the front</div>
        <div >some text on the back</div>
      </div>
    </div>
    <p>Click card to flip.</p>

CodePudding user response：

Thats sooo simple

Just use interval function in js Refer Here

setTimeout(function, milliseconds)
Executes a function, after waiting a specified number of milliseconds.

setInterval(function, milliseconds)
Same as setTimeout(), but repeats the execution of the function continuously.

var card = document.querySelector('.card');

    var intervalId = window.setInterval(function(){
      card.classList.toggle('is-flipped');
}, 5000);

.scene {
      width: 200px;
      height: 260px;
      border: 1px solid #CCC;
      margin: 40px 0;
      perspective: 600px;
    }
    
    .card {
      width: 100%;
      height: 100%;
      transition: transform 1s;
      transform-style: preserve-3d;
      cursor: pointer;
      position: relative;
    }
    
    .card.is-flipped {
      transform: rotateY(180deg);
    }
    
    .card__face {
      position: absolute;
      width: 100%;
      height: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 40px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    .card__face--front {
      background: green;
    }
    
    .card__face--back {
      background: gray;
      transform: rotateY(180deg);
    }

<div >
      <div >
        <div >front</div>
        <div >back</div>
      </div>
    </div>
    <p>Click card to flip.</p>