Блог

Главная - Вопросы по программированию - При нажатии кнопки показать div после завершения периода времени

При нажатии кнопки показать div после завершения периода времени

#javascript

#javascript

Вопрос:

Я пользователь 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>

Комментарии:

1. Извините, Stack Overflow — это сайт для вопросов и ответов. Список требований не считается вопросом и не воспринимается сообществом здесь. Пожалуйста, напишите свою программу, и если у вас возникнут трудности с реализацией какого-либо пункта, не стесняйтесь спрашивать об этой трудности, показывая свой код, что вы ожидали, и что пошло не так.

2. после завершения загрузки вы хотите показать conten div?

Ответ №1:

Внутри вашего function frame() вы устанавливаете видимый элемент DOM с идентификатором содержимого document.getElementById('content').style.display='block'; , а также в CSS как #content .

Но в HTML , вы определили идентификатор div тега для содержимого вместо содержимого… (вы пропустили окончание t в html).

Редактировать: Вы упомянули, что вам нужна анимация кругового загрузчика вместо индикатора выполнения. Просто замените индикатор выполнения загрузчиком. Вы могли бы создать простой циклический загрузчик, используя только 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>

Комментарии:

1. этот код работает здесь хорошо, но он не работает в wordpress Я помещаю css в файл css и js-код в файл нижнего колонтитула и html-код в моем сообщении, но он не скрывает мой контент и не показывает загрузчик что мне делать?

2. не могли бы вы опубликовать jsfiddle ? Сложно отлаживать такие случаи без ошибок или самого кода

3. это мой идентификатор для входа в wp, пожалуйста, сэр login = admin password = пароль и проверьте, где ошибка, я поместил скрипт в файл нижнего колонтитула. CSS в файле css и html в моем сообщении отредактируйте сообщение и выберите html, вы увидите html-код, пожалуйста, проверьте, что это oworo.com/wp-admin/post.php?post=1587amp;action=edit

4. приятель, я не очень хорошо знаком с wordpress. Я не могу найти ваши скрипты или css.