HTML设置密码，输入密码正确后跳转到另一页面。html中inpute标签透明设置。鼠标放上去放大impute标签。

填写要打开网页的地址，正确就跳转，不对就循环。if((e||event).keyCode==13 13是回车键对应的数字，“如果按下回车”document.getElementById("password").value获得输入的值。onclick="huiche()"点击后调用huiche()函数。=="zjrzdgdfFGZHDS"判断是否等于设置的密码。id="password"用于记录输入

K-Flny

5967人浏览 · 2022-10-17 17:32:13

K-Flny · 2022-10-17 17:32:13 发布

关键语句：

解释：

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';填写要打开网页的地址，正确就跳转，不对就循环。

效果：

跳转成功

代码：

<!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>

解释：