Javascript/HTML - 隐藏 DIV 直到单击按钮

Question

我想在单击按钮之前隐藏 div“状态”。我怎样才能在我的 js 中实现这一点？

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 5500) {
    status.innerHTML = "100%";
    bar.value = 5500;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is complete";
  }
}

<div class="status">
  <progress id="progressBar" value="0" max="5500" style="width:100%;"></progress>
  <span id="status"></span>
  <br>
  <center>Generating event...</center>
</div>

<center><button style="margin-top: 20px;" class="btn btn-success" onclick='start(0)'>Submit</button></center>

Answer 1

无需使用内联样式或为任务创建自己的 CSS 类。任何 HTML 元素都有一个 hidden property and attribute available (哪个同步)，每个浏览器都有这样的用户代理默认样式:

[hidden] { display: none; }

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('button.btn.btn-success')
    .addEventListener('click', () => start(0));
})

function start(al) {
  document.querySelector('div.status').hidden = false;
  const bar = document.getElementById('progressBar');
  const status = document.getElementById('status');
  status.textContent = al + "%";
  bar.value = al;
  al++;
  const sim = setTimeout(() => start(al), 1);
  if (al == 5500) {
    status.textContent = "100%";
    bar.value = 5500;
    clearTimeout(sim);
    document.getElementById('finalMessage').textContent = "Process is complete";
  }
}

.btn.btn-success {
  display: block;
  margin: 20px auto 0;
  width: fit-content;
}

#progressBar {
  width: 100%;
}

<div class="status" hidden>
  <progress id="progressBar" value="0" max="5500"></progress>
  <span id="status"></span>
  <br>
  <center>Generating event...</center>
  <div id="finalMessage"></div>
</div>

<button class="btn btn-success">Submit</button>

我还做了其他几项改进:

• 您不应该使用 innerHTML 来设置文本内容。请改用 textContent。
• 使用 const 和 let 代替 var。
• 不要将 setTimeout 与 string 作为第一个参数。相反，传递一个函数来进行您想要的调用。
• 不要使用内联样式。相反，使用 CSS 选择器和外部 CSS 来设置元素的样式。
• 不要使用像 center 这样的表示性的、已弃用的标签。让 CSS 处理视觉效果。
• 不要使用内联事件监听器。相反，等到 DOM 准备就绪(DOMContentLoaded 事件发生)，然后使用 addEventListener()注册事件处理程序。