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

2024-06-03 03:22:06

关键语句：

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

效果：

跳转成功

代码：

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

解释：

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

java中登陆界面怎么连接到下一个界面啊_JavaWeb登陆成功后跳转到上一个页面
JavaWeb登陆成功后跳转到上一个页面,这个标题注定要词不达意,你可能会遇到这样的情形,当点击页面的某个请求时,由于用户未登录,需要跳转到登录页,用户登录成功后,再跳转到上一个页面:还有一种情况,多 ...
JavaWeb登陆成功后跳转到上一个页面
JavaWeb登陆成功后跳转到上一个页面,这个标题注定要词不达意,你可能会遇到这样的情形,当点击页面的某个请求时,由于用户未登录,需要跳转到登录页,用户登录成功后,再跳转到上一个页面:还有一种情况,多 ...
登录成功后怎么跳转页面html,怎么设置登录成功后跳转到相应的页面
想要用angularjs实现的功能是一进入就是一个登录页面(login.html),如果没有账号密码就注册,登录成功后跳转到相应的页面(shopcart.html) 碰到的问题 1.一进入页面没有显 ...
html登陆成功后跳转页面跳转,怎么设置登录成功后跳转到相应的页面
想要用angularjs实现的功能是一进入就是一个登录页面(login.html),如果没有账号密码就注册,登录成功后跳转到相应的页面(shopcart.html) 碰到的问题 1.一进入页面没有显 ...
Struts 拦截器权限控制【通过拦截器实现登录后跳转到登录前页面】
应用情形:在web项目中,经常会遇到用户未登录或SESSION失效时用户发出非法的权限操作,如新闻的评论.文件的下载等等,在此我们可以使用struts拦截器对该用户发出的请求进行拦截,拦截后判断用户是 ...
html输入密码正确后实现弹窗,仿微信输入支付密码的弹窗
微信输入支付密码的弹窗效果相信大家都见过吧,先描述下它的特点(这里先不做微信支付的时候选择支付方式这一块): 1.模态显示,背景灰色,点击背景弹窗消失. 2.提供输入的密码框是看不到光标的,在文本框上 ...
Django里自定义用户登陆及登陆后跳转到登陆前页面的实现
因为下一步要和公司的UM帐号作集成,所以分离出登陆模块,及实现其基本功能是必不可少的. 登陆倒容易,但要实现在登陆后,跳转到登陆前的网页,且显示用户的登陆状态,花了点时间查找代码, 测试了五六种方式, ...
Spring Security——实现登录后跳转到登录前页面
基本概念暂无. 官方文档 https://docs.spring.io/spring-security/site/docs/5.3.1.BUILD-SNAPSHOT/reference/html5/ ...
java shiro登录实例_使用Shiro实现登录成功后跳转到之前的页面
这个问题是之前在做登录注册模块时遇到的需求,如何用户直接访问登录页面,可以控制直接跳到首页,但是如果是用户没有登录直接访问了购物车等需要经过身份认证的页面,或者是因为session超时,用户需要重新登 ...

最新文章

热门文章