HTML访问需密码，输入密码正确后跳转到另一页面

于 2024-06-18 15:31:56 发布
阅读量485 收藏 2
点赞数 8
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuxianjinbu/article/details/139774929
版权

效果展示

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    html {
  height:100%;
  background-image:url(../../INFORMATION/IMAGE/BJ.jfif);
  background-size:cover;  /* 让背景图基于容器大小伸缩 */
}
        #son {
        position: absolute;
        left: 50%;
        top: 80%;
        transform: translateX(-50%) translateY(-50%);
}
.box{
  width: 400px;
  height: 40px;
  display: inline-block;
  text-align: center;
  padding-top: 5px;
  transition:0.5s;
  background-color: transparent; 
  font-size: 2rem;
}
.box:hover
{
transform: scale(1.5);
}
    
</style>
</head>
<body style="background-color:black">
    
    <div id="son"><input id="password" class="box" onclick="huiche()"><br>
    </div>
 
 
    <script>
    function huiche(){
        document.onkeydown = function(e){
            if((e||event).keyCode==13&&document.getElementById("password").value=="zjrzdgdfFGZHDS")
            window.location.href='G.html';
        };
    }
    </script>
</body>
</html>

关键语句：
<div id="son"><input id="password" class="box" οnclick="huiche()"><br></div>

解释：
id="password"用于记录输入的内容

οnclick="huiche()"点击后调用huiche()函数

鼠标放上去后transform: scale(1.5);放大的倍数。transition:0.5s;放大的时间。

background-color: transparent;透明

关键语句：
function huiche(){

        document.onkeydown = function(e){

 if((e||event).keyCode==13&&document.getElementById("password").value=="zjrzdgdfFGZHDS")

            window.location.href='G.html';

        };

    }

解释：
document.onkeydown = function(e)检测键盘，传递数值

 if((e||event).keyCode==13 13是回车键对应的数字，“如果按下回车”

document.getElementById("password").value获得输入的值

=="zjrzdgdfFGZHDS"判断是否等于设置的密码

window.location.href='G.html';填写要打开网页的地址，正确就跳转，不对就循环。

黄献新
关注
  • 8
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的HTML登录页面制作及跳转页面
Stephen_CY666的博客
07-12 6688
密码账号邮箱:
网页特效代码 输入密码后才能进入页面
11-25
网页特效代码 输入密码后才能进入页面
html+js实现输入用户名和密码点击登录跳转页面
m0_54256047的博客
12-28 1万+
html+js实现输入用户名和密码点击登录跳转页面
用html和css写登陆页面并且跳转网站
2201_75903640的博客
08-24 3491
【代码】用html和css写登陆页面并且跳转网站。
js实现弹窗效果
10-14
主要为大家详细介绍了js实现弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
行内元素去掉外边距
Bitter的博客
08-10 325
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
js弹窗的3种方式：alert、confirm、prompt
热门推荐
Kuroko's Development Notes
12-02 1万+
先上代码：   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&..
使用js实现弹窗
xiabin_2020的博客
06-15 9218
使用js实现弹窗 就不过多讲述了，尽量简洁一些，方便观看。是否能正常显示目前只尝试了！ 360浏览器 chrome 这是HTML代码 <button id="js_show">打开弹窗</button> <!-- 弹窗 --> <div class="modal"> <div class="modal-content"> <div class="modal-body">
js弹窗效果实现
weixin_33816946的博客
03-30 348
1.首先准备好要弹出的内容,一般用ajax向后台请求数据,组装成html: 主页:a.html,含有div: &lt;div class="cms-window cms-window-other zadd-window salePrd-window"&gt; &lt;/div&gt; 副页:b.html 把副页展示在div标签上 2.数据已经组装完成,然后画出要展示内容的高和宽: functi...
HTML输入密码自定义跳转页面源码
12-23
在这个“HTML输入密码自定义跳转页面源码”中，我们看到一个简单的基于HTML的系统，它要求用户在访问特定页面前输入正确的密码。这样的功能通常用于增强网站的安全性或者限制未经授权的访问。 在`index.html`文件中...
JS弹出窗口JS弹出窗口JS弹出窗口JS弹出窗口
06-06
JS调用，JS图片物资，点一下就出来，很好用的
非常绚丽的js弹窗
08-28
非常绚丽的js弹窗 样式源代码都包括其中。
密码访问单页自定义跳转页面HTML源码
最新发布
01-22
标题中的“密码访问单页自定义跳转页面HTML源码”指的是一个基于HTML的网页设计，这个设计允许用户通过输入特定密码来访问特定的页面。这样的功能通常用于保护隐私、限制未经授权的访问或者作为简单的安全措施。在这...
网站密码访问单页-自定义密码跳转页面
03-20
网站密码访问单页是一种安全措施，它允许网站所有者设置一个特定的密码，只有输入正确的密码后，用户才能访问特定的网页。这个自定义密码跳转页面的搭建过程涉及到几个关键步骤，包括下载源码、服务器操作以及网页...
html密码验证 并跳转页面,vuejs 实现前后端分离登录验证和页面自动跳转
weixin_32655655的博客
06-03 1646
使用的技术点：vue-routeraxiosvuexelement-uiqs项目介绍：这个项目是一个类似google相册功能的项目，目前实现的是图片特征提取，可以以图搜图，最终打造成一个智能相册。后台由go语言开发，图片特征提取由c++开发，前端使用vuejs实现完全前后端分离。现在就开始我们的前段代码吧。这里我们都使用vue组件开发实现登录组件代码如下：My-Albums登 录import ax...
密码访问单页自定义跳转页面源码
02-18 917
密码访问单页自定义跳转页面，修改了的密码访问单页，添加了js自定义密码跳转页面。需要正确输入密码才能跳转目标网址。
JavaScript--弹窗
m0_74293254的博客
08-06 7048
JavaScript提供了几种常用的弹窗方法，用于与用户进行交互或显示提示消息。警告框（Alert）： 使用alert()方法创建一个警告框，它会显示一条消息并包含一个"确定"按钮。确认框（Confirm）： 使用confirm()方法创建一个确认框，它会显示一条消息并包含一个"确定"按钮和一个"取消"按钮。用户可以点击其中一个按钮来进行选择，并返回对应的布尔值结果（true表示点击了"确定"按钮，false表示点击了"取消"按钮）。提示框（Prompt）： 使用prompt()
html输入密码跳转页面
06-02
要实现在输入密码后跳转到另一个页面，可以使用HTML表单和JavaScript的方法。 首先，需要在HTML中创建一个表单，添加一个密码输入框和一个提交按钮： ``` <form id="passwordForm" action="nextpage.html" method="post"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <button type="submit">Submit</button> </form> ``` 然后，需要使用JavaScript监听表单的提交事件，并在提交前验证密码是否正确。如果密码正确，则允许表单提交并跳转到下一个页面；否则，取消表单提交并提示用户密码错误。 ``` <script> document.getElementById('passwordForm').addEventListener('submit', function(event) { var password = document.getElementById('password').value; if (password !== 'mypassword') { event.preventDefault(); alert('Incorrect password!'); } }); </script> ``` 在这个例子中，密码被硬编码为字符串“mypassword”，实际使用时需要替换为真正的密码。另外，为了安全起见，应该使用HTTPS协议来保护密码的传输。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值