单击转到下一页 - JavaScript

On click goes to next page - JavaScript

本文关键字：JavaScript 一页 单击      更新时间：2023-09-26

你好，我脑子里有一个困惑。我正在尝试在 JS 中制作一个逻辑，当有人单击 BUTTON 然后在 1 秒后自动引导到下一页时。我尝试使用点击功能，但出现错误。我在发短信的目的中包含了简单的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>

要在 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>

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

相关文章：