单独的点击，相同的按钮，功能然后恢复正常

Question

我可以单击按钮并更改它，但我希望能够再次单击它并使其 return 恢复正常，最好使用 Vanilla JavaScript 或 JavaScript.

我已经包含了我的 HTML、CSS 和 JavaScript 代码。看了很多论坛，问的最多的是运行一键多用；但是，我希望能够运行一个接一个地点击分离功能。或者有没有办法让第二次点击自动使其 return 正常而无需编写单独的函数？

function thermometer(){
  var a;

  a=document.getElementById('span1');
  a.innerHTML = `<i class="fas fa-thermometer-empty"></i>`;
  setTimeout(function () {
    a.innerHTML = `<i class="fas fa-thermometer-quarter"></i>`;
  }, 1000);
  setTimeout(function(){
    a.innerHTML = `<i class="fas fa-thermometer-half"></i>`;
  }, 2000)
  setTimeout(function(){
    a.innerHTML = `<i class="fas fa-thermometer-three-quarters"></i>`;
  }, 3000)
  setTimeout(function(){
    a.innerHTML = `<i class="fas fa-thermometer-full"></i>`;
  }, 4000)
}

thermometer();
setInterval(thermometer, 5000);

function myFunction(){
  b=document.getElementById('jo');
  b.innerHTML = `<i class="fas fa-meh-rolling-eyes"></i>`;
}

#span1{
  font-size: 80px;
  color: hotpink;
  padding-left: 20px;
  }
#span1:hover {
  color:rgb(219, 33, 0);
  }
.todo-button{
  font-size: 38px;
  width: 120px;
  height: 60px;
  color: white;
  background: lawngreen;
  border: none;
  border-radius: 6px;
  }
.fa-grin-tongue:hover{
  color: yellow;
  }
h1{
  font-family: 'Paytone One', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-bottom: 20px;
  font-size: 45px;
  color:hotpink;
  }

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
    <title>Todo List</title>
</head>

<body>
    <header>
        <h1 id="h1t">Thermo-Listing<span id="span1"></span></h1>
        <form class="todo-input"></form>
<!--Button Information Below-->
        <button onclick="myFunction();" class="todo-button" type="submit" id="jo"><i class="fas fa-grin-tongue"></i></button>
    </header>
    <div class="todo-container">
        <ul class="todo-list">
        </ul>
    </div>
    <script src="script.js"></script>
    <script src="https://kit.fontawesome.com/e4dab53a8c.js" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

我正在引入一个 toggle 变量，它会随着您在函数中的每次点击而递增。基于模数 % 2，我们可以交替切换以显示您的不同表情符号。

let toggle = 0;
const rolling = '<i class="fas fa-meh-rolling-eyes"></i>';
const tongue = '<i class="fas fa-grin-tongue"></i>';

function thermometer(){
  var a;

  a=document.getElementById('span1');
  a.innerHTML = `<i class="fas fa-thermometer-empty"></i>`;
  setTimeout(function () {
    a.innerHTML = `<i class="fas fa-thermometer-quarter"></i>`;
  }, 1000);
  setTimeout(function(){
    a.innerHTML = `<i class="fas fa-thermometer-half"></i>`;
  }, 2000)
  setTimeout(function(){
    a.innerHTML = `<i class="fas fa-thermometer-three-quarters"></i>`;
  }, 3000)
  setTimeout(function(){
    a.innerHTML = `<i class="fas fa-thermometer-full"></i>`;
  }, 4000)
}

thermometer();
setInterval(thermometer, 5000);

function myFunction(){
  b=document.getElementById('jo');
  b.innerHTML = (++toggle % 2) ? rolling : tongue;
}

#span1{
  font-size: 80px;
  color: hotpink;
  padding-left: 20px;
  }
#span1:hover {
  color:rgb(219, 33, 0);
  }
.todo-button{
  font-size: 38px;
  width: 120px;
  height: 60px;
  color: white;
  background: lawngreen;
  border: none;
  border-radius: 6px;
  }
.fa-grin-tongue:hover{
  color: yellow;
  }
h1{
  font-family: 'Paytone One', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-bottom: 20px;
  font-size: 45px;
  color:hotpink;
  }

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
    <title>Todo List</title>
</head>

<body>
    <header>
        <h1 id="h1t">Thermo-Listing<span id="span1"></span></h1>
        <form class="todo-input"></form>
<!--Button Information Below-->
        <button onclick="myFunction();" class="todo-button" type="submit" id="jo"><i class="fas fa-grin-tongue"></i></button>
    </header>
    <div class="todo-container">
        <ul class="todo-list">
        </ul>
    </div>
    <script src="script.js"></script>
    <script src="https://kit.fontawesome.com/e4dab53a8c.js" crossorigin="anonymous"></script>
</body>

</html>

单独的点击，相同的按钮，功能然后恢复正常

Separate Clicks, same Button, function then back to normal

javascript

button

font-awesome