CODEWITHSUNDEEP
javascripthideunix-timestamp
F4b14n
F4b14n

Reputation: 13

Hide an element with javascript / jquery if certain date is not reached or exceeded

I would like to display an element only within a certain period of time. I would like to solve this with the milliseconds.

I have already researched but did not find an exact answer to my question. Especially not with my idea of the implementation.

My current code is the following. What is wrong with it?


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

Upvotes: 1

Views: 893

Answers (3)

paulmartimx
paulmartimx

Reputation: 234

The code you provided works, but only runs one time. What I mean is that you are missing to loop every millisecond if the element must be visible or not.

In Javascript you have the setInterval built-in function to acomplish what you want. In order to check if "now" is between two dates in milliseconds, you need to set an interval this way:

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>

As you can see un my working example... the tag with current_time id will show the current timestamp live.

I hope the code help you to understand the setInterval concept.

Upvotes: 1

Dailos Medina
Dailos Medina

Reputation: 161

If you want to check the visibility of the box, you need to add an interval to check every certain amount of time if you need to show or hide the box.

Here is a small example:

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

I have made a simple example in jsbin:

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

Upvotes: 1

F4b14n
F4b14n

Reputation: 13

Thank you for your answer, Andreas. I hope this helps.

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

Upvotes: 0

Related Questions