Javascript 倒计时点击器-JS_Javascript_Html

Javascript 倒计时点击器-JS

javascript html

Javascript 倒计时点击器-JS,javascript,html,Javascript,Html,我完全不知道从哪里开始，我如何创建一个倒计时按钮，以便每次单击按钮时，它都打印出全局变量，并在innerHTML中将其减少1，当它达到0时，它会显示BOOM 我知道我必须在外部声明变量，但不确定以后要做什么 JS: HTML: 任务6 倒计时点击如果我搞错了，我假设您想在倒计时时显示变量输出和动臂，请更正我。比如说： let i = 20; const myData = document.querySelector("#mydata"); function myFunction() {

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

我知道我必须在外部声明变量，但不确定以后要做什么

JS:

HTML:


任务6
倒计时
点击

如果我搞错了，我假设您想在倒计时时显示变量输出和动臂，请更正我。比如说：

let i = 20;
const myData = document.querySelector("#mydata");
function myFunction() {
  i = i - 1;
  myData.textContent = i;

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

您几乎完全理解了它，只遗漏了

textContent

和

if

部分。如果这是你想要实现的。如果这不是你想要的，打电话给我，这样我就可以纠正它。干杯：）

您需要某种方式来显示变量中的数字。最简单的方法之一是使用getElementById（）和内部HTML为段落标记设置文本。例如，运行deincrement后，在下一行中，您将执行以下操作

function myFunction()
 {
  i = i--; // the value of i starting at 20
  document.getElementById("mydata").innerHTML = i;
 }

这段代码只是从DOM中获取“mydata”段落，并将数字作为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!"
  }
}

var i=20；
函数myFunction（）{
myData=document.getElementById（“myData”）；
i=i-1；
myData.textContent=i；
如果（i）
任务6
倒计时
点击


任务6
var i=20；
函数myFunction（）{
var myData=document.getElementById（“myData”）；
i=i-1；
myData.textContent=i；
如果（i在HTML中不内联JS是一种很好的做法，那么我将提供一个额外的示例来演示如何使用两种DOM选择方法将其分离出来：

let count=20；
//获取具有mydata id的元素
const mydata=document.getElementById（'mydata'）；
//抓住按钮并将单击事件侦听器附加到它-
//单击按钮时，将调用“handleClick”函数
const button=document.querySelector（'button'）；
addEventListener（'click'，handleClick，false）；
函数handleClick（）{
如果（计数==0）{
mydata.textContent='Boom'；
}否则{
mydata.textContent=计数；
}
计数--；
}

倒计时
点击
这里真的不需要innerHTML
。textContent
会更好。我不会说textContent更好。innerHTML可以让你输入样式和其他标记，其中textContent只允许你输入纯文本。我认为最好熟悉innerHTML，它稍微更健壮一些，并且能适应今天的眉毛ers几乎不知道性能的差异。问题是如何将文本添加到元素中-textContent
更好。如果您现在要将HTML添加到DOM中，insertAdjacentHtml
比innerHTML
更好。我正在尝试在innerHTML（倒计时框）中显示它因此，当单击按钮时，倒计时从20开始，然后再次单击，直到19、18、17…等，直到0，并显示BOOMWell。如果您想更改..
的innerHTML
，这样做，您将删除按钮，您将无法单击它，因为innerHTML
更改了在元素中写入的HTML因此，如果您使用document.querySelector（“#box”）.innerHTML=TEXT HERE
它将覆盖您在框
元素中的HTML，您将松开按钮，因此无法在第一个元素后单击它。因此，当我尝试添加代码时，我的innerHTML块显示20，但即使单击F12后也不会减去1，并查看是否有任何错误出现在开发者控制台。我用一个if/else
语句使代码更容易理解。最后一件事：如果您的代码在task6.js
中，请将以下行移到
前面：。这样，DOM将首先加载，然后您的代码可以提取元素。我已经将其添加到HTML c中答案中的ode。很好。我认为不使用全局变量也是一种很好的做法，因此您可以通过获取“mydata”中的当前值并在click event.parseInt（document.getElementById（“mydata”）.innerHTML）中进行减法来处理倒计时
function myFunction()
 {
  i = i--; // the value of i starting at 20
  document.getElementById("mydata").innerHTML = i;
 }

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!"
  }
}

<!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>