网上商城项目总结报告

2023-09-26 07:52| 来源: 网络整理| 查看: 265

首页

首页主要是由登录注册功能菜单，搜索框组成的导航栏与轮播图、分类栏、渲染的商品列表组成。

登录注册功能菜单主要是通过页面跳转的方式来实现的，通过给每一个元素绑定点击事件，触发location.href来实现的。

// 页面跳转 function HTMLJump() { if (oldindex === 0) { location.href = "index.html"; } else if (oldindex === 1) { location.href = "login.html"; } else if (oldindex === 2) { location.href = "register.html"; } else if (oldindex === 3) { location.href = "shopCar.html"; } }

搜索框是通过绑定onchange事件，触发location.href来实现页面传值与跳转功能的。

searchinput.onchange = function () { var valuenum = searchinput.value; location.href = `search.html?word=${ valuenum}`; }

搜索按钮也是通过绑定点击事件，触发location.href来实现页面传值与跳转功能的。

seachboxbtn.onclick = function () { if (!searchinput.value == null) { var valuenum = searchinput.value; location.href = `search.html?word=${valuenum}`; }else{ alert("您还没告诉我您想要什么呢！！"); } }

轮播图组件的编写

html部分 ; ; js部分 // 自动播放 var swiper = document.querySelector(".swiper"); var prevent = document.querySelector(".prevent"); var next = document.querySelector(".next"); var left = 0; //轮播图主要原理 function lunbo(num) { left += num; if (left left = -500; startTransition(num); } swiper.style.left = left + "%"; CI(); } //过渡效果 function startTransition(num) { swiper.style.transition = "none"; var t = setTimeout(function () { swiper.style.transition = "all 2s"; left += num; swiper.style.left = left + "%"; }, 20); } var timer = setInterval(function () { lunbo(-100); }, 5000); // 计时器绑定轮播图 var pointitem = document.querySelectorAll(".point-item"); var count = 0; function CI() { count

【本文地址】

公司简介

联系我们