2021-07-13 BIYAO项目总结！！！

一.学会了什么

1.调用接口，将接口应用于项目中

2.登录和注册还有首页互相切换讲注册登录数据保存到服务器中

3.搜索能力与接口项目链接到一块

4.楼层滚动。李老师教我们的是固定宽高这次项目可以利用接口

更加完美的实现滚动效果

5.从一个页面到另一个页面的完美跳转

6.纯js的轮播图

7.购物车的添加和删除

7.学会使用git 讲项目传入到git中保存

二.进步有哪些

1.理解了接口的调用

2.学会了纯js的轮播图该怎么写

3.放大镜已经很熟练的掌握了

4.数据渲染掌握的可以

三.哪里不会

1.购物车写的不够好

2.登录注册退出登录购物车之间的切换挺复杂的

3. 购物车中有若干商品信息，其中包括商品的名称、单价、数量，计算购物车中商品的总价。

商品信息通过创建商品对象来实现，若干商品的加和通过创建数组来放置若干商品，

再通过遍历数组读取指定属性对价格进行计算。

四.项目中的哪些业务是符合实现的

1.搜索框

2.数据渲染

3.数据渲染介绍（放大镜，点击添加购物车，图片切换）

4.楼层滚动切换到点击的商品

5.轮播图

两种播放行为；（一种自动播放，一种控制播放），一个定时器控制。

五.项目中哪些亮点，详细介绍

1.轮播图：图片的定时切换，点击向左向右按钮然后随之切换

2.楼层滚动符合点击按钮然后切换到自己的想要的商品位置

3.懒加载将懒加载加入数据渲染中更换其中的图片添加一些js代码

4.放大镜熟练的掌握了放大镜代码

1、鼠标放上去会有半透明遮罩、右边会有大图片局部图

2、鼠标在小图上移动时，通过捕捉鼠标在小图上的位置，定位大图片的响应位置

3、放大镜的移动方向和大图片的移动方向，横向相反，纵向相反

4、技术点：事件捕获，定位

onmouseover:会在鼠标指针移动到指定的对象上时发生

onmouseout:会在鼠标指针移出指定的对象时发生

onmosuemove:会在鼠标指针移动时发生

offsetLeft:子元素相对父元素的左边距离

offsetWidth:盒子的宽度，不报括滚动条

event.clientX:鼠标的X轴，相对于整个页面(代码)

放大镜代码：

html：

</div>

</div>

css：

margin: 0;

padding: 0;

box-sizing: border-box;

}

.magnifier{

display: flex;

justify-content: space-between;

width: 980px;

margin: 20px auto 0;

}

.left{

display: flex;

flex-direction: column;

justify-content: space-between;

width: 400px;

height: 500px;

}

.samllBox{

width: 400px;

height: 400px;

position: relative;

border: 1px solid #cacaca;

}

.samllImg{

width: 100%;

height: 100%;

}

.occlude{

width: 150px;

height: 150px;

background-color: red;

opacity: .5;

position: absolute;

left: 0;

top: 0;

display: none;

cursor: move;

}

.Instance{

text-align: center;

width: 100%;

}

.Instance img{

width: 60px;

height: 60px;

margin: 0 5px;

border: 1px solid #cacaca;

}

.Instance .imgthis{

border: 1px solid red;

}

.rigth{

width: 550px;

height: 550px;

border: 1px solid #cacaca;

padding: 50px;

position: relative;

overflow: hidden;

}

.information h2{

font-size: 20px;

}

.information p{

margin: 50px 0;

}

.information .price{

color: red;

font-size: 18px;

}

.information button{

width: 200px;

height: 50px;

font-size: 23px;

background-color: red;

color: #fff;

border: none;

}

.bigImg{

position: absolute;

left: 0;

top: 0;

width: 750px;

height: 750px;

display: none;

}

js：

var locaId = localStorage.getItem("locaId")

function ajxa(url, fn) {

var hrx = new XMLHttpRequest()

hrx.open('get', `http://49.232.47.192:9527/api${url}`)

hrx.send();

hrx.onreadystatechange = function () {

if (hrx.status === 200 & hrx.readyState === 4) {

var fen = hrx.responseText;

fen = JSON.parse(fen)

fn(fen)

}

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";

}

})

2021-07-13 BIYAO项目总结！！！相关推荐

哔哩哔哩“2021.07.13 我们是这样崩的”报告的学习-1
哔哩哔哩"2021.07.13 我们是这样崩的"报告的学习-1 这份报告是我学计算机两年来第一次真实看到大厂的员工到底在干什么.出现了很多专有名词,以及当前最先进的互联网企业的应用 ...
项目实训2021.07.13
下一阶段个工作重心放在了高并发处理上. 了解并学习了可应用于Flask框架的高并发处理方法.
2021.07.13【B站】是这样崩的
至暗时刻 2021年7月13日22:52,SRE收到大量服务和域名的接入层不可用报警,客服侧开始收到大量用户反馈B站无法使用,同时内部同学也反馈B站无法打开,甚至APP首页也无法打开.基于报警内容,S ...
2021.07.13 B站是这样崩的
大家还记得去年这一天,B 站崩了的事情么? 就在昨天 B 站技术部发布了去年 B 站崩溃的事故报告,在这个迟来一年的报告中,简要介绍了故障产生的诱因.根因.处理过程和优化改进,大家可以看看 B 站程序 ...
2021.07.13 我们是这样崩的
至暗时刻 2021年7月13日22:52,SRE收到大量服务和域名的接入层不可用报警,客服侧开始收到大量用户反馈B站无法使用,同时内部同学也反馈B站无法打开,甚至APP首页也无法打开.基于报警内容,S ...
2021.07.13 洛谷 P7392
P7392 「TOCO Round 1」奇怪的排序 \color{green}{\texttt{P7392 「TOCO Round 1」奇怪的排序}} P7392 「TOCO Round 1」奇怪的排 ...
b站崩了呜呜呜 2021.07.13
#看视频正看得起劲,你给我崩了? ??? 我家没了 >_< 如图可以看到返回代码502: 其他的不知道了.. 结束. 坐等修复..
CVPR 2021 论文和开源项目合集(Papers with Code)
摘自:https://github.com/amusi/CVPR2021-Papers-with-Code CVPR 2021 论文和开源项目合集 CVPR 2021 论文和开源项目合集(Papers ...
【第五组】头脑风暴+核心竞争力+NABCD+个人（用例+功能+技术说明书）最后修改时间 2017.07.13...
2017.07.13版因为对之前版本做了较多修改,所以重新发了,并且在博客下方保留原有版本作为记录. 头脑风暴结果: 刚开始我们无法确定要做一个什么样的应用程序,总结之前可视化课程的作业,我们提出了 ...
张珺 2015/07/13 个人文档
姓名张珺日期 2015/07/13 主要工作及心得今天主要和任笑萱一起完成了对客户端中提供者的调试以及数据库的修改工作. 通过今天的调试工作,我对整个项目有了更深入的认识,对于用java编写客户 ...

2021-07-13 BIYAO项目总结！！！

2021-07-13 BIYAO项目总结！！！相关推荐

最新文章

热门文章