HTML实现页面跳转

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

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；

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

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

HTML实现页面跳转相关推荐

android上方导航条跳转页面,《成为大前端》系列 7. 多页面、页面跳转和Navigation模块...
介绍开发过移动 Web 页面的同学都知道,单个页面由客户端的 UI 所承载,页面间的跳转也不再是使用 window 和 location,也不是使用 a 标签,而且调用 Native 写好的 br ...
aspx跳转页面的符号_解决SpringBoot+MyBatis框架下页面跳转问题与代码优化处理。...
一.关于页面跳转的疑问后台「return "/pool/index"」返回的是字符串,会自动寻找名为"index"的页面模板文件是怎样实现的? 答:这是Spr ...
python页面跳转中_python web页面跳转
接到项目需求.需要搭建一个页面进行交互,慢慢来 b (2).jpg 使用python django框架进行页面的搭建在项目文件下打开窗口,输入命令; django-admin startprojec ...
php中怎样阻止网页进行跳转,阻止php页面跳转方法
阻止php页面跳转方法一. header 函数 header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. 参数 void header (string string [,bo ...
Swift中页面跳转与传值：
1.简单方式首先,Swift的跳转可分为利用xib文件跳转与storyboard跳转两种方法,我这里选择使用storyboard的界面跳转方法. 1.通过在storyboard中拉button控件建 ...
SilverLight 4页面跳转大全
http://blog.csdn.net/lihaiyin/article/details/5674766 //Silverlight页面的跳转 //(Application.Current.Roo ...
Struts2——学习(5)：页面跳转
2019独角兽企业重金招聘Python工程师标准>>> 一,说到页面,记得在总体介绍中,说到Struts2比Struts1的一方面优势就是它支持更多的视图技术(Freemarker, ...
form表单只提交数据而不进行页面跳转的解决方案
转载将数据提交到saveReport(form的action指向)页面,但是页面又不进行跳转,即保持当前页面不变呢?利用jquery的ajaxSubmit函数以及form的onsubmit函数完成 ...
说说如何使用 vue-router 实现页面跳转
vue-router 有两种实现页面跳转的方法. 1 <router-link> 组件 <template><div><h3>首页</h3> ...
问题解决10使用带有框架的页面跳转到登录页面时，登录页面只显示在子框架中，未能铺满整个浏览器--解决方案如下：...
问题描述: 使用带有框架的页面跳转到登录页面时,登录页面只显示在子框架中,未能铺满整个浏览器,例如: 当登录信息过期时,点击左边的菜单栏会让登录页面显示在右边的框架中,而不能铺满整个浏览器解决方案: ...

HTML实现页面跳转

HTML实现页面跳转相关推荐

最新文章

热门文章