该页面主要用于实现登录和注册功能
使用了html,css,js,DOM
首先我们输入用户名和密码,点击注册
如果成功存储,则会提示“注册成功”
然后点击登录即可,并按照提示输入用户名和密码,如果输入错误,则会进行提示
源码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body,html {height: 100%;margin: 0;display: flex;justify-content: center;align-items: center;background-color: pink;}.container {text-align: center;padding: 20px;background-color: white;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}</style>
</head><body><div class="container"><input type="text" id="username" placeholder="用户名"><br><input type="password" id="pwd" placeholder="密码"><br><button onclick="zhuce()">注册</button><button onclick="denglu()">登录</button></div><script>let Username = ''let Pwd = ''function zhuce() {Username = document.getElementById('username');Pwd = document.getElementById('pwd');alert('注册成功')}function denglu() {let a = prompt('请输入用户名')let b = prompt('请输入密码')if ((a != Username.value) || (b != Pwd.value)) alert('用户名或密码错误')else if ((a === Username.value) && (b === Pwd.value)) {alert('登陆成功')}}</script>
</body></html>