HTML5+CSS3实现小米商城和购物车（课程设计大作业）

前言

这里将我的期末大作业展示给大家看一看、瞧一瞧、借鉴借鉴。
用的是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 < jia.length; i++) {
    jia[i].onclick = function () {
        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 < gets.length; i++) {
        sum += parseInt(gets[i].innerHTML) * parseInt(amounts[i].innerHTML);
        sum1 += parseInt(amounts[i].innerHTML);
        demo = demo + names[i].innerHTML + " ; ";
    }

    alert("您本次购买的商品名称 :" + demo + "\n" + "您本次共购买了: " + sum1 + "件商品!\n" + "您本次共消费: " + document.getElementsByClassName("con_end_em")[0].innerHTML + "元!");

}

function he() {
    sum = 0;
    for (let i = 0; i < gets.length; i++) {
        sum += parseInt(gets[i].innerHTML) * parseInt(amounts[i].innerHTML);
    }
    document.getElementsByClassName("con_end_em")[0].innerHTML = sum;
}


for (let i = 0; i < yichu.length; 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 < x) {
        direction.h = false;
    } else if (mouseX > x + floatingAd.offsetWidth) {
        direction.h = true;
    }
    if (mouseY < y) {
        direction.v = false;
    } else if (mouseY > y + floatingAd.offsetHeight) {
        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.length; j++) {
        yuandians[j].style.backgroundColor = "#919191";
        a[j].style.display = "none";
    }
    yuandians[currentIndex].style.backgroundColor = "#f7f7f7";
    a[currentIndex].style.display = "block";
}

// 自动轮播
var intervalId = setInterval(switchPic, 1000);
// 点击圆点切换图片和圆点
for (var i = 0; i < yuandians.length; i++) {
    yuandians[i].index = i;
    yuandians[i].onmouseover = function () {
        clearInterval(intervalId); // 清除之前的定时器
        currentIndex = this.index;
        for (var j = 0; j < yuandians.length; j++) {
            yuandians[j].style.backgroundColor = "#f7f7f7";
            a[j].style.display = "none";
        }
        this.style.backgroundColor = "#919191";
        a[currentIndex].style.display = "block";
    }
    yuandians[i].onmouseout = function () {
        intervalId = setInterval(switchPic, 2000); // 重新设置定时器
    }
}

三、项目完整源代码

链接：https://pan.baidu.com/s/1nTWG2ftoYbw46738VP7d5w?pwd=1215
提取码：1215

大家有任何问题都可以私信我，或者评论区指出，24h在线答疑