如果未达到或超过特定日期，则使用 javascript / jquery 隐藏元素

Question

我想只在一定时间内显示一个元素。我想用毫秒来解决这个问题。

我已经研究过但没有找到我的问题的确切答案。尤其是我对实现的想法。

我当前的代码如下。有什么问题吗？


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

Answer 1

谢谢你的回答，安德烈亚斯。希望对您有所帮助。

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

Answer 2

如果要检查框的可见性，如果需要显示或隐藏框，则需要添加一个间隔以每隔一定时间检查。

这是一个小例子：

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

Answer 3

您提供的代码有效，但仅运行一次。我的意思是，如果元素必须可见或不可见，你就错过了每毫秒循环一次。

在 Javascript 中，您有 setInterval 内置函数来完成您想要的。为了检查 "now" 是否在两个日期之间（以毫秒为单位），您需要这样设置间隔：

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 id 的标签将实时显示当前时间戳。

希望代码能帮助您理解 setInterval 的概念。

如果未达到或超过特定日期，则使用 javascript / jquery 隐藏元素

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

javascript

hide

unix-timestamp