Скрыть элемент с javascript / jquery, если определенная дата не достигнута или превышена - PullRequest
Новая
       36

Скрыть элемент с javascript / jquery, если определенная дата не достигнута или превышена

0 голосов
/ 01 апреля 2020

Я хотел бы отобразить элемент только в течение определенного периода времени. Я хотел бы решить эту проблему за миллисекунды.

Я уже исследовал, но не нашел точного ответа на мой вопрос. Особенно с моей идеей реализации.

Мой текущий код следующий. Что с ним не так? 


var begin = 1585684800000; // Dienstag, 30.03.2020, 22:00 Uhr
var end = 1585720800000; // Mittwoch, 01.04.2020, 08:00 Uhr

var now = new Date().getTime();

//console.log(now);

if (now >= begin && now <= end) { // zwischen Dienstag, 30.03.2020, 21:59 Uhr und Mittwoch, 01.04.2020, 07:59 Uhr
    $(".box").hide();
}

Ответы [ 3 ]

0 голосов
/ 01 апреля 2020

Если вы хотите проверить видимость окна, вам нужно добавить интервал, чтобы проверять каждый определенный промежуток времени, если вам нужно показать или скрыть окно.

Вот небольшой пример: 

<script>

    $(document).ready(function () {

        var begin = new Date().getTime() + 5000; // in 5 seconds
        var end = new Date().getTime() + 10000; // in 10 seconds

        var boxVisibility = function () {

            var now = new Date().getTime();

            if (now >= begin && now <= end) {
                $(".box").show();
            } else {
                $(".box").hide();
            }
        }

        var interval = setInterval(boxVisibility, 100);
    });

</script>

Я сделал простой пример в jsbin:

https://jsbin.com/riwocup/1/edit?html, вывод

0 голосов
/ 01 апреля 2020

Код, который вы указали, работает, но только запускается один раз. Я имею в виду, что вы пропускаете l oop каждую миллисекунду, если элемент должен быть видимым или нет.

В Javascript у вас есть встроенная функция setInterval для соответствия sh тому, что вы хотите , Чтобы проверить, находится ли «сейчас» между двумя датами в миллисекундах, вам нужно установить интервал следующим образом: 

var started = Date.now();
var begin = 1585684800000;
var end = 1585720800000;

var current_time = document.getElementById("current_time");
var result = document.getElementById("result");

        var counter = setInterval(function(){

            var now = Date.now();
                    current_time.innerHTML = now;

            if(now >= begin && now <= end)
            {
                result.innerHTML = 'visible';
            } else {

        result.innerHTML = 'not visible';

             }

        }, 100);

    <span id="current_time"></span>
    <span id="result"></span>

Как вы можете видеть в моем рабочем примере ... тег с идентификатором current_time будет показать текущую временную метку в реальном времени.

Я надеюсь, что код поможет вам понять концепцию setInterval.

0 голосов
/ 01 апреля 2020

Спасибо за ваш ответ, Андреас. Надеюсь, это поможет.

--- HTML --- 

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="stylesheet.css">
    <title>Titel</title>
  </head>
  <body>   
      <div class="box"></div>

      <script type="text/javascript" src="javascript.js">

      </script>
  </body>
</html>

--- CSS --- 

.box{
    width: 100px;
    height: 100px;
    background-color: gray;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...