javascript - 单击按钮在时间段结束后显示 div

Question

我是 wordpress 用户，我有一个网站。它的跳出率很高，所以我想要一个加载器，它会在特定时间段完成后显示一个 div onclick 按钮。

注意：当时间段开始时，它必须向用户显示一个循环加载器，但时间段应该在后台完成。用户不应该只看到一个加载器。

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 100);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
      document.getElementById('content').style.display='block';
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}

#myProgress {
  width: 110%;
  float:center;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}
#content{
    display:none;
}
#button{padding:1em;
margin:auto;}

<div id="myProgress">
  <div id="myBar"></div>
</div>
<br> 
<button onclick="move()">Download Movie</button>
<div id="conten"><br>

<p>hello loader is successful</p>

 
</div>

<script src="build/app.js?v=4" type="text/javascript"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114581422-1"></script>

标签： javascript

Answer 1

在您的内部，您将具有 ID内容function frame()的 DOM 元素设置为可见，并且在 CSS 中也设置为.document.getElementById('content').style.display='block';#content

但是在 中HTML，您已将div标签的 ID 定义为conten而不是content ...（您错过了 html 中的结尾t）。

编辑：你提到你需要一个循环加载动画而不是进度条。只需将进度条替换为加载程序即可。您可以使用html和创建一个简单的循环加载器CSS。当进度尚未 100% 时，显示加载动画。完成后，只需隐藏它。

function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 100);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
      document.getElementById('loader').style.display = 'none';
      document.getElementById('content').style.display = 'block';
    } else {
      width++;
      document.getElementById('loader').style.display = 'block';
    }
  }
}

#myProgress {
  width: 110%;
  float: center;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

#content {
  display: none;
}

#button {
  padding: 1em;
  margin: auto;
}

.loader {
  border: 8px solid #000000; /* black */
  border-top: 8px solid #ffffff; /* white */
  border-radius: 50%;
  width: 45px;
  height: 45px;
  animation: spin 2s linear infinite;
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div class="loader" id="loader">
</div>

<br>
<button onclick="move()">Download Movie</button>
<div id="content"><br>

  <p>hello loader is successful</p>

</div>

<script src="build/app.js?v=4" type="text/javascript"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-114581422-1"></script>