Question

我目前正在为我的HTML页面制作一个JavaScript条件。并陷入这个问题。问题是，我尝试使div class =“ content”在时间> = 13点和秒数<= 10时自动出现。它的工作顺利，但我必须刷新整个页面以使div class =“ content”出现。当if条件满足要求时，是否有办法使div自动出现？请帮助

有我的代码

var timer = setInterval(myTimer, 1000);
var seconds = new Date().getSeconds();
var hour = new Date().getHours();
var greeting;
var popup;
var d = new Date();

if (seconds < 10 && hour >=13) {
  greeting = "Past 10 Seconds";
  document.querySelector(".content").style.backgroundColor = "red";
  document.querySelector(".content").style.display = "block";
} else if (seconds < 30) {
  greeting = "After 10 & Before 30 Seconds";

} else {
  greeting ="Past 30 Seconds";
  document.querySelector(".content").style.backgroundColor = "blue";
  document.querySelector(".content").style.display = "block";
}

document.getElementById("demo").innerHTML = greeting;
document.getElementById("seconds").innerHTML = d.getSeconds();

function myTimer() {
  var s = new Date();
  document.getElementById("tiktok").innerHTML = s.toLocaleTimeString();
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  display: none; 
  position: fixed; 
  z-index: 1; 
  overflow: auto;
}

<p id="demo"></p>
<p id="seconds"></p>
<p id="tiktok"></p>

<div class="content">
  <h1>FLASH SALE!!</h1>
  <p>PRODUK KECANTIKAN</p>
  <button id="myBtn" 
  onclick="window.location.href='https://tokopedia.com';">Check 
  Out</button>
</div>

Answer 1

当前，更新status元素的逻辑仅运行一次，因此要使其每秒更新一次，您需要将其移至myTimer()：

const timer = setInterval(myTimer, 1000);

function myTimer() {
    const d = new Date();
    const seconds = d.getSeconds();
    const hour = d.getHours();
    let greeting;
    let popup;

    if (seconds < 10 && hour >= 13) {
        greeting = "Past 10 Seconds";
        document.querySelector(".content").style.backgroundColor = "red";
        document.querySelector(".content").style.display = "block";
    } else if (seconds < 30) {
        greeting = "After 10 & Before 30 Seconds";
    } else {
        greeting = "Past 30 Seconds";
        document.querySelector(".content").style.backgroundColor = "blue";
        document.querySelector(".content").style.display = "block";
    }

    document.getElementById("demo").innerHTML = greeting;
    document.getElementById("seconds").innerHTML = seconds;
    document.getElementById("tiktok").innerHTML = d.toLocaleTimeString();
}

<p id="demo"></p>
<p id="seconds"></p>
<p id="tiktok"></p>

<div class="content">
    <h1>FLASH SALE!!</h1>
    <p>PRODUK KECANTIKAN</p>
    <button id="myBtn" onclick="window.location.href='https://tokopedia.com';">
        Check Out
    </button>
</div>

Answer 2

将所有内容移至myTimer()函数中即可。

var timer = setInterval(myTimer, 1000);

function myTimer() {
    var s = new Date();
    document.getElementById("tiktok").innerHTML = s.toLocaleTimeString();

    var seconds = new Date().getSeconds();
    var hour = new Date().getHours();
    var greeting;
    var popup;
    var d = new Date();

    if (seconds < 10 && hour >=13) {
        greeting = "Past 10 Seconds";
        document.querySelector(".content").style.backgroundColor = "red";
        document.querySelector(".content").style.display = "block";
    } else if (seconds < 30) {
        greeting = "After 10 & Before 30 Seconds";

    } else {
        greeting ="Past 30 Seconds";
        document.querySelector(".content").style.backgroundColor = "blue";
        document.querySelector(".content").style.display = "block";
    }
    document.getElementById("demo").innerHTML = greeting;
    document.getElementById("seconds").innerHTML = d.getSeconds();
}

Answer 3

在html like中创建一个空白div，并在满足条件时使用java脚本将display属性设置为block

html

 <div style="display:none" class="content"> </div>

javascript

  <script>   
 if(condition == true) { 
  x = document.getElementById("myDIV").style.display = "block";
  }
 </script>

如何在javascript中的if条件下自动显示<div class =“”>

3 个答案: