HTML实现页面跳转

最新推荐文章于 2024-04-19 11:46:49 发布

择柒

最新推荐文章于 2024-04-19 11:46:49 发布

阅读量7.3k

点赞数 9

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_44162158/article/details/109036084

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

要用到两个页面，第一个显示密码和提交按钮，若密码正确，则跳转到另一个页面（第二个页面）。第二个页面中放入几张图片即可。

one：

<!DOCTYPE html>
<html>
<head>
<style>
	.login{
            width:350px;
            height:200px;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-150px;
            margin-top:-100px;

}
</style>
</head>
<body>
<div class="login">
<label>UserName</label><br>
<input id="username"><br>
<label>Password</label><br>
<input id="password" type="password"><br>
<button onclick="myFunction()">Validate</button>
</div>
<script>
function myFunction() {
  var i,j;
i="123456";
j=document.getElementById("password").value;
if(j==i){location.href="Untitled3.html";}
else{alert("Password Failed!Please Input Again!");}
}
</script>

</body>
</html>

two;

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  div{
    text-align:center;
	border:2px solid black;
  }
  div img{
    width:900px;
  }
  </style>
 </head>
 <body>
 <div>
  <img src="1.jpg">
<img src="2.jpg" >
<img src="3.jpg" >
</div>
 </body>
</html>

显示效果为：

显示效果如上图，UserName输入无要求，密码指定为123456；

若输入密码正确，则显示为（如下图所示）：

若密码不正确，则弹出一个窗口：留在此页面重新输入

择柒

关注

9
点赞
踩
109

收藏

觉得还不错? 一键收藏
1
评论
HTML实现页面跳转

要用到两个页面，第一个显示密码和提交按钮，若密码正确，则跳转到另一个页面（第二个页面）。第二个页面中放入几张图片即可。one：<!DOCTYPE html><html><head><style> .login{ width:350px; height:200px; position:absolute; left:50%; ...
复制链接

扫一扫