作业
1：你学会了什么
- 本次项目我学会了运用JavaScript实现结合跨域,api接口数据遍历渲染与css样式,利用本地储存(localStorage.setItem)对数据进行存值后调用,与调用删除本地储存(localStorage.removeItem)发起服务器请求并调用其api进行渲染数据页面.
2：你的进步有哪些
- 了解与运用JavaScript中的各种运用,对数据之间进行服务请求与跨域传值,本地存储保留传值然后调用储存数据进行处理
- 对ajax的运用把数据进行跨域请求并渲染到页面进行处理
3：你哪里不会
轮播图出现报错,对js掌握不太熟练一些属性不太记得
4：总结项目中有那些业务，你是符合实现的
- 1;滚动条触底事件 滚动视口高度(也就是当前元素的真实高度) let scrollHeight 可见区域高度 let clientHeightdocument.body.clientHeight; 滚动条顶部到浏览器顶部高度 let scrollTopscrollTop; 当滚动条滚动到底部时候出现返回顶部样式 样式方面不多赘述，滚动区域是给固定高度，设置 overflow-y: auto 来实现。 可视高度(offsetHeight)通过 getBoundingClientRect() 来获取高度 滚动高度(scrollTop)：滚动事件中通过 e.target.scrollTop 获取，表示滚动条距离顶部的px 实际高度(scrollHeight)：通过 dom 的 scrollHeight 获得，表示区域内所有内容的高度（包括滚动距离），也就是实际高度
- 3.懒加载
把懒加载图片渲染替换原图片然后设置定时器,页面滚动到一定地方显示原图片
一张图片就是一个
标签，浏览器是否发起请求图片是根据
的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给
的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值. - 4.放大镜效果 1鼠标放上去会有半透明遮罩、右边会有大图片局部图 2鼠标移动时右边的大图片也会局部移动 放大镜的关键原理： 鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的相应位置； 放大镜的移动方向和大图片的移动方向：横向和纵向都是相反，才可以保证同步； 页面元素： 需要元素：小图片和大图片，存放小图片和大图片的容器，有一个放大镜； 涉及到的技术点： （1)鼠标事件的捕获：onmouseover（进入）、onmouseout（移除）、onmousemove（移动） （2）offsetLeft、offsetTop、offsetWidth、offsetHeight、event.clientX、event.clientY offsetLeft子元素相对于父元素的左位移 offsetWidth，offsetHeight一个元素的宽度和高度，宽度和高度是不包括滚动条的。 event.clientX、event.clientY鼠标的X轴和Y轴，相对于整个页面的坐标，而不是子元素 offsetLeft和style.left对比： （1）style.left返回的是字符串，如30px、offsetLeft返回的是数值30； （2）style.left是可读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left； （3）style.left的值需要事先定义，否则取到的值为空
- 6.购物车页面 -1.找到购物车数据,getShopCar(token); -2.用REQUEST.get("/shopList,{ params:{ token:token, username:username } })获取跨域请求
5：总结你写的项目中有那些技术亮点并详细说明
登录与注册界面的权限验证运用并结合正则表达式进行用户名和密码进行校验
1.写好html中的input与css样式
2.对其input进行赋值
3.实现提示文字并点击input消失,运用forEach
logIninp.forEach(function(item,index){
item为input元素 index为执行次数
} 4.验证用户名:验证其对用户名的权限验证 -1.获取logIninp的value值 -2.用正则表达式检验用户名 var userReg=/^[a-zA-Z0-9_\u4e00-\u9fa5]{6,15}$/; 验证密码 /\w{6,15}/ 用if else显示文字 输入格式正确显示输入密码进入密码填写 颜色为绿 输入格式有误则显示其他 颜色为红 密码同理.用户名与密码都为正确显示成功
