写一个蛋糕商城登录页面,然后用JS脚本修饰一下
时间: 2024-05-20 18:16:38 浏览: 9
<html>
<head>
<title>蛋糕商城登录</title>
<style>
body{
background-color: #f6dfe5;
font-family: "微软雅黑";
text-align: center;
}
h1{
font-size: 36px;
margin-top: 50px;
color: #e84c3d;
}
form{
margin-top: 50px;
display: inline-block;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
}
input[type="text"], input[type="password"]{
width: 300px;
height: 40px;
border-radius: 5px;
border: none;
margin-top: 20px;
padding: 10px;
font-size: 18px;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}
input[type="submit"]{
background-color: #e84c3d;
color: #fff;
border-radius: 5px;
border: none;
width: 100px;
height: 40px;
margin-top: 20px;
font-size: 18px;
cursor: pointer;
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}
input[type="submit"]:hover{
background-color: #c53727;
}
</style>
</head>
<body>
<h1>蛋糕商城登录</h1>
<form>
<label>用户名:</label><br>
<input type="text" name="username" placeholder="请输入用户名"><br>
<label>密码:</label><br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="登录">
</form>
<script>
//获取表单元素
var form = document.querySelector('form');
var username = document.querySelector('input[name="username"]');
var password = document.querySelector('input[name="password"]');
//表单提交事件
form.addEventListener('submit', function(event){
event.preventDefault(); //阻止默认提交行为
var usernameVal = username.value.trim(); //去除用户名两端空格
var passwordVal = password.value.trim(); //去除密码两端空格
if(usernameVal === '' || passwordVal === ''){ //判断用户名或密码是否为空
alert('请输入用户名和密码!');
return;
}
if(usernameVal !== 'admin' || passwordVal !== '123456'){ //判断用户名或密码是否正确
alert('用户名或密码错误!');
return;
}
alert('登录成功!'); //登录成功提示
form.reset(); //表单重置
});
</script>
</body>
</html>
相关推荐
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)