Chciałbym wyświetlić element tylko w określonym przedziale czasu. Chciałbym rozwiązać ten problem w milisekundach.

Szukałem już informacji, ale nie znalazłem dokładnej odpowiedzi na moje pytanie. Szczególnie nie z moim pomysłem na realizację.

Mój obecny kod jest następujący. Co jest z tym nie tak?


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();
} 

0
F4b14n 1 kwiecień 2020, 09:50

3 odpowiedzi

Najlepsza odpowiedź

Podany kod działa, ale tylko działa jednorazowo. Chodzi mi o to, że brakuje ci pętli co milisekundę, czy element musi być widoczny, czy nie.

W JavaScript masz wbudowaną funkcję setInterval, aby osiągnąć to, co chcesz. Aby sprawdzić, czy „teraz” jest między dwiema datami w milisekundach, musisz ustawić interwał w ten sposób:

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>

Jak widać na moim przykładzie roboczym ... znacznik z identyfikatorem current_time pokaże aktualny znacznik czasu na żywo.

Mam nadzieję, że kod pomoże Ci zrozumieć koncepcję setInterval.

0
paulmartimx 1 kwiecień 2020, 07:37

Dziękuję za odpowiedź, Andreas. Mam nadzieję, że to pomoże.

--- 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;
}
0
F4b14n 1 kwiecień 2020, 07:13

Jeśli chcesz sprawdzić widoczność pola, musisz dodać interwał, aby sprawdzać co określony czas, czy musisz pokazać lub ukryć pole.

Oto mały przykład:

<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>

Zrobiłem prosty przykład w jsbin:

https://jsbin.com/riwocup/1/edit?html,output

0
Dailos Medina 1 kwiecień 2020, 07:36