时间戳

首页 > 解决方案 > Javascript/HTML - 隐藏 DIV 直到单击按钮

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

问题描述

我想隐藏 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>

标签： javascripthtml

解决方案

  1. status最初隐藏您的课程。
.status {
   display: none;
}
  1. 按下按钮时，使用 JavaScript取消隐藏类status
document.querySelector(".status").style.display = "block";

您的代码中的一些改进：

  1. 尽量避免 和 使用相同的class名称id。

在您的代码中，status是class和id。

我已将其更改为status-of-progress-bar以下代码。

  1. finalMessage未在您的 HTML 中用作 ID，因此添加到<center>标签中

注意：现在不推荐使用center标签，未来很多浏览器可能不支持它。

  1. 使用.disabled属性，我们可以在用户按下一次按钮时禁用该按钮，这样用户就不能再次按下该按钮。

function start(al) {
  document.querySelector(".btn").disabled = true;
  document.querySelector(".status").style.display = "block";
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status-of-progress-bar');
  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";
  }
}
.status {
 display: none;
}
<div class="status">
  <progress id="progressBar" value="0" max="5500" style="width:100%;"></progress>
  <span id="status-of-progress-bar"></span>
  <br>
  <center id="finalMessage">Generating event...</center>
</div>

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

推荐阅读