项目的总结

最新推荐文章于 2022-07-13 22:45:53 发布

冲天遁地

最新推荐文章于 2022-07-13 22:45:53 发布

阅读量129

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_44895516/article/details/118691886

版权

本文详述了在前端开发中如何使用本地存储进行数据操作，如存储、读取和删除。此外，深入探讨了Ajax技术在获取服务器数据并渲染页面的应用，以及正则表达式在登录注册验证中的关键作用。还介绍了页面跳转、历史记录操作、购物车功能实现等。同时，提到了触底加载和放大镜效果的实现技巧，展示了在实际项目中的技术亮点。

摘要由CSDN通过智能技术生成

作业.写醒目的总结性报告

1：你学会了什么

一、使用本地存储对数据进行存储并在另一个页面对本地存储的数据进行读取、修改和删除;

localStorage.setItem:存储数据；localStorage.getItem:读取数据；localStorage.remover:删除数据；

二、熟练使用ajax对服务器的数据进行访问并渲染，

XMLHttpRequest()：创建ajax对象；open(请求方式，请求地址)：与服务器建立连接；send()：发送请求；onreadystatechange()：接收服务器响应；status：是否发送成功 200表示成功；readyState：连接服务器的状态 0-4 5个状态 0 (创建对象xhr时) 1(已经建立连接) 2 send方法 3 服务发送结果 4 服务端返回所有结果。

三、用正则表达式验证数据是否满足要求要求进而制作登录和注册页面,并将数据反馈给服务器进行验证；

四、使用服务器利用本地存储及loaction.href("跳转地址")使页面能够实现页面的相互跳转

五、制作按钮返回上一页 history.back();

六、使用服务器数据制作购物车，对购物车进行商品的增加、减少、删除；并将修改的数据传给服务器；

2：你的进步有哪些

学会了使用本地存储存储数据，初步了解了构造函数以及原型，对使用ajax请求数据更加熟练，对正则表达式的使用有了更深的了解，加深了对js的了解。

3：你哪里不会

对构造函数使用还不够熟练，对原型的了解还不够深刻，还不会使用构造函数和原型封装组件。

4：总结项目中有那些业务，你是符合实现的

返回顶部：获取页面可视区高度clientHeight、需要的事件是scroll

//获取页面可视区高度

var clientHeight = document.documentElement.clientHeight;

//滚动条滚动时触发

window.addEventListener("scroll", function() {

//显示回到顶部按钮

var osTop = document.documentElement.scrollTop || document.body.scrollTop;

if (osTop >= clientHeight) {

returns.style.display = "block";

} else {

returns.style.display = "none";

};

//回到顶部过程中用户滚动滚动条，停止定时器

if (!isTop) {

clearInterval(timer);

};

isTop = false;

});

returns.onclick = function() {

//设置定时器

timer = setInterval(function() {

//获取滚动条距离顶部高度

var osTop = document.documentElement.scrollTop || document.body.scrollTop;

var ispeed = Math.floor(-osTop / 7);

document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;

//到达顶部，清除定时器

if (osTop == 0) {

clearInterval(timer);

};

isTop = true;

}, 30);

};

页面登录注册：获取输入框内的内容并将其与设置好的正则表达式进行验证；用户名的正则表达式是/^[a-zA-Z0-9_\u4e00-\u9fa5]{6,12}$/，密码的正则表达是/\w{6,12}/；验证成功后将数据发送给服务器；注册成功后将页面跳转到登录页面让用户登录，登录页面登录成功后将页面跳转的首页。

首页页面：包括导航栏、轮播图、商品主体部分

导航栏使用input制作搜索栏，轮播图使用使用大小两个盒子大盒子被小盒子包裹，大盒子的宽度等于所有图片的的宽度，小盒子的宽度等于一个图片的宽度。需要使用定时器setTimeout()和clearTimeout();商品主体使用服务器的数据进行渲染。

5：总结你写的项目中有那些技术亮点并详细说明

一、触底加载：首先要在window下使用scroll滚动事件监听页面的滚动，获取页面滚动条内的内容高度scrollHeight和页面卷曲的高度之差是否小于等于页面的可视高度，当条件满足时，分页加一并将分页数据传给服务器，将服务器返回的数据在页面渲染；

二、放大镜：制作放大镜的核心是当小图存在的盒子中有鼠标移动时，大图存在的盒子出现并使大图可以随着鼠标的移动而移动。鼠标移出小图存在的盒子时，大图存在的盒子消失，需要获取鼠标进入小盒子时的横纵坐标e.pageX、e.pageY,小盒子的距离页面上做的距离offsetX、offsetY,使用到的事件是mouseout鼠标进入、mouseovar鼠标离开、mousemover鼠标离开；

1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层和 big 大盒子

preview_img.addEventListener('mouseover', function() {

mask.style.display = 'block';

big.style.display = 'block';

})

preview_img.addEventListener('mouseout', function() {

mask.style.display = 'none';

big.style.display = 'none';

})

// 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走

preview_img.addEventListener('mousemove', function(e) {

// (1). 先计算出鼠标在盒子内的坐标