Question

你好我脑子里有一个混乱。我试图在JS中创建一个逻辑，当点击BUTTON然后在1s后自动导致下一页。我试图使用onclick函数，但我收到错误。我为了发短信而包含了简单的html和css。有人能帮我吗。此逻辑也必须适用于任何页面。

干杯！

#btn {
    position: relative;
	width: 300px;
	height: 80px;
	content: 'Button';
	background: blue;
  border-radius: 9px;
  color: white;
  vertical-align: center;
}

#next {
    position: relative;
	width: 300px;
	height: 80px;
	content: 'Button';
	background: blue;
  border-radius: 9px;
  color: white;
  margin-top:50px;
}

#text {
  margin:auto;
  position: relative;
  width: 80px;
  height: 40px;

  padding-top: 30px;
}

<<!DOCTYPE html>
<html>
<head>
	<title>!!!AAA!!!</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="btn"><div id="text">Button</div></div>
	<div id="next"><div id="text">next</div></div>

</body>
</html>

Answer 1

要在1秒后转到其他页面，您需要在按钮上使用setTimeout()和window.location以及onclick事件的组合。

我假设你想要使用旁边的按钮来实现这一目标。

首先创建第二个html测试页。

<html>

<body>
  <h1>Page 2</h1>
</body>

</html>

并在您分享的代码中，在ID为</div>标记后，添加以下内容：

<!DOCTYPE html>
<html>

<head>
  <title>!!!AAA!!!</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="btn">
    <div id="text">Button</div>
  </div>
  <div id="nextPage">
    <button id="next" onclick="switchLocation(0)">next</button>
  </div>
  <script>
    function switchLocation(counter) {
      if (counter == 0) {
        counter = 1;
        setTimeout(function() {
          switchLocation(counter);
        }, 1000);
      } else {
        window.location = "page2.html";
      }
    }
  </script>
</body>

</html>

我稍微编辑了你的代码。删除了第一行的额外<，并将“next”div更改为按钮。

点击进入下一页 - JavaScript

1 个答案: