一.我学会了
1.写大项目的时候 分类创建文件夹, css js 图片 静态页面架构等分开创建,互相调用引用,用的时候条理清晰.
2.会运用老师封装好的接口,理解了Ajax中一些参数意思,也了解了数据的交互.
function getShopList(page) {
REQUEST.get('/goodList', {
params: {
page: page
}
}, function (data) {})
3.在首页的登录注册和登陆之后的购物车和退出的切换,是使用的数据的交互,用的token code值判断
4.点击首页,登录注册等页面会切换
5.轮播图,了解了其中的原理 一个小盒子只显示一张图片的大小,然后在创建一个大的盒子,是总共图片加起来的长度 ,然后overflow:hidden
1. 让图片动起来 是使用的定时器 setInterval 设定时间后,图片往左移动
2. 较难的部分是点击移动图片 鼠标进入 定时器停止,然后点击图片左右移动 ,每次移动的距离是一张图片的长度,在图片结尾多加张图片,放的是第一张图片,从而好切换,轮播的更自如.
6.搜索 使用节流
var debounce = function (fn, delay) {
let timer = null;
return function () {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.call(this)
}, delay)
}
}
7.懒加载
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
bottom.style.display = "block";
} else {
bottom.style.display = "none";
}
}
是运用了getBooundingClientRect().top 这个api 后面的top可以修改 可以是left等,就是判断此元素距离屏幕顶部的距离,当距离小于屏幕的高度,切换图片,切换图片是运用的自定义属性 data-
获取自定义属性用的是getAttribute("data-"); 替换图片地址用的是setAttribute("src",data-)
8.登录和注册 运用了正则表达式 先注册,注册成功后会把数据存到服务器,然后会返回一个值,根据此值,判断之后来跳转登录页面, 登录成功后用localtion.href="" 来切换页面
btn.onclick = function () {
var userName = input[0].value;
var password = input[1].value;
var userReg = /^[a-zA-Z0-9_\u4e00-\u9fa5]{6,12}$/;
var passwordReg = /\w{6,12}/;
if (!userReg.test(userName)) {
var p = input[0].nextElementSibling;
p.style.display = 'block';
return
}
if (!passwordReg.test(password)) {
var p = input[1].nextElementSibling;
p.style.display = 'block';
return
}
console.log('用户名和密码都通过了');
api.Register({
username: userName,
password: password
}, function (data) {
console.log("注册接口响应数据", data);
if (data.code == 1) {
alert('注册成功');
location.href = './login.html'
} else {
alert('注册失败')
}
}
)
}
登陆成功会返回一个值,根据此值来修改头部导航栏
9.购物车 购物车的数据渲染,根据token值来判断是否添加成功
购物车的增加和删除
var shopcarlist = document.querySelectorAll(".shopcarlist");
listdelete.forEach(function (item, index) {
item.onclick = function () {
// confirm("确定删除?");
if (confirm("确定删除?")) {
REQUEST.get('/del', {
params: {
username: username,
token: token,
goodId: shopcarlist[index].getAttribute("data-Id")
}
}, function (data) {
console.log(data.code);
if (data.code == 1) {
shopcarlist[index].remove();
}
}
)
}
}
})
根据判断code值 利用remove删除元素
10.全减全消
绑定全选框 全选框选择 后然后遍历所有商品的选择框 全选框选择了 商品框也同时跟着选中
然后遍历所有的商品的选择框 设置一个num=0来记录点击次数,点几次数等于商品数量的长度,那么全选框被选中.
allinput.onclick = function () {
if (allinput.checked) {
for (var k = 0; k < checkinput.length; k++) {
checkinput[k].checked = true;
}
}
else {
for (var k = 0; k < checkinput.length; k++) {
checkinput[k].checked = false;
}
}
}
var num = 0;
checkinput.forEach(function (item, index) {
item.onclick = function () {
if (item.checked) {
num++;
} else {
num--;
}
if (num == checkinput.length) {
allinput.checked = true;
} else {
allinput.checked = false;
}
}
})
11.渲染成功后点击商品进入详情页
二 进步
学会用字符串模板 学会了懒加载 更熟练更了解了js 会使用了本地存储 获取本地存储 学会了全减全消之间的关系 学会了登录成功后的导航栏切换
window.addEventListener("scroll", function (e) {
var box = document.documentElement;
if (Math.ceil(box.clientHeight + box.scrollTop) >= box.scrollHeight - 100) {
page++;
getShopList(page)
}
});
三 哪里不会
放大镜 搜索 节流 变量污染 购物车的数量总和
四 总结业务
渲染页面 搜索 点击进入详情页 加入购物车 放大镜 删除购物车商品 登录注册 登陆成功切换加入购车 退出 触底加载 懒加载
五 业务亮点
登录注册 变换导航栏
先创建input 下面写p标签 点击输入框p标签消失
在输入框内输入内容 用value获取 然后用正则表达式判断输入是否符合格式 不符合弹出p标签显示不符合格式
注册成功后 信息传递到服务器 然后自动跳转到登录界面 登录已注册的账号和密码
登录成功后 变换导航栏 导航栏显示首页 购物车 退出
var username; // 扩大username的作用域
input[0].oninput = function(e){
var userReg = /^[a-zA-Z0-9_\u4e00-\u9fa5]{6,12}$/;
if(userReg.test(e.target.value)){
username = e.target.value;
//获取到p
var p =e.target.nextElementSibling;
p.innerHTML='验证通过';
p.style.display='block';
p.style.color='green';
input[0].isPass=true; // 后面需要判断注册的账号和密码是否正确符合格式
}else{
var p =e.target.nextElementSibling;
p.innerHTML='只能包含数字、字母、下划线、汉字6-12位';
p.style.display='block';
p.style.color='green';
input[0].isPass=false;
}
}
var password; // 扩大username的作用域
input[1].oninput = function(e){
var passwordReg = /\w{6,12}/;
if(passwordReg.test(e.target.value)){
password = e.target.value;
//获取到p
var p =e.target.nextElementSibling;
p.innerHTML='验证通过';
p.style.display='block';
p.style.color='green';
input[1].isPass=true;
}else{
var p =e.target.nextElementSibling;
p.innerHTML='只能包含数字、字母、下划线、汉字6-12位';
p.style.display='block';
p.style.color='green';
input[1].isPass=false;
}
}
// 点击登录
var btn = document.querySelector('.login button');
btn.onclick=function(){
var pass =input[0].isPass&&input[1].isPass;
if(!pass){
return
}
var option ={
username:username,
password: password
}
api.Login(option,function(data){
console.log('登陆成功',data);
//登陆成功后 把注册的数据传到服务器
if(data.code ===1){
var token =data.token;
localStorage.setItem('token',token)
localStorage.setItem('username',data.username)
setTimeout(() => {
location.href='../index.html'
}, 1000);
}
})
}
