使用原生js写一个简单的注册登录页面

1.注册页面

2.登录页面

1.首先是我们的注册页面

这是我们的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>注册</title>
</head>
<link rel="stylesheet" href="./css/common.css">
<style>body {width: 100%;height: 100%;background-image: url(./img/RE53tTA.jfif);background-repeat: no-repeat;background-size: cover;}
</style><body><div class="header"><h2>注册</h2></span><label for="username"><span>用户名：</span><input type="text" id="use"></label><br><label for="password"><span>密码:</span><input type="password" id="pwd"></label><br><label for="password"><span>确认密码 </span><input type="password" id="pwd2"> </label><br><div><button onclick="login()">注册</button><button><a href="./登录.html">去登录</a></button></div></div></body></html>

这是css样式

* {margin: 0;padding: 0;
}
a {text-decoration: none;color: #fff;font-size: 18px;
}
.header {width: 400px;height: 450px;background: rgba(0, 0, 0, 0.2);border-radius: 14px;display: flex;flex-direction: column;margin: 100px 0 0 200px;padding: 20px;
}
.header h2 {font-size: 24px;margin-top: 15px;color: rgba(255, 255, 255, 0.7);
}
.header > label {margin-top: 40px;width: 350px;display: flex;align-items: center;justify-content: space-between;
}
.header > label span {font-size: 24px;color: #fff;
}
.header > label input {border-radius: 20px;border: 1px solid #ccc;padding: 0 20px;background-color: rgba(255, 255, 255, 0.6);box-sizing: border-box;outline: none;width: 240px;height: 30px;font-size: 18px;
}
.header > div {margin-top: 30px;display: flex;justify-content: space-around;width: 325px;
}
.header > div button {width: 100px;height: 30px;background: rgba(0, 0, 0, 0.5);border: none;border-radius: 12px;font-size: 18px;color: #fff;
}

下面就是我们注册的js封装了

这里的函数调用直接写到了html里面的button事件上面了

 <script>//获取用户名;let useA = localStorage.getItem('username');console.log(useA);//封装注册方法function login() {//获取事件的value let username = document.querySelector('#use').value;let password = document.querySelector('#pwd').value;//这里调用存入本地的数据Date(username, password);}//将数据存入本地function Date(username, password) {localStorage.setItem(username, JSON.stringify({username,password,tag: false}))if (username === '' || password === '') {alert('请先注册');}//判断两次密码是否一样else if (pwd.value != pwd2.value) {//不一样的话重新输入alert('两次输入密码不一样 请重新输入');} else {//一样则提示注册成功alert('注册成功 ! ! !')}}</script>

这就是我的注册页面 ,当然各位要是觉得不好看也可以换成自己喜欢的图片；

2.登陆页面

到这里当然要写我们的登录页面了，从注册页面获取数据然后调用

html样式

<body><div class="header"><h2>登录</h2><label for="username"><span>用户名：</span><input type="text" id="use"></label><br><label for="password"><span>密码:</span><input type="password" id="pwd"></label><br><div class="pwsd"><input type="checkbox" id="cbx"><span>记住密码</span></div><div class="del"><button onclick="login()">登录</button><button><a href="./注册.html">去注册</a></button></div></div>
</body>

css样式

<style>a {text-decoration: none;color: #fff;}body {width: 100%;height: 100%;background-image: url(./img/RE53r3l.jfif);background-repeat: no-repeat;background-size: cover;}.header {width: 400px;height: 450px;background: rgba(0, 0, 0, .2);border-radius: 14px;display: flex;flex-direction: column;margin: 100px 0 0 200px;padding: 20px;}h2 {font-size: 24px;color: #fff;}label {margin-top: 40px;width: 350px;display: flex;align-items: center;justify-content: space-between;}label>span {font-size: 24px;color: #fff;}label>input {border-radius: 20px;border: 1px solid #ccc;padding: 0 20px;background-color: rgba(255, 255, 255, .6);box-sizing: border-box;outline: none;width: 240px;height: 30px;font-size: 18px;}.del {margin-top: 30px;display: flex;justify-content: space-around;width: 325px;}.pwsd {display: flex;margin-top: 45px;}.pwsd>input {width: 24px;height: 24px;}.pwsd>span {font-size: 18px;color: #fff;margin-left: 20px;}button {width: 100px;height: 40px;background: rgba(0, 0, 0, .6);border: none;border-radius: 12px;font-size: 18px;color: #fff;}
</style>

js样式

<script>let use = document.getElementById('use');let pwd = document.getElementById('pwd');let cbx = document.getElementById('cbx');function login() {//登录//取出本地的用户的值let dateUse = localStorage.getItem(use.value);console.log(dateUse)let dateObj = JSON.parse(dateUse);//将取出的值转化为对象console.log(dateObj);if (use.value == dateObj.username && pwd.value == dateObj.password) {alert('登陆成功');dateObj.tag = cbx.checked;localStorage.setItem(use.value, JSON.stringify(dateObj));//再将取出的值转化为字符串类型location.href = 'https://www.baidu.com';//登录成功则跳转到百度页面} else {alert('用户名或者密码错误')}}use.onblur = function () {//用户失去焦点事件s//取出用户的值let res = localStorage.getItem(use.value);//将用户值转化为对象res = JSON.parse(res);if (res != null && res.tag) {//本地是否有该账号cbx.checked = true;pwd.value = res.password;}}</script>

样品展示：

使用原生js写一个简单的注册登录页面相关推荐

原生js写一个简单的编辑器
js原生写的编辑器,主要是使用document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)来实现的如果该指令不被支持或停用将会 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
原生js完成一个简单的抽奖功能
文章目录前言实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖完整代码 HTML部分 CSS部分 ...
原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏利用javascript制作一个简单的打字小游戏之前写了一个贪吃蛇小游戏好像反响不错今天我来写一个比贪吃蛇更low更简单的打字小游戏打字小游戏原理接下来咋们直 ...
JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
一个简单的ASP登录页面
一个简单的ASP登录页面成品首页登陆后的主页,中间的竖线框可自由调动哦!! 具体步骤: 将解压文件放到这个路径内:(很重要!!!) 上图中的work文件夹,即为解压后的文件夹,然后在浏览器的网页 ...
js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
用原生JS写一个网页版的2048小游戏（兼容移动端）
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...

使用原生js写一个简单的注册登录页面

1.首先是我们的注册页面

这是css样式

这就是我的注册页面 ,当然各位要是觉得不好看也可以换成自己喜欢的图片；

2.登陆页面

使用原生js写一个简单的注册登录页面相关推荐

最新文章

热门文章