小米商城登录，注册功能的实现！

废话先不多说！上代码！！

这是登录界面的HTML代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录</title><link rel="icon" href="images/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="css/public.css"><link rel="stylesheet" href="css/Login.css"><link rel="stylesheet" href="css/gotop.css">
</head><body><header><a href="#"><div></div></a></header><main><div class="main-box"><div class="main-right-box"><!--表单输入登录--><div class="form-main-box"><div class="form-main-header"><a class="accounts">账号登陆</a><span></span><a id="scan-login">扫码登陆</a></div><div class="form-main" id="main"><div><div><form><div><input type="text" placeholder="邮箱/手机号码/小米ID" class="ID"><input type="password" placeholder="密码" class="pwd"></div><div class="btn-box"><button type="button" class="obtn">立即登录</button></div><div class="main-footer"><a href="#" class="register">注册小米帐号</a><span></span><a href="#">忘记密码?</a></div></form></div></div></div><div class="main-right-footer" id="main-footer"><div><span class="hr"></span><span>其他方式登录</span><span class="hr"></span></div><div class="payment"><div><a href="#"></a></div><div><a href="#"></a></div><div><a href="#"></a></div><div><a href="#"></a></div></div></div><!--Scan code Login--><div class="scan-box"><div><div class="scan"><img src="data:images/app.png"></div><div class="scan-footer"><p>使用&nbsp;<span>小米商城APP</span>&nbsp;扫一扫</p><p>小米手机可打开「设置」&nbsp;&gt;&nbsp;「小米帐号」扫码登录</p></div></div></div></div></div></div></main><footer><ul><li class="language">简体</li><li class="language">繁体</li><li class="language">English</li><li>常见问题</li></ul><p>小米公司版权所有-京ICP备10046444-<span><img src="data:images/ghs.png"> </span>京公网安备11010802020134号-京ICP证110507号</p></footer><script type="text/javascript" src="js/Login.js"></script>
</body></html>

这是登录界面的css代码：

@charset "utf-8";body {color: #757575;
}header {width: 1130px;height: 98px;margin: 0 auto;
}header>a>div {width: 200px;height: 98px;background: url("../images/mistore_logo.png");
}main {width: 100%;height: 588px;position: relative;background: url("../images/523923ee3d985386d832e082980e4de9.jpg") center no-repeat;background-position: top;
}.main-box {width: 1130px;height: 554px;margin: 0 auto;padding: 30px 0 0 0;position: relative;
}.main-right-box {width: 400px;height: 524px;position: absolute;right: 0;background: #fff;}/*form login*/
.form-main-box {width: 400px;height: 316px;}.form-main-header {width: 400px;height: 82px;text-align: center;font-size: 24px;padding: 27px 0 24px;color: #666;cursor: pointer;
}.form-main-header>a:nth-child(1) {color: #f56600;
}.form-main-header>a:nth-last-child(1):hover {color: #f56600;
}.form-main-header>span {display: inline-block;width: 1px;height: 24px;margin: 0 35px 0 42px;border: 1px solid #e0e0e0;padding: 0;vertical-align: middle;
}.form-main {height: 234px;
}.form-main>div {height: 215px;
}.form-main>div>div {width: 338px;height: 215px;margin: 0 auto;
}form>div:nth-child(1) {width: 338px;height: 124px;
}input {width: 336px;height: 52px;padding-left: 13px;margin-bottom: 14px;
}/*input:focus{*/
/*outline: none;*/
/*border-color: #BBBBBB;*/
/*}*/
input:nth-child(1) {margin-top: 10px;
}.btn-box {margin: 27px 0 14px 0;
}.btn-box>button.obtn {width: 100%;height: 50px;outline: none;border: none;background: #f56600;font-size: 18px;color: #fff;cursor: pointer;margin-left: 10px;
}.main-footer {text-align: center;font-size: 14px;
}.main-footer>a {color: #999;
}.main-footer>a:hover {color: #f56600;
}.main-footer>span {display: inline-block;width: 1px;height: 16px;border: 1px;vertical-align: middle;background: #999;margin: 0 2px;
}.main-right-footer {width: 338px;height: 65px;position: absolute;right: 28px;bottom: 20px;font-size: 14px;color: #bbb;text-align: left;
}.main-right-footer>div:nth-child(1) {margin-bottom: 10px;
}.hr {display: inline-block;width: calc((100% - 100px)/2);height: 1px;border: 1px solid #bbb;vertical-align: middle;
}.payment {height: 30px;text-align: center;display: flex;justify-content: center;align-items: center;
}.payment>div {width: 30px;height: 30px;margin: 0 17px;border-radius: 50%;background: #999999;
}.payment>div:nth-child(1) {background: #808080;
}.payment>div:nth-child(1):hover {background: #0288d1;
}.payment>div:nth-child(2) {background: #757575;
}.payment>div:nth-child(4) {background: #555555;
}.payment>div:nth-child(2):hover {background: #d32f2f;
}.payment>div:nth-child(3):hover {background: #0ae;
}.payment>div:nth-child(4):hover {background: #00d20d;
}.payment>div>a {display: inline-block;width: 18px;height: 18px;vertical-align: middle;border-radius: 50%;
}.payment>div:nth-child(1)>a {background: url("../images/icons_type.png") no-repeat -19px;background-size: cover;margin: 5px;
}.payment>div:nth-child(2)>a {background: url("../images/icons_type.png") no-repeat -38px;background-size: cover;margin: 5px;
}.payment>div:nth-child(3)>a {width: 25px;background: url("../images/icons_type.png") no-repeat -56px;background-size: cover;margin: 5px 3px;
}.payment>div:nth-child(4)>a {width: 25px;height: 18px;background: url("../images/icons_type.png") no-repeat -84px;background-size: cover;margin: 5px 0;
}footer {width: 100%;height: 80px;font-size: 14px;text-align: center;margin-top: 60px;
}footer>ul {display: flex;align-items: center;justify-content: center;
}footer>ul>li {color: #757575;cursor: pointer;
}footer>ul>li:nth-child(1) {color: #333;
}footer>ul>li:hover {color: #333;
}.language {border-right: 1px solid #757575;margin-right: 15px;padding-right: 15px;
}footer>p {margin-top: 10px;
}/*Scan code Login*/
.scan-box {width: 400px;height: 313px;display: none;
}.scan-box>div {text-align: center;padding-top: 78px;width: 400px;height: 313px;
}.scan-footer {margin-top: 14px;height: 38px;text-align: center;font-size: 14px;
}.scan-footer>p>span {color: #f56600;
}

这是登录界面的js代码：

/*** 功能:登录*/
display();function display() {var scan = document.getElementById("scan-login"),account = document.querySelector(".accounts");var main = document.getElementById("main"),mainFooter = document.getElementById("main-footer"),scanBox = document.querySelector(".scan-box");scan.onclick = function () {main.style.display = "none";mainFooter.style.display = "none";scanBox.style.display = "block";};account.onclick = function () {main.style.display = "block";mainFooter.style.display = "block";scanBox.style.display = "none";}
}
//判断是否登陆成功
login("users");function login(key) {var btn = document.querySelector(".obtn");var register = document.querySelector(".register");btn.onclick = function () {//获取值var ID = document.querySelector(".ID").value,pwd = document.querySelector(".pwd").value;var user = JSON.parse(localStorage[key]);for (var i = 0; i < user.length; i++) {console.log(user[i].username);if (user[i].username === ID && user[i].password === pwd) {alert("登录成功")//跳转页面location.href = "index.html"} else if (ID === "" || pwd === "") {alert("请输入帐号或密码");} else if (user[i].username !== ID && user[i].password !== pwd) {alert("帐号或密码错误");}}};register.onclick = function () {location.href = "register.html"}
}

这是注册界面的HTML代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>注册</title><link rel="icon" href="images/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="css/register.css">
</head><body><div class="box"><div><!--logo--><div class="log-box"><img src="data:images/logo-footer.png"></div><!--头部--><div class="title-item"><h4>注册小米帐号</h4></div><!--内容--><main><div class="main-box"><h4>国家/地区</h4><form name="Country" method="get"><div class="select-box clearFloat"><select class="result"><optgroup label="常用"><option value="0">中国</option><option value="1">中国台湾</option><option value="2">中国香港</option><option value="3">Brazil</option><option value="4">India</option><option value="5">Indonesia</option><option value="6">Malaysia</option></optgroup></select></div><p class="access">成功注册帐号后，国家/地区将不能被修改</p><h4 class="tel-title">手机号码</h4><div class="tel-box"><select><option>+86</option></select><div><input type="tel" placeholder="请输入手机号码" class="tel"></div></div><div class="request place-tel"><span>!</span><span>请输入11位手机号码</span></div><h4>图形验证码</h4><div class="Graphical-verification"><input type="text" placeholder="图片验证码" class="Verification-input"><div class="Verification" title="看不清，点击换一张"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div></div><div class="request margin request-verification"><span>!</span><span>请输入正确的图形验证码</span></div><h4>账号</h4><div class="Graphical-verification "><input type="text" placeholder="请输入账号" class="Land account-land"></div><div class="request margin request-account"><span>!</span><span>请输入4~16位账号</span></div><h4>密码</h4><div class="Graphical-verification"><input type="password" placeholder="请输入密码" class="Land pwd"></div><div class="request margin request-pwd"><span>!</span><span>请输入密码</span></div><h4>确认密码</h4><div class="Graphical-verification"><input type="password" placeholder="请输入密码" class="Land confirm"></div><div class="request margin request-confirm"><span>!</span><span>两次密码不一致</span></div><div class="button-box"><button type="button" class="btn">立即注册</button><p>注册帐号即表示您同意并愿意遵守小米&nbsp;<span>用户协议</span>和&nbsp;<span>隐私政策</span></p></div></form></div></main></div></div><script type="text/javascript" src="js/register.js"></script>
</body></html>

这是注册界面的css代码：

@charset "utf-8";body {font-size: 14px;font-family: arial, "Hiragino Sans GB", "Microsoft YaHei", "微軟正黑體", "儷黑 Pro", sans-serif;background: #f9f9f9;color: #666;position: relative;
}.box {width: 854px;height: 1200px;background: #ffffff;position: absolute;top: 0;left: 50%;transform: translateX(-50%);
}.box>div:nth-child(1) {width: 786px;margin: 0 auto;
}.log-box {width: 49px;height: 48px;margin: 0 auto 40px auto;
}.log-box>img {width: 100%;height: 100%;
}.title-item {text-align: center;
}.title-item>h4 {font-size: 30px;font-weight: normal;line-height: 1.5;color: #333;
}main {width: 786px;height: 467px;
}.main-box {width: 332px;height: 467px;margin: 0 auto;padding: 30px 0;
}h4 {line-height: 20px;padding-bottom: 5px;color: #333;font-weight: normal;
}.select-box {height: 40px;line-height: 40px;display: inline-block;vertical-align: middle;color: #555;cursor: pointer;zoom: 1;box-sizing: content-box;
}.select-box select {float: left;width: 329px;height: 40px;box-sizing: content-box;border-color: #BBBBBB;
}.select-box>div {float: right;width: 40px;height: 42px;border: 1px solid #BBBBBB;
}.access {margin: 5px 0 15px 0;
}.tel-title {padding: 0;
}.tel-box {height: 42px;zoom: 1;display: flex;margin-bottom: 15px;
}.tel-box select {width: 74px;height: 48px;border-right: none;
}.tel-box div {width: 258px;height: 42px;
}.tel-box div input {width: 100%;height: 42px;
}.request {display: flex;align-items: flex-end;margin-bottom: 5px;
}.request>span:nth-child(1) {display: flex;width: 14px;height: 14px;border-radius: 50%;background: #ff6700;color: #fff;justify-content: center;align-items: center;margin: -1px 5px 0 0;
}.request>span:nth-child(2) {color: #ff6700;font-size: 13px;
}/*图形验证*/
.Graphical-verification {width: 450px;height: 40px;margin-bottom: 5px;display: flex;
}.Graphical-verification input {width: 190px;height: 40px;padding-left: 5px;margin-right: 7px;
}.Graphical-verification div.Verification {width: 137px;height: 42px;vertical-align: middle;border: 1px solid #BBBBBB;cursor: pointer;text-align: center;line-height: 42px;
}.Verification>span {display: inline-block;}.Graphical-verification input.Land {width: 332px;
}.margin {margin-bottom: 15px;
}.button-box {height: 92px;
}.button-box button {width: 100%;height: 40px;background-color: #ff6700;outline: none;border: 0;color: #fff;cursor: pointer;
}.button-box p {margin-top: 10px;line-height: 20px;
}.button-box p>span {color: #333;font-weight: bold;
}/*隐藏提示信息*/
.place-tel,
.request-verification,
.request-account,
.request-pwd,
.request-confirm {opacity: 0;
}/*图形验证样式*/
/*随机字体颜色*/
.color-12 {color: #5f5750;transform: skewX(20deg);
}.color-13 {color: #ff6700;transform: skewY(20deg);
}.color-14 {color: #00d20d;transform: skew(20deg, -20deg);
}.color-15 {color: #ddb321;transform: skewX(30deg);
}.color-16 {color: #1b4e7c;transform: skewX(50deg);
}.color-17 {color: #466988;transform: skew(60deg, -60deg);
}.color-18 {color: #59758e;transform: skew(90deg);}.color-19 {color: #af3a82;transform: scale(0.5);}.color-20 {color: #152a3c;transform: scale(0.8);
}.color-21 {color: #531b71;transform: scale(1.2);
}.color-22 {color: #4d657b;transform: rotateZ(180deg);
}.color-23 {color: #394e31;transform: rotateZ(90deg);
}.color-24 {color: #285677;transform: rotateZ(45deg);
}.color-25 {color: #59758e;transform: rotateZ(60deg);
}.color-26 {color: #0e602a;transform: scale(1.1);
}.color-27 {color: #620883;transform: scale(0.8);
}.color-28 {color: #236c08;transform: scale(0.9);
}.color-29 {color: #466988;transform: rotateZ(70deg);
}.color-30 {color: #1b4e7c;transform: rotateZ(120deg);
}.color-31 {color: #185c3a;
}.color-32 {color: #1a4307;
}.color-33 {color: #6c6c18;
}

这是注册页面的js代码：

/*** 功能:注册验证*/
//获取元素
var accountNum = document.querySelector(".account-land"),pwd = document.querySelector(".pwd");
//获取点击按钮
var btn = document.querySelector(".btn");
//获取正则验证
var tel = document.querySelector(".tel"),confirm = document.querySelector(".confirm");
//获取提示信息
var requestAccount = document.querySelector(".request-account"),placeTel = document.querySelector(".place-tel"),requestConfirm = document.querySelector(".request-confirm");
//获取图形验证码标签
var Verification = document.querySelector(".Verification");
var Vspan = Verification.getElementsByTagName("span");
var VerificationInput = document.querySelector(".Verification-input");
var request = document.querySelector(".request-verification");
//添加存储用户
function add(key, user, callBack) {var users = null;if (localStorage[key]) {users = JSON.parse(localStorage[key]);} else {users = [];}users.push(user);localStorage[key] = JSON.stringify(users);if (callBack) {callBack();}
}
//判断用户是否存在
//response 判断用户是否存在，0用户存在 1用户不存在
function judge(key, gist, value, response) {if (!localStorage[key]) {response(1);return;}var users = JSON.parse(localStorage[key]);//默认用户不存在var tag = false;for (var i = 0; i < users.length; i++) {if (users[i][gist] === value) {tag = true;}}tag ? response(0) : response(1);
}
//电话验证
tel.onblur = function () {//进行正则验证var regs = /^1[345789]\d{9}$/;if (regs.test(tel.value)) {placeTel.style.opacity = 0;} else {placeTel.style.opacity = 1;tel.value = "";}
};
//帐号验证
accountNum.onblur = function () {var regs = /^[a-zA-Z0-9_-]{4,16}$/;if (regs.test(accountNum.value)) {requestAccount.style.opacity = 0;} else {requestAccount.style.opacity = 1;this.value = ""}
};
//密码验证
confirm.onblur = function () {if (pwd.value !== confirm.value) {requestConfirm.style.opacity = 1;} else {requestConfirm.style.opacity = 0;}
};
//图形码验证
VerificationInput.onblur = function () {var str = "";for (var i = 0; i < Vspan.length; i++) {str += Vspan[i].textContent;}if (str !== VerificationInput.value) {request.style.opacity = 1;VerificationInput.value = ""} else {request.style.opacity = 0;}
}
//点击时调用
Verification.onclick = function () {random_char(5);
};function random_char(length) {var strCode = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";var str_length = strCode.length;for (var i = 0; i < length; ++i) {//循环获取样式var color = Math.round(Math.random() * 20 + 13);var randColor = "color-" + color;Vspan[i].textContent = "";Vspan[i].className = randColor;//获取随机数var rand = Math.floor(Math.random() * str_length);Vspan[i].textContent += strCode.charAt(rand);}
}
btn.onclick = function () {var user = {"username": accountNum.value,"password": pwd.value};judge("users", "username", accountNum.value, function (status) {if (status === 0) {alert("用户已存在!");accountNum.value = "";pwd.value = "";} else if (accountNum.value === "" || pwd.value === "" || tel.value === "" || confirm.value === "" || VerificationInput.value === "") {alert("表单信息有误，请重新输入")} else if (status === 1) {add("users", user, function () {alert("注册成功");location.href = "index.html";})}})
}

小米商城登录，注册功能的实现！相关推荐

java实现用户登录注册功能(用集合框架来实现)
需求:实现用户登录注册功能(用集合框架来实现) 分析: A:需求的类和接口 1.用户类 UserBean 2.用户操作方法接口和实现类 UserDao UserDaoImpl 3.测试类 UserTe ...
注册登录案例用MVC和mysql_用MVC模式实现简单用户登录注册功能
Model2模式 Jsp+Servlet+JavaBean MVC:开发模式 M:Model 模型层 ----> JavaBean V:View 视图层 ----> Jsp C:Contr ...
node mysql登录注册_图解NodeJS实现登录注册功能
该Demo根据菜鸟教程的练手项目,请提前到菜鸟教程的官网查看nodejs的相关教程,根据教程实际操作一遍,然后自己动手去实现登录.注册功能,此Demo只作参考,不符合前端相关规范. 使用的技术栈 no ...
java wed登录面代码_JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)...
下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBea ...
php微信网页开发实现自动登录注册功能实例
功能:自动登录注册功能描述:php实现微信网页自动登录注册功能范围:适用于所有php版本功能实例 $token = $_COOKIE['wechat_token']; if($token){// ...
spring 3.x 学习笔记_spring mvc、spring jdbc 实现网站的登录注册功能
使用spring mvc.spring jdbc 实现网站的登录注册功能 1. 据业务模型创建model 一般实现序列化 2. 用spring 注解(@Repositor ...
html登陆注册功能实现,实现用户的登录注册功能
在基于Spring Boot框架上,实现用户的登录注册功能, 首先分析前期所需要的规划. 1 实现登录注册前端向后端发起post请求 2用户密码安全性密码是不推荐明文入库的,在后台采取秘钥加加不可 ...
MVC框架实现用户的登录注册功能
MVC是什么? MVC,全称model view controller-模型,视图,控制器 model是将数据库中的表到Java中变成实体类 view是编写JSP页面 controller是用来业务逻 ...
Axure实战——实现登录注册功能
背景在做系分项目原型的时候,我需要做一个简单的登录注册模块.但要实现这个功能,只是看我之前写的博客中的相关教程是远远不够的.因此,我需要重新开始摸索,便有了这篇博客. 为了完成该功能,我们需要用到两 ...
java登录注册功能怎么实现_使用Java代码实现登录注册功能
实现思路:分别创建5个包和5个类{cn.f.pojo(User.java):cn.f.Dao(UserDao.java):cn.f.Dao.impl(UserDaoImpl.java): cn.f.g ...

小米商城登录，注册功能的实现！

小米商城登录，注册功能的实现！相关推荐

最新文章

热门文章