如何在 javascript 中自动显示 <div 类> from if 条件

Question

我目前正在为我的html页面设置一个javascript条件。陷入了这个问题。问题是，我试图让div class="content"在时间>=13点且秒数<10.它工作顺利，但我必须刷新整个页面才能显示div class="content"。有没有办法让div在if条件满足要求时自动出现？请帮助

这是我的代码

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

移动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 2

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

html

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

javascript

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

Answer 3

目前，更新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>