一. 你学会了什么
1.学会了怎么写项目
2.接口
3.组件
二. 你的进步有哪些
1.会用了接口
2.数据渲染
3.跳转页面
三. 你哪里不会
1.轮播图和购物车有点难
*四. 总结项目中有那些业务，你是符合实现的 *
1.登录和注册
完成登录与注册页面的HTML+CSS+JS，其中的输入项检查
包括：用户名6-12位 首字母不能是数字 只能包含字母
和数字 密码6-12位 注册页两次密码是否一致。
2.搜索
获取数据 从序列的中间位置开始比较，如果当前位置值
等于要搜索的值，则查找成功；若要搜索的值小于当前位
置值，则在数列的前半段中查找；若要搜索的值大于当前
位置值则在数列的后半段中继续查找，直到找到为止。
3.购物车
购物车中有若干商品信息，其中包括商品的名称、单价、数
量，计算购物车中商品的总价。商品信息通过创建商品对象
来实现，若干商品的加和通过创建数组来放置若干商品，再
通过遍历数组读取指定属性对价格进行计算。
4.轮播图
两种播放行为；（一种自动播放，一种控制播放），一个定时
器控制。一个定时器控制两种播放状态。
布局：装图片的盒子足够宽，让图片左浮，排成一排，最后一张
重新放置第一张。
定时器里执行自动播放行为。定义一个计时器，根据计时器对图
片的宽，让它左移，再次根据计时器%，总个数-1， 当触发
标识时，清除上述的定时器，根据计时器产生左移运动，同时修
改当前的标识，再次开启定时器执行自动播 放行为
五. 总结你写的项目中有那些技术亮点并详细说明
一，放大镜
1、鼠标放上去会有半透明遮罩、右边会有大图片局部图
2、鼠标在小图上移动时，通过捕捉鼠标在小图上的位置，定位大
图片的响应位置
3、放大镜的移动方向和大图片的移动方向，横向相反，纵向
相反
4、技术点：事件捕获，定位
onmouseover:会在鼠标指针移动到指定的对象上时发生
onmouseout:会在鼠标指针移出指定的对象时发生
onmosuemove:会在鼠标指针移动时发生
offsetLeft:子元素相对父元素的左边距离
offsetWidth:盒子的宽度，不报括滚动条
event.clientX:鼠标的X轴，相对于整个页面
代码：
var information = document.querySelector(".information h2")
var informationP = document.querySelector(".information p")
var samllImg = document.querySelector('.samllImg')
var Instance = document.querySelector('.Instance')
var bigImg = document.querySelector('.bigImg')
var samllBox = document.querySelector('.samllBox')
var occlude = document.querySelector('.occlude')
var rigth = document.querySelector('.rigth')
ajxa(`/detail?goodId=${locaId}`, function (x) {
console.log(x);
information.innerHTML = x[0].title;
informationP.innerHTML = `
<span class="price">￥${x[0].price}</span>
${x[0].mack}
`
samllImg.src = x[0].img_url
bigImg.src = x[0].img_url
var imgs = x[0].imgs.slice(1, x[0].imgs.length - 1).split(",");
for (var j = 0; j < imgs.length; j++) {
var img = document.createElement('img');
if (j == 0) {
img.classList.add('imgthis')
}
img.src = imgs[j].slice(1, imgs[j].length - 1)
Instance.appendChild(img)
}
var img = Instance.children;
for (let n = 0; n < img.length; n++) {
img[n].onclick = function () {
for (var j = 0; j < img.length; j++) {
img[j].classList.remove('imgthis')
}
this.classList.add('imgthis')
samllImg.src = this.src;
bigImg.src = this.src
}
}
samllBox.onmouseover = function () {
occlude.style.display = "block";
bigImg.style.display = "block";
}
samllBox.onmouseout = function () {
occlude.style.display = "none";
bigImg.style.display = "none";
}
samllBox.onmousemove = function (e) {
var x = e.pageX - samllBox.offsetLeft - occlude.offsetWidth / 2;
var y = e.pageY - samllBox.offsetTop - occlude.offsetHeight / 2;
var maxX = samllBox.offsetWidth - occlude.offsetWidth;
var maxY = samllBox.offsetHeight - occlude.offsetHeight;
if (x <= 0) {
x = 0
}
if (x >= maxX) {
x = maxX;
}
if (y <= 0) {
y = 0
}
if (y >= maxY) {
y = maxY;
}
occlude.style.left = x + 'px';
occlude.style.top = y + 'px';
var bigImgX = bigImg.offsetWidth - rigth.offsetWidth;
var bigImgY = bigImg.offsetHeight - rigth.offsetHeight;
bigImg.style.left = -(x * bigImgX / maxX) + "px";
bigImg.style.top = -(y * bigImgY / maxY) + "px";
}
})
