Блог

Главная - Вопросы по программированию - Как сделать так, чтобы div появлялся и исчезал на веб-странице?

Как сделать так, чтобы div появлялся и исчезал на веб-странице?

#javascript #html #jquery #css #time

Вопрос:

Я пытаюсь заставить div отображаться на веб-сайте в течение 1 минуты, а затем исчезает на 9 минут, и цикл повторяется.

Я хотел бы использовать что-то вроде приведенного ниже, а не использовать setTimeout().

 
        //gets the current time. 
var d = new Date();
if(d.getHours() >= 7 amp;amp; d.getHours() <= 15 ){
    $(".open").show();
    $(".closed").hide();
}
else {  
     $(".closed").show();
    $(".open").hide();
}

Таким образом, div будет отображаться с интервалом в каждые 10 минут, поэтому на 00:00, 00:10, 00:20, 00:30, 00:40, 00:50 проходит каждый час в течение 1 минуты, и после этой минуты div автоматически исчезает в прямом эфире на веб-странице в течение 9 минут.

Возможно ли это?

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

1. Если вы не используете setTimeout() или setInterval() , что вызовет повторный запуск кода?

2. Почему ты не хочешь использовать setTimeout() ?

3. Извините, я бы хотел, чтобы вы не могли просто обновить страницу, чтобы сбросить процесс и сразу показать div. Я бы хотел, чтобы div показывался раз в 10 минут, но в режиме реального времени

4. Когда страница загрузится, проверьте текущее время и рассчитайте время ожидания на основе этого.

Ответ №1:

 let timer;


let interval = 3000;
//You can change interval to your desireable MILLISECONDS
let showTime = 500;
//change this for div showing time
//Each div will show for 100 ms

let mainTimer = (60 - (new Date().getMinutes())) * 60000;



$(".divI").hide();
setTimeout(function() {
  let counter = true;
  htmlTimer();

  //runs function every 'interval' MS
  setInterval(function() {
    htmlTimer();
    $(".divII").hide();
    $(".divI").show();
    //hides main content div and shows close div every 'showTime' ms
    setTimeout(function() {
      htmlTimer();
      $(".divII").show();
      $(".divI").hide();
    }, showTime);
  }, interval);

}, mainTimer);




function htmlTimer() {
  clearTimeout(timer);
  let count = 0;
  timer = setInterval(function() {
    count  ;
    $('.timer').html((count * 200)   'ms');
  }, 200);
}



let remaingTime = setInterval(function() {

  mainTimer = mainTimer - 200;
  $('.currentTime').html(new Date().toString());

  $('.remainingTime').html('Remaining Time:'   (mainTimer / 60000).toFixed(1)   'Mins');
}, 200);

setTimeout(function() {
  clearTimeout(remaingTime);
  $('.currentTime').html('');
  $('.remainingTime').html('');
}, mainTimer) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='divI'>Div-1--mainContent</div>
<div class='divII'>Div-2--closeDiv</div>
<br>
<div class='timer'></div>
<div class='currentTime'></div>
<div class='remainingTime'></div>

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

1. Как это синхронизируется с :10, :20, :30 и т.д. минутами после часа?

2. Это просто чередует скрытие и отображение каждого интервала, он не отображается в течение 1 минуты и скрывается в течение следующих 9 минут.

3. Я синхронизируюсь только с минутами, если вам нужна функция для запуска в определенные часы.

4. Спасибо, я буду использовать этот код, спасибо

Метки: ,