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

古城微笑少年丶 2024-02-17 09:33 76阅读 0赞

#### HTML5+CSS3实现小米商城首页和购物车页面 ####

*  前言
 *  一、效果展示
 *   *   *  小米商城首页
         *  购物车页
 *  二、 代码分析
 *   *   *  购物车
         *  商城主页
 *  三、项目完整源代码
 *  大家有任何问题都可以私信我，或者评论区指出，24h在线答疑

## 前言 ##

这里将我的期末大作业展示给大家看一看、瞧一瞧、借鉴借鉴。  
用的是HTML和CSS和JS做的小米商城首页和一个小米的购物车案例！  
其中 小米商城用 js 实现了**轮播图**和**下拉框**以及**悬浮窗追踪鼠标移动**  
购物车页面实现了 **商品数量的增减** 以及 **移除和结算**

**文章末尾附有项目完整的代码！**  
如果大家想要其他的页面了，也可以参考我的其他文章：  
[HTML5+CSS3实现小米商城][HTML5_CSS3]  
[HTML5+CSS3实现华为商城][HTML5_CSS3 1]  
[HTML5+CSS3实现华为官网][HTML5_CSS3 2]  
[HTML5+CSS3实现小米官网][HTML5_CSS3 3]  
[HTML5+CSS3实现哔哩哔哩首页][HTML5_CSS3 4]  
[HTML5+CSS3实现QQ注册页面][HTML5_CSS3_QQ]  
还有华为和小米和哔哩哔哩的一些其他相关页面就不在这里展示了，如果需要了可以后台私信我！

那话不多说，先展示一下我的这两个页面实现效果吧！

## 一、效果展示 ##

#### 小米商城首页 ####

![在这里插入图片描述][fbc4105f68884bed998cc9f9bde061eb.png]

#### 购物车页 ####

![在这里插入图片描述][a8c2219c75ef46dabf8638a57580809b.png]

## 二、 代码分析 ##

#### 购物车 ####

购物车页面是可以实现数量的增加和减少，并且可以移除和结算的。这些是通过js来实现  
并且在数量减少的时候会进行判断，防止数量减少到负数！

#### 商城主页 ####

这里用到了两个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在线答疑 ##

[HTML5_CSS3]: https://blog.csdn.net/m0_63512120/article/details/125885820?spm=1001.2014.3001.5501
[HTML5_CSS3 1]: https://blog.csdn.net/m0_63512120/article/details/130963321?spm=1001.2014.3001.5501
[HTML5_CSS3 2]: https://blog.csdn.net/m0_63512120/article/details/130961765?spm=1001.2014.3001.5501
[HTML5_CSS3 3]: https://blog.csdn.net/m0_63512120/article/details/129443760?spm=1001.2014.3001.5501
[HTML5_CSS3 4]: https://blog.csdn.net/m0_63512120/article/details/129710606?spm=1001.2014.3001.5501
[HTML5_CSS3_QQ]: https://blog.csdn.net/m0_63512120/article/details/125894002?spm=1001.2014.3001.5501
[fbc4105f68884bed998cc9f9bde061eb.png]: https://img-blog.csdnimg.cn/fbc4105f68884bed998cc9f9bde061eb.png
[a8c2219c75ef46dabf8638a57580809b.png]: https://img-blog.csdnimg.cn/a8c2219c75ef46dabf8638a57580809b.png