我们提供一站式网上办事大厅招投标所需全套资料,包括师生办事大厅介绍PPT、一网通办平台产品解决方案、
师生服务大厅产品技术参数,以及对应的标书参考文件,详请联系客服。
小明:嘿,小红,我最近在做一个‘一网通办师生服务大厅’的项目,遇到了一些问题。你能帮我看看登录功能怎么实现吗?
小红:当然可以!首先,我们需要一个简单的HTML页面来展示登录表单。
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
登录
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === 'admin' && password === '123456') {
alert('登录成功!');
} else {
alert('用户名或密码错误,请重试!');
}
});
]]>
小明:哇,看起来很棒!但是这个表单提交后直接显示提示信息,有没有办法让它跳转到另一个页面呢?
小红:当然有!我们可以使用JavaScript控制页面跳转。
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === 'admin' && password === '123456') {
window.location.href = 'dashboard.html';
} else {
alert('用户名或密码错误,请重试!');
}
});
]]>
小明:太好了,这样用户登录后就能直接进入后台管理界面了。谢谢你的帮助,小红!
小红:不客气,有问题随时找我!