时间戳

首页 > 解决方案 > 单独的点击，相同的按钮，功能然后恢复正常

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

问题描述

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

我已经包含了我的 HTML、CSS 和 JavaScript 代码。看了很多论坛，大部分问题都是关于一键运行多个功能的；但是，我希望能够一次又一次地运行单独的功能。或者有没有办法让第二次点击自动让它恢复正常而不编写单独的函数？

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>

标签： javascriptbuttonfont-awesome

解决方案

我正在引入一个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>

推荐阅读