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>

Answer 1

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

但是在HTML中，您已经将div标签的ID定义为包含，而不是内容 ...（您错过了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>

在点击按钮上显示时间段结束后显示div

1 个答案: