<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<!-- <link rel="shortcut icon" href="../favicon.ico"> -->
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/login.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>
<body>
<!-- 登录头部 -->
<div class="xtx-login-header">
<h1 class="logo"></h1>
<a class="home" href="./index.html">进入网站首页</a>
</div>
<!-- 登录内容 -->
<div class="xtx-login-main">
<div class="wrapper">
<form action="">
<div class="box">
<div class="tab-nav">
<a href="javascript:;" class="active">账户登录</a>
<a href="javascript:;">二维码登录</a>
</div>
<div class="tab-pane">
<div class="link">
<a href="javascript:;">手机验证码登录</a>
</div>
<div class="input">
<span class="iconfont icon-zhanghao"></span>
<input required type="text" placeholder="请输入用户名称/手机号码" name="username">
</div>
<div class="input">
<span class="iconfont icon-suo"></span>
<input required type="password" placeholder="请输入密码" name="password">
</div>
<div class="agree">
<label for="my-checkbox">
<input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
<span class="iconfont icon-xuanze"></span>
</label> 我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
</div>
<div class="button clearfix">
<button type="submit" class="dl">登 录</button>
<!-- <a class="dl" href="./center.html">登 录</a> -->
<a class="fl" href="./forget.html">忘记密码？</a>
<a class="fr" href="./register.html">免费注册</a>
</div>
</div>
<div class="tab-pane" style="display: none;">
<img class="code" src="" alt="">
</div>
</div>
</form>
</div>
</div>
<!-- 登录底部 -->
<div class="xtx-login-footer">
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
<script>
// 需求：
// 1. 登录按钮点击的时候，需要先判断
// 如果没有勾选同意，则提示要勾选
// 如果勾选协议，则记住用户名和密码
// 登录成功则跳转到首页
// 注意，登录按钮需要先阻止默认行为
// JavaScript 存储对象：https://www.runoob.com/jsref/obj-storage.html
// JS 本地存储：https://www.cnblogs.com/yingqing/p/7868085.html
//获取元素
//input 表单元素
let username=document.querySelector('[name=username]');
let password=document.querySelector('[name=password]');
//复选框
let remember=document.querySelector('.remember');
let dl=document.querySelector('.dl');
//添加监听事件
dl.addEventListener('click',function(e){
//不需要提交 阻止默认行为 只需要完成跳转即可！
e.preventDefault();
//条件判断 如果没有勾选协议 弹出警示框 return false
if(!remember.checked){
alert('请勾选协议');
return false;
}
let obj={
username: username.value,
password: password.value
//模拟本地存储 将 obj
}
localStorage.setItem('data',JSON.stringify(obj));
location.href='index.html';
})
let obj=JSON.parse(localStorage.getItem('data'));
if(obj){
username.value=obj.username;
password.value=obj.password;
}
// 2. 打开页面时候，如果本地存储有数据，则自动记录显示用户名和密码，并勾选复选框
</script>
</body>
</html>
03-06
796
796
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
