综合案例登录（login）

<!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 &copy; 小兔鲜儿</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 falseif(!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>

综合案例登录（login）相关推荐

WEB综合案例黑马面面 day04 用户与角色绑定功能登录用户菜单控制和权限效验
WEB综合案例 day04 用户与角色绑定功能登录用户菜单控制和权限效验 1. 用户与角色思路: 根据用户去找角色的信息,然后需要用到两个表的查询,在前端页面显示信息的时候用for:each通过遍 ...
Web APIs 正则表达式综合案例丨小兔仙儿登录页面
目录综合案例:小兔鲜登录页面案例代码:CSS丨common 案例代码:CSS丨index 案例代码:CSS丨login 案例代码:CSS丨register 案例代码:HTML丨index 案例代码 ...
综合案例:实现注册、登录和跳转到主页面的功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
【服务端渲染】NuxtJs 综合案例
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读 Nuxt.js 综合案例基本介绍案例名称:RealWorld 一个开源的学习项目,目的就是帮助开发者快速学习新技能 ...
java day52【综合案例day04】
由java day51[综合案例day03] 14. 旅游线路收藏功能 14.1 分析 14.1.1 判断当前登录用户是否收藏过该线路当页面加载完成后,发送ajax请求,获取用户是否收藏的标记 ...
java day50【综合案例day02】
由 java day49[综合案例day01]步骤: 9. 优化Servlet 9.1 目的减少Servlet的数量,现在是一个功能一个Servlet,将其优化为一个模块一个Servlet, 相当 ...
前端学习笔记（注册页面综合案例html5）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
2-37.1 EmpProject综合案例
EmpProject综合案例案例阶段一:环境搭建 1.创建数据库 create databas emp; 2.需要两张表 emp员工信息表和empmanager管理员表 create table e ...
移动Web【空间转换[空间位移、透视、空间旋转、立体呈现、3D导航、空间缩放]、动画、综合案例】
文章目录一.空间转换 1.1 空间位移 1.2 透视 1.3 空间旋转 1.4 立体呈现 1.5 3D导航 1.6 空间缩放二.动画 2.1 动画的实现步骤 2.2 动画属性三.综合案例 2.1 ...

综合案例登录（login）

综合案例登录（login）相关推荐

最新文章

热门文章

综合案例 登录（login）

综合案例 登录（login）相关推荐

最新文章

热门文章

综合案例登录（login）

综合案例登录（login）相关推荐