使 HTML 页面在 5 分钟后隐藏所有内容，仅在 30 分钟后再次显示

Question

我正在制作一个页面，完成后让人们稍作休息 5 分钟，然后在他们的 5 分钟结束后，所有 HTML 元素都将隐藏并且其他人无法访问30分钟。我试过使用 onload 事件，我输入的短时间间隔只是为了测试，但我想知道是否有人可以指出正确的方向。

PS：这是在 google 应用程序脚本项目中编码的。我所有的 code.gs 文件都是获取 html 服务的代码。

<!DOCTYPE html>
<script>
var elements = document.getElementsByTagName("*");

function kick(){


elements.style.display = 'none';

}

var interval = setInterval(kick,3000; );







</script> 
<style> 
button {
border-radius: 20px;
background-color: crimson ;
color: aqua;
border-width: 5px;

}






</style>


<html onload = 'timeOut()'>
<head>
  
    <style>
        * { padding: 0; margin: 0; }
        canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body >

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
function playGame() {   var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;

var y = canvas.height-30;
var dx = 2;
var dy = -2;
var ballRadius = 12;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var difficulty = 10
var score = 0
var gameRunning = false

function drawBall() {
    ctx.beginPath();
   ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawScore() {
    ctx.font = "24px ";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
}
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
   drawScore();
   x += dx;
    y += dy;
   
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}
if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
        difficulty = difficulty + 0.5;
  score = score + 1;
  }
    else {
        alert("GAME OVER");
        document.location.reload();
        clearInterval(interval);
   
   }
}

if(rightPressed) {
    paddleX += 5;
    if (paddleX + paddleWidth > canvas.width){
        paddleX = canvas.width - paddleWidth;
    }
}
else if(leftPressed) {
    paddleX -= 5;
    if (paddleX < 0){
        paddleX = 0;
    }
}


}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }
}
var interval = setInterval(draw, difficulty);}
 
    
 
</script>
<button onclick = 'playGame()'>play keep it alive </button>


</body>

<script>

function lookAtPup() {

  var x = document.getElementById("a");
var y = document.getElementById('b')
var z = document.getElementById('c')
var xx = document.getElementById('d')
var yy = document.getElementById('e')
var zz = document.getElementById('f')
var xxx = document.getElementById('g')
var yyy = document.getElementById('h')
var zzz = document.getElementById('i')
var xxxx = document.getElementById('j')
if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
if (y.style.display === "none") {
    y.style.display = "block";
  } else {
    y.style.display = "none";
 
}
if (z.style.display === "none") {
    z.style.display = "block";
  } else {
    z.style.display = "none";
 
}
if (xx.style.display === "none") {
    xx.style.display = "block";
  } else {
    xx.style.display = "none";
 
}
if (yy.style.display === "none") {
    yy.style.display = "block";
  } else {
    yy.style.display = "none";
 
}
if (zz.style.display === "none") {
    zz.style.display = "block";
  } else {
    zz.style.display = "none";
 
}
if (xxx.style.display === "none") {
    xxx.style.display = "block";
  } else {
    xxx.style.display = "none";
 
}
if (yyy.style.display === "none") {
    yyy.style.display = "block";
  } else {
    yyy.style.display = "none";
 
}
if (zzz.style.display === "none") {
    zzz.style.display = "block";
  } else {
    zzz.style.display = "none";
 
}
if (xxxx.style.display === "none") {
    xxxx.style.display = "block";
  } else {
    xxxx.style.display = "none";
 
}

}
  














</script>
<button onclick = 'lookAtPup()'> Look at a puppy </button>
<img id = 'a'  style = 'display: none' src = 'example image'> 
<img id = 'b'  style = 'display: none;' src = 'example image'>
<img id = 'c'  style = 'display: none;' src = 'example image'>
<img id = 'd'  style = 'display: none;' src = 'example image'>
<img id = 'e'  style = 'display: none;' src = 'example image'>
<img id = 'f'  style = 'display: none;' src = 'example image'>
<img id = 'h'  style = 'display: none;' src = 'example image'>
<img id = 'i'   style = 'display: none;' src = 'example image'>
<img id = 'j'  style = 'display: none;' src = 'example image'>
<button onclick = 'seeSatisfying()'> see something satisfying </button>
<img id = 'g1' style = 'display: none;' src = 'example image'> 
<img id = 'g2' style = 'display: none;' src = 'example image'>

<script>
function seeSatisfying(){
var gifOne = document.getElementById('g1')
var gifTwo = document.getElementById('g2')
if (gifOne.style.display === 'none') {
gifOne.style.display = 'block';


}
else {

gifOne.style.display = 'none';

}
if (gifTwo.style.display === 'none') {
gifTwo.style.display = 'block';


}
else {

gifTwo.style.display = 'none';

}
}
</script>




</html>

Answer 1

我不熟悉 Google Apps 脚本，但如果将 elements 设为 body 标签，似乎可以让所有内容消失，因为它包含页面上的所有元素, 因此使其显示 none 会使其中的所有内容不可见。除此之外，您的代码看起来不错。

Answer 2

你也许可以做类似的事情

var body = document.querySelector('body')
    
    setInterval(()=>{
        body.style.display = 'initial' ;
        setTimeout(()=>{
              body.style.display = 'none'
        }, 300000)
     }, 18300000)

使 HTML 页面在 5 分钟后隐藏所有内容，仅在 30 分钟后再次显示

Make an HTML page hide all content after 5 minutes and only show again after 30 minutes have passed

javascript

html

setinterval

onload