HTML5+CSS3实现小米商城和购物车（课程设计大作业） |
您所在的位置：网站首页 › 小米商城web实训创新点 › HTML5+CSS3实现小米商城和购物车（课程设计大作业） |
HTML5+CSS3实现小米商城和购物车（课程设计大作业）
|
HTML5+CSS3实现小米商城首页和购物车页面
前言一、效果展示小米商城首页购物车页
二、 代码分析购物车商城主页
三、项目完整源代码大家有任何问题都可以私信我，或者评论区指出，24h在线答疑
前言
这里将我的期末大作业展示给大家看一看、瞧一瞧、借鉴借鉴。 用的是HTML和CSS和JS做的小米商城首页和一个小米的购物车案例！ 其中 小米商城用 js 实现了轮播图和下拉框以及悬浮窗追踪鼠标移动 购物车页面实现了 商品数量的增减 以及 移除和结算 文章末尾附有项目完整的代码！ 如果大家想要其他的页面了，也可以参考我的其他文章： HTML5+CSS3实现小米商城 HTML5+CSS3实现华为商城 HTML5+CSS3实现华为官网 HTML5+CSS3实现小米官网 HTML5+CSS3实现哔哩哔哩首页 HTML5+CSS3实现QQ注册页面 还有华为和小米和哔哩哔哩的一些其他相关页面就不在这里展示了，如果需要了可以后台私信我！ 那话不多说，先展示一下我的这两个页面实现效果吧！ 一、效果展示 小米商城首页
购物车页面是可以实现数量的增加和减少，并且可以移除和结算的。这些是通过js来实现 并且在数量减少的时候会进行判断，防止数量减少到负数！ let gets = document.getElementsByClassName("con_div_s2"); // 单价 let amounts = document.getElementsByClassName("con_div2_in1"); // 数量 let names = document.getElementsByClassName("con_div_div2"); // 名称 let jia = document.getElementsByClassName("con_div2_a2"); // 加法 let jian = document.getElementsByClassName("con_div2_a1"); // 减法 let yichu = document.getElementsByClassName("con_div_a1"); //移除 let sum = 0; let sum1 = 0; let demo = ""; for (let i = 0; i amounts[i].innerHTML = parseInt(amounts[i].innerHTML) + 1; he(); } jian[i].onclick = function () { if (parseInt(amounts[i].innerHTML) > 1) { amounts[i].innerHTML = parseInt(amounts[i].innerHTML) - 1; he(); } else { alert("该商品数量已经达到最小！"); } } } he(); let end = document.getElementsByClassName("con_end_a1")[0]; end.onclick = function () { demo = ""; sum1 = parseInt('0'); for (let i = 0; i sum = 0; for (let i = 0; i yichu[i].onclick = function () { amounts[i].innerHTML = '0'; document.getElementsByClassName('con_div')[i].style.display = 'none'; he(); } } 商城主页这里用到了两个js案列，一个是轮播图，一个是悬浮窗跟踪鼠标移动。 轮播图实现过程：定义一个switchPic()函数，实现切换图片和圆点的功能。每调用一次switchPic()函数，currentIndex自增1，如果currentIndex超过了图片的数量，则重置为0。然后遍历所有圆点元素和图片链接元素，将圆点颜色设为默认颜色，同时将所有图片链接元素隐藏。接着，将当前圆点元素的颜色设为高亮颜色，将当前图片链接元素显示出来，实现图片的切换。使用setInterval()函数设置定时器，每隔1秒调用一次switchPic()函数，实现自动轮播的功能。为每个圆点元素添加mouseover和mouseout事件监听器，当鼠标移动到圆点上时，清除之前的定时器，切换到对应的图片并高亮对应圆点；当鼠标移开圆点时，重新设置定时器，继续轮播图片。 悬浮广告实现过程：要一直获取悬浮广告块的当前坐标。判断鼠标位置与广告块位置的关系，根据关系改变漂移方向，不断更新悬浮广告块的坐标。代码中定义了函数 getMousePos，用于获取鼠标在页面上的位置。该函数接收一个 event 参数，通过 event.pageX 和 event.pageY 来获取鼠标在页面上的横向和纵向位置。定义了函数 startFloating，用于启动漂浮。该函数使用 setInterval 函数设置定时器，每隔 delay 毫秒调用一次 keepMoving 函数。定义了函数 initFloating，用于初始化悬浮广告块。该函数首先随机生成悬浮广告块的初始位置，然后调用 startFloating 函数启动漂浮。使用 document.addEventListener 函数绑定了鼠标移动事件，每次移动时会调用 getMousePos 函数更新鼠标位置信息。 悬浮窗 // 获取悬浮广告块元素 var floatingAd = document.querySelector('.floating-ad'); // 定义漂浮参数 var step = 1; // 每次移动的步长 var delay = 16; // 每次移动的时间间隔 var direction = { // 漂移方向 h: true, // 水平方向 v: true // 垂直方向 }; var mouseX, mouseY; // 鼠标位置 // 定义漂浮函数 function keepMoving() { // 获取广告块的当前坐标 var x = parseInt(floatingAd.style.left); var y = parseInt(floatingAd.style.top); // 判断鼠标位置与广告块位置的关系，改变漂移方向 if (mouseX direction.h = true; } if (mouseY direction.v = true; } // 根据漂移方向改变坐标 if (direction.h) { x += step; } else { x -= step; } if (direction.v) { y += step; } else { y -= step; } // 更新广告块的坐标 floatingAd.style.left = x + "px"; floatingAd.style.top = y + "px"; } // 获取鼠标位置 function getMousePos(event) { mouseX = event.pageX - window.pageXOffset; mouseY = event.pageY - window.pageYOffset; } // 启动漂浮 function startFloating() { // 使用 setInterval 函数设置定时器，每隔 delay 毫秒调用一次 keepMoving 函数 setInterval(function () { keepMoving(); }, delay); } // 初始化悬浮广告块 function initFloating() { // 设定悬浮广告块的随机初始位置 var x = Math.floor(Math.random() * window.innerWidth); var y = Math.floor(Math.random() * window.innerHeight); floatingAd.style.left = x + "px"; floatingAd.style.top = y + "px"; // 启动漂浮 startFloating(); } // 绑定鼠标移动事件，每次移动更新鼠标位置信息 document.addEventListener('mousemove', function (event) { getMousePos(event); }); // 调用初始化函数 initFloating();轮播图 // 轮播图部分 var pics = document.getElementById("pics"); var yuandians = pics.getElementsByClassName("fl"); var a = pics.getElementsByTagName("a"); var currentIndex = 0; // 当前显示的图片的索引 // 切换图片和圆点的函数 function switchPic() { currentIndex++; if (currentIndex >= a.length) { currentIndex = 0; } for (var j = 0; j yuandians[i].index = i; yuandians[i].onmouseover = function () { clearInterval(intervalId); // 清除之前的定时器 currentIndex = this.index; for (var j = 0; j intervalId = setInterval(switchPic, 2000); // 重新设置定时器 } } 三、项目完整源代码链接：https://pan.baidu.com/s/1nTWG2ftoYbw46738VP7d5w?pwd=1215 提取码：1215 大家有任何问题都可以私信我，或者评论区指出，24h在线答疑 |
【本文地址】
今日新闻 |
推荐新闻 |