我完全不知道从哪里开始,我将如何创建一个倒数按钮,以便每次单击我的按钮时,它都会打印出全局变量,并在innerHTML中将其减小1,当它达到0时,它将显示BOOM ?

我知道我必须在外部声明变量,但不确定之后该怎么做

JS:

var i = 20

function myFunction()
     {
      i = i--; // the value of i starting at 20
     }


HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- link to external JS file.  Note that <script> has an
  end </script> tag -->
  <meta charset="utf-8">
  <title> Task 6 </title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <script src="task6.js" type="text/javascript"></script>
</head>
<body>
  <!-- Create a paragraph with id mydata -->
  <div id="box">
  <p id="mydata"> Count Down  </p>
  <p> <button  onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>

最佳答案

我尝试了这段代码并正常工作

var i = 20;

function myFunction() {
myData = document.getElementById("mydata");

 i = i - 1;
  myData.textContent = i;

  if(i <= 0) {//with <=0 the user if click again,after zero he sees only BOOM
    myData.textContent = "BOOM!"
  }
}

HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- link to external JS file.  Note that <script> has an
  end </script> tag -->
  <meta charset="utf-8">
  <title> Task 6 </title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <script src="task6.js" type="text/javascript"></script>
</head>
<body>
  <!-- Create a paragraph with id mydata -->
  <div id="box">
  <p id="mydata"> Count Down  </p>
  <p> <button  onclick="myFunction();"> Click </button></p>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- link to external JS file.  Note that <script> has an
  end </script> tag -->
  <meta charset="utf-8">
  <title> Task 6 </title>
  <link href="style.css" type="text/css" rel="stylesheet">
  <script  type="text/javascript">
  var i = 20;

function myFunction() {
var myData = document.getElementById("mydata");

 i = i - 1;
  myData.textContent = i;

  if(i <= 0) {
    myData.textContent = "BOOM!"
  }
}


  </script>
</head>
<body>
  <!-- Create a paragraph with id mydata -->
  <div id="box">
  <p id="mydata"> Count Down  </p>
  <p> <button  onclick="myFunction();"> Click </button></p>
</div>
</body>
</html>

关于javascript - 倒数计时答题器-JS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52936195/

10-12 13:40