Question

计时器结束后，我按下了“结束会话”按钮，我希望它显示开始按钮，并使它看起来像从一开始一样。我已经在第一部分显示了开始按钮，但是counter仍然存在。最好的方法是什么？

var startButton = document.getElementById("start");
var startSound = document.getElementById("audio"); 
var timerSound = document.getElementById("timer");
var counter = document.getElementById("counter");
var pausePlay = document.getElementsByClassName("pausePlay");
var pauseButton = document.getElementById("pause");
var playButton = document.getElementById('play');
var middleButtons = document.getElementsByClassName("middleButtons");
var fiveMin = document.getElementById("fiveMin");
var end = document.getElementById("endSess");
var redo = document.getElementById("redo");


function playAudio(){
    startSound.play();
}

// Start button will disappear after click and countDown method will begin
function startTimer(){
    startButton.style.display="none"; 
    for (var i = 0; i < pausePlay.length; i++) {
        pausePlay[i].style.display = "block";
      }

    
    countDown(10);
}
// function play(){
   
// }

function countDown(minutes){
    var seconds = 60;
    var mins = minutes;
    function tick(){

        var current_minutes = mins - 1;
        seconds --;

        counter.innerHTML = current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        if(seconds > 0){
            timer = setTimeout(tick, 1);
        } else {
            if(mins > 1){
                countDown(mins - 1);
            }
            else if (mins && seconds === 0 ){
               timerSound.play();
               for (var i = 0; i < pausePlay.length; i++){
                pausePlay[i].style.display = "none";
                }
                options();
            }
        }
    }    
    tick();
  }
// Pause timer
  function pauseTimer(){
    clearInterval(timer);
    disable(pauseButton); enable(playButton);
  }
// Continue timer
function playTimer(){
   countDown();
}
 

// Display buttons after timer is finished  
  function options(){
    for(var i = 0; i < middleButtons.length; i++){
        middleButtons[i].style.display = "block";
    }
  }
// Add five minutes to Counter as countdown
  function fiveBreak (){
      countDown(5);
  }
// Restart counter to another 25 minutes
  function restartTimer(){
    countDown(10);
}

// Start from the beginning with the start timer
  function endSess(){
    for(var i = 0; i < middleButtons.length; i++){
        middleButtons[i].style.display = "none";
        counter.style.display = "none";
    }
     startButton.style.display = "";
  }

startButton.addEventListener('click', startTimer, playAudio);
pauseButton.addEventListener('click', pauseTimer, playAudio );
playButton.addEventListener('click', playTimer, playAudio );
fiveMin.addEventListener('click', fiveBreak );
end.addEventListener('click', endSess);
redo.addEventListener('click', restartTimer);

body {

    background-image: url("imgs/path.jpeg")
}

a {
    text-decoration: none !important;
    color: inherit !important;
}
.header {
    text-align: center;
    margin-top: 70px;
    font-family: 'Gloria Hallelujah', cursive;
    font-size: 100px;
    
}
/* h1 {
    text-align: center;
    font-family: 'Shadows Into Light', cursive;

} */

#pom-header {
    font-size: 100px;
}

.container {
   display: flex;
    flex-direction: row;
    justify-content: center;
 

}


.buttons {
    display: flex;
    /* margin-top: 400px; */
    height: 500px;
    
    align-items: center;
}
.pausePlay {
    display: flex;
    align-items: center;
    margin-top: 75px;
}

#start {
    border-style: solid;
    border-color: black;
    border-radius: 500px;
    border-width: 5px;
    font-size: 50px;
    padding: 50px;
    outline:none;
    font-family: 'Montserrat', sans-serif;
}

#pause, #play {
    border-style: solid;
    border-color: black;
    border-radius: 100px;
    border-width: 5px;
    font-size: 5px;
    padding: 50px;
    margin-right: 40px;
    margin-left: 50px;
    outline:none;
    font-family: 'Montserrat', sans-serif;
}

#fiveMin, #endSess, #redo {
    margin-top: 40px;
    border-style: solid;
    border-color: black;
    border-radius: 90px;
    border-width: 5px;
    font-size: 1px;
    padding: 50px;
    margin-right: 20px;
    margin-left: 20px;
    outline:none;
    font-family: 'Montserrat', sans-serif;
}


#pause:hover, #play:hover{
    background-color: #02798F;
    color: #FFFFFF;
    transition: all 0.20s ease;
}


#fiveMin:hover, #endSess:hover, #redo:hover{
    background-color: #02798F;
    color: #FFFFFF;
    transition: all 0.20s ease;
}
#start:hover{
	background-color: #02798F;
    color: #FFFFFF;
    transition: all 0.20s ease;
}

#counter {
    margin-top: 10px;
    padding-right: 40px;
    text-align: center;
    align-items:center;
    font-family: 'Montserrat', sans-serif;
    font-size: 100px;
    padding-top: 120px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pomodoro App</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    

</head>
<body>

        <div class="header">   
            
                <h1 id="pom-header"><a href="https://francescocirillo.com/pages/pomodoro-technique">Pomodoro</a> App</h1>
        </div>
    <div class="container">
        <div class="buttons">
                <button id ="start" type="button" onclick="playAudio()">Start</button>
                <audio id="audio">
                    <source src="clicksound.wav" type="audio/ogg "> 
                </audio>
                <audio id="timer">
                    <source src="gong.mp3" type="audio/ogg "> 
                </audio>
        </div>

        <div id="middle">
            <div id="counter"></div>
            <div class="pausePlay" style="display: none">
              <div class="row mr-3">
                <button id="pause">
                    <i class="fas fa-pause" style="font-size: 40px"></i>
                  <!-- <i class="fas fa-pause" style="font-size: 40px"></i> -->
                </button>
                <button id="play" onclick="playAudio()">
                   <i class="fas fa-play" style="font-size: 40px"></i>
                </button>
              </div>
            </div>
            <div class="middleButtons" style="display: none">
              <div class="row mr-3">
                <button id="fiveMin" onclick="playAudio()">
                  <h1>5 Min Break</h1>
                </button>
                <button id="redo" onclick="playAudio()">
                  <h1>Restart</h1>
                <button id="endSess" onclick="playAudio()">
                  <h1>End Session</h1>
                </button>
              </div>
            </div>
          </div>


        
    
    
    <script src="app.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

我不确定这是否是您要查找的内容，但是每次按开始按钮（即display的开头）时，只需重置counter的{{1}}功能：

startTimer

单击按钮后如何将元素更改为默认值？

1 个答案: