这是我的代码,我本来是想要设置一个button调用js实现判断密码跳转页面,但是button不知道为什么一直无法引用js代码,请问这个又什么解决办法吗?
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
/*更改默认值*/
html,body{
width: 100%;
padding: 100%;
}
/*添加背景图片*/
body {
background: url(3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*输入框居中*/
.loginFrame{
width: 500px;
height: 350px;
background: rgba(176, 173, 173, 0.3);
position: fixed;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
/*添加边框圆角*/
border-radius: 10px;
/*添加边距*/
padding: 50px 0;
box-sizing: border-box;
/*添加阴影*/
box-shadow: 0 0 5px 5px rgba(30, 30, 30, 0.4);
}
/*改变盒子用户位置*/
.loginFrame>div.user{
width: 150px;
height: 30px;
margin: 40px auto;
/*改变字体颜色*/
color: white;
font-family: 华文中宋;
font-size:small;
}
/*改变盒子密码位置*/
.loginFrame>div.password{
width: 150px;
height: 30px;
margin: 40px auto;
/*改变字体颜色*/
color: white;
font-family: 华文中宋;
font-size: small;
}
/*标题居中并改颜色*/
.loginFrame>p{
text-align: center;
color: white;
font-size: 35px;
font-family: Monotype Corsiva;
}
/*改变输入框文字*/
.loginFrame>div span{
display: inline-block;
cursor: pointer;
font-family: 华文中宋;
font-size: 15px;
}
/*改变输入框样式*/
.loginFrame>div input{
width: 100%;
height: 30px;
/*透明色*/
background: transparent;
/*清除默认边框*/
border: none;
/*添加底部边框*/
border-bottom: 1px solid white;
/*清除蓝色点击框*/
outline: none;
/*改变文字颜色*/
color: white;
}
/*给输入框提醒文字变色*/
input::-webkit-input-placeholder{
color: #919ba7;
}
/*改变登录按钮样式*/
button{
width: 100px;
height: 30px;
/*添加圆角*/
border-radius: 50px;
/*设置背景颜色*/
background-image: linear-gradient(to right,#82b0eb,#7199c3);
text-align: center;
padding-top: border-box;
font-size: 20px;
cursor: pointer;
/*清除边框*/
border: none;
color: white;
font-family: 华文中宋;
font-size: 15px;
}
/*改变按钮位置*/
.loginFrame>div.enterBut{
text-align: center;
}
/*给登录按钮添加鼠标效果*/
button:hover{
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)inset;
}
/*适配*/
svg{
vertical-align: middle;
}
</style>
</head>
<body >
<div class="main">
<div class="loginFrame">
<p class="loginTitle">Login</p>
<div class="user">
<laber>
<span>
<svg t="1679291457700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25326" width="15" height="15"><path d="M514.133333 433.066667c-102.4 0-187.733333-83.2-187.733333-187.733334 0-102.4 83.2-187.733333 187.733333-187.733333s187.733333 83.2 187.733334 187.733333c0 102.4-85.333333 187.733333-187.733334 187.733334z m0-311.466667c-68.266667 0-123.733333 55.466667-123.733333 123.733333 0 68.266667 55.466667 123.733333 123.733333 123.733334s123.733333-55.466667 123.733334-123.733334c0-68.266667-55.466667-123.733333-123.733334-123.733333z" fill="#ffffff" p-id="25327"></path><path d="M689.066667 994.133333H339.2c-142.933333 0-260.266667-117.333333-260.266667-260.266666s117.333333-260.266667 260.266667-260.266667h352c142.933333 0 260.266667 117.333333 260.266667 260.266667S832 994.133333 689.066667 994.133333zM339.2 539.733333c-106.666667 0-196.266667 87.466667-196.266667 196.266667s87.466667 196.266667 196.266667 196.266667h352c106.666667 0 196.266667-87.466667 196.266667-196.266667s-87.466667-196.266667-196.266667-196.266667H339.2z" fill="#ffffff" p-id="25328"></path></svg>
</span>
<span>用户名</span>
<input type="text" placeholder="username" value="">
</laber>
</div>
<div class="password">
<laber>
<span>
<svg t="1679291535483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26455" width="15" height="15"><path d="M288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z" fill="#ffffff" p-id="26456"></path></svg>
</span>
<span>密 码</span>
<input type="password" placeholder="password" value="">
</laber>
</div>
<div class="enterBut">
<a href="D:\web1\Untitled-3.html">
<button type="button" id="chkBtn" onclick="btnAction()">登入</button>
</a>
</div>
<script type="text/javascript">
function btnAction(){
document.getElementById('chkBth').addEventListener('click',function(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username=='admin'&&password=='admin'){
window.location.href='D:\web1\Untitled-3.html';
}else{
alert('抱歉,用户名或密码错误!');
}
})
}
</script>
</div>
</div>
</body>
</html>