问题描述
我正在创建一个页面，该页面完成后将让人们稍事休息5分钟，然后在5分钟结束后，所有HTML元素将隐藏起来，并且在接下来的30分钟内将无法访问。我尝试使用onload事件，键入的短间隔仅用于测试，但我想知道是否有人可以指出正确的方向。
PS：这是在Google Apps脚本项目中编码的。我所有的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,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,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>解决方法
我对Google Apps脚本不熟悉，但是如果您将elements设置为body标签，则看起来一切都可能消失，因为它包含了页面上的所有元素，因此使其显示没有人能使其中的一切都看不见。
除此之外，您的代码看起来还不错。
您也许可以做类似的事情
var body = document.querySelector('body')
setInterval(()=>{
body.style.display = 'initial' ;
setTimeout(()=>{
body.style.display = 'none'
},300000)
},18300000)