京东/淘宝移动端商城

大口喝水&

已于 2024-01-07 15:20:27 修改

阅读量254

点赞数

文章标签： html javascript

于 2023-10-31 11:55:43 首次发布

本文链接：https://blog.csdn.net/m0_74384946/article/details/134135265

版权

1 .移动端商城

随着移动网络的发展和移动设备的不断地改新换代，移动商城成为了人们购物娱乐的新天地。

2. 项目介绍

这个商城是基于HTML框架开发的，对初学者比较的友好。javascrip作为辅助型框架进行对网页的修改和帮助。本移动商城主要以2022年的京东网页为参考进行的设计与勾勒。此代码一部分都有注释，方便新学者学习！话不多说直接上代码！！

3. index.html源代码

HTML主要是把页面的主要框架格式给显示出来

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="hm_layout">
        <!-- 搜索栏 -->
        <header class="hm_header">
            <div class="hm_header_box">
                <!-- Logo -->
                <a href="javascript:;" class="icon_logo"></a>
                <!-- 搜索框 -->
                <form action="#">
                    <span class="icon_search"></span>
                    <input type="search" placeholder="搜索" />
                </form>
                <!-- 登录链接 -->
                <a href="#" class="login">登录</a>
            </div>
        </header>
        <!-- 轮播图 -->
        <div class="hm_banner">
            <ul class="clearfix hm_bannerImg">
                <li>
                    <a href="javascript:;"><img src="images/1.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/2.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/3.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/4.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/5.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/6.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/7.jpg" alt="" /></a>
                </li>
                <li>
                    <a href="javascript:;"><img src="images/8.jpg" alt="" /></a>
                </li>
            </ul>
            <ul class="hm_bannerIndicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 导航栏 -->
        <nav class="hm_nav">
            <ul class="clearfix">
                <li>
                    <a href="#">
                        <img src="images/nav0.png" alt="" />
                        <p>分类查询</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav1.png" alt="" />
                        <p>黑马超市</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav2.png" alt="" />
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav3.png" alt="" />
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav4.png" alt="" />
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav5.png" alt="" />
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav6.png" alt="" />
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/nav7.png" alt="" />
                        <p>购物车</p>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- 商品区 -->
        <main class="hm_product">
            <!-- 秒杀区块 -->
            <section class="product_box hm_sk clearfix">
                <!-- 头部内容 -->
                <div class="product_box_tit">
                    <div class="f_left m_l10">
                        <!-- 秒杀图标 -->
                        <span class="sk_icon m_l10"></span>
                        <!-- 秒杀文字 -->
                        <span class="sk_name m_l10">掌上秒杀</span>
                        <!-- 秒杀时间 -->
                        <div class="sk_time m_l10">
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="f_right m_r10"><a href="#">更多></a></div>
                </div>
                <!-- 主体内容 -->
                <div class="product_box_con">
                    <ul class="clearfix">
                        <li>
                            <a href="javascript:;"><img src="images/detail01.jpg" alt="" /></a>
                            <p>&yen;10.00</p>
                            <p>&yen;100.00</p>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="images/detail02.jpg" alt="" /></a>
                            <p>&yen;10.00</p>
                            <p>&yen;100.00</p>
                        </li>
                        <li>
                            <a href="javascript:;"><img src="images/detail01.jpg" alt="" /></a>
                            <p>&yen;10.00</p>
                            <p>&yen;100.00</p>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- 产品区块1 -->
            <section class="product_box">
                <!-- 头部内容 -->
                <div class="product_box_tit">
                    <h3>优惠活动</h3>
                </div>
                <!-- 主体内容 -->
                <div class="product_box_con clearfix">
                    <a href="javascript:;" class="f_left w_50 b_right"><img src="images/cp1.jpg" alt="" /></a>
                    <a href="javascript:;" class="f_right w_50 b_bottom"><img src="images/cp2.jpg" alt="" /></a>
                    <a href="javascript:;" class="f_right w_50"><img src="images/cp3.jpg" alt="" /></a>
                </div>
            </section>
            <!-- 产品区块2 -->
            <section class="product_box">
                <!-- 头部内容 -->
                <div class="product_box_tit">
                    <h3>黑马超市</h3>
                </div>
                <!-- 主体内容 -->
                <div class="product_box_con clearfix">
                    <a href="javascript:;" class="f_right w_50 b_left"><img src="images/cp4.jpg" alt="" /></a>
                    <a href="javascript:;" class="f_left w_50 b_bottom"><img src="images/cp5.jpg" alt="" /></a>
                    <a href="javascript:;" class="f_left w_50"><img src="images/cp6.jpg" alt="" /></a>
                </div>
            </section>
        </main>
    </div>
    <!-- 引入js文件 -->
    <script src="js/index.js"></script>
</body>

</html>

4. base.css样式

base.css如它的名字一样base是基本的意思，是对基本原来的css样式的修改，这个修改基本是所有css样式的修改。

base.css代码

@charset "utf-8";

/* 重置样式 */

*,
::before,
::after {
    margin: 0;
    padding: 0;
    /* 清除点击高亮效果 */
    -webkit-tap-highlight-color: transparent;
    -webkit-box-sizing: border-box;
    /* 处理主流移动端浏览器兼容 */
    box-sizing: border-box;
}

body {
    font-size: 14px;
    font-family: "MicroSoft YaHei", sans-serif;
    /* 设备默认字体 */
    background-color: #f5f5f5;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

input {
    border: none;
    outline: none;
    /* 去除系统默认appearance的样式,常用于iOS下移除原生样式 */
    -webkit-appearance: none;
}

.f_left {
    float: left;
}

.f_right {
    float: right;
}

.clearfix::before,
.clearfix::after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

[class^="icon_"] {
    background: url("../images/sprites.png") no-repeat;
    background-size: 200px 200px;
}

.m_l10 {
    margin-left: 10px;
}

.m_r10 {
    margin-right: 10px;
}

.m_b10 {
    margin-bottom: 10px;
}

.m_t10 {
    margin-top: 10px;
}

5. index.css样式

css样式是对index.html框架格式的整理，是让页面看上去更加整齐美观。对头部，body，尾部，盒子div样式的整改，使其有更好的视觉效果。对base.css样式具有覆盖性，也就是说index.css样式没有提到的各类样式都按照base.css样式来进行来。

index.css

@charset "utf-8";
.hm_layout {
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
    position: relative;
}


/* 搜索栏 */

.hm_header {
    position: fixed;
    /* 固定单位*/
    left: 0;
    top: 0;
    height: 40px;
    width: 100%;
    z-index: 1000;
    /* 避免搜索栏被遮挡*/
}

.hm_header_box {
    width: 100%;
    max-width: 640px;
    /* 设置最大宽度*/
    min-width: 300px;
    /* 设置最小宽度*/
    margin: 0 auto;
    /* 设置水平居中*/
    background: rgba(201, 21, 35, 0);
    /*设置透明度 */
    height: 40px;
    position: relative;
}


/*Logo样式代码*/

.hm_header_box .icon_logo {
    width: 60px;
    height: 36px;
    position: absolute;
    background-position: 0 -103px;
    top: 4px;
    left: 10px;
}


/* 搜索框样式代码*/

.hm_header_box form {
    width: 100%;
    padding-left: 75px;
    padding-right: 50px;
    height: 40px;
    position: relative;
}

.hm_header_box form input {
    width: 100%;
    height: 30px;
    border-radius: 15px;
    margin-top: 5px;
    padding-left: 30px;
}

.hm_header_box form .icon_search {
    height: 20px;
    width: 20px;
    position: absolute;
    background-position: -60px -109px;
    top: 10px;
    left: 85px;
}


/* 搜索栏登录链接样式代码*/

.hm_header_box .login {
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 15px;
}


/* 轮播图 */

.hm_banner {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hm_bannerImg {
    width: 800%;
}

.hm_bannerImg>li {
    width: 12.5%;
    float: left;
}

.hm_bannerImg>li img {
    width: 100%;
    display: block;
}


/* 指示器样式 */

.hm_bannerIndicator {
    width: 128px;
    height: 10px;
    /*轮播图指示器居中显示*/
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
}

.hm_bannerIndicator>li {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 1px solid #fff;
    float: left;
    margin-left: 10px;
}

.hm_bannerIndicator>li:first-of-type {
    margin-left: 0px;
    /* 重置第一个li的左边距为0 */
}

.hm_bannerIndicator>li.active {
    background-color: #fff;
}


/* 导航栏 */

.hm_nav {
    width: 100%;
    background-color: #fff;
}

.hm_nav li {
    width: 25%;
    float: left;
    text-align: center;
    margin-top: 5px;
}

.hm_nav li img {
    width: 60px;
}

.hm_nav li p {
    line-height: 25px;
}


/* 商品区 */

.hm_product {
    width: 100%;
}

.product_box {
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    box-shadow: 0 0 1px #e0e0e0;
    /*添加阴影*/
}


/* 秒杀区块-头部内容 */

.hm_sk {
    /* 设置一个样式标记：秒杀块样式开始 */
}

.hm_sk .product_box_tit {
    border-bottom: none;
    /* 去除底部边框 */
    padding-left: 0;
}

.hm_sk .sk_icon {
    /* 秒杀图标 */
    background: url("../images/seckill-icon.png") no-repeat;
    background-size: 16px 20px;
    width: 16px;
    height: 20px;
    float: left;
    margin-top: 3px;
}

.hm_sk .sk_name {
    /* 秒杀文字 */
    color: #d8505c;
    font-size: 15px;
    float: left;
}

.hm_sk .sk_time {
    /* 秒杀时间 */
    float: left;
    margin-top: 8px;
}

.hm_sk .sk_time span {
    float: left;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    background: #333;
    color: #fff;
    margin-left: 3px;
}

.hm_sk .sk_time span:nth-child(3n) {
    background: transparent;
    color: #333;
    width: 5px;
}


/* 秒杀区块-主体内容 */

.hm_sk .product_box_con {
    padding: 20px;
}

.hm_sk .product_box_con>ul {
    width: 100%;
}

.hm_sk .product_box_con>ul>li {
    width: 33.33%;
    float: left;
    text-align: center;
}

.hm_sk .product_box_con>ul>li img {
    width: 60%;
    display: inline-block;
    /* 清除文本基线，居中对齐 */
}

.hm_sk .product_box_con>ul>li>p:first-of-type {
    color: #d8505c;
    padding-top: 5px;
}

.hm_sk .product_box_con>ul>li>p:last-of-type {
    text-decoration: line-through;
    color: #666;
    padding-top: 5px;
}


/* 产品区块样式代码 */

.product_box>.product_box_tit {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    /* 边框线 */
    padding-left: 30px;
}

.product_box>.product_box_tit>h3 {
    position: relative;
    /* 相对定位 */
    color: #666;
    font-weight: normal;
    font-size: 15px;
}

.product_box>.product_box_tit>h3::before {
    content: "";
    position: absolute;
    /* 绝对定位 */
    width: 3px;
    height: 12px;
    background-color: #e92322;
    top: 9px;
    left: -8px;
}

.w_50 {
    display: block;
    width: 50%;
    /* 宽度为父容器的50% */
}

.w_50>img {
    width: 100%;
    display: block;
    /*清除文本基线*/
}

.b_right {
    border-right: 1px solid #ccc;
}

.b_bottom {
    border-bottom: 1px solid #ccc;
}

6. JavaScript（js）

1.JavaScript简称JS,是非常受欢迎的一种编程语言。

2.用于实现网页的交互性、处理数据、创建各种应用程序。

3.可用于HTML、Web。

4.可用于服务器、PC、笔记本电脑、智能手机等等。

js代码

 // 入口函数，页面加载完成之后执行
 window.onload = function() {
     search();
     downTime();
     bannerEffect();
 };
 // 搜索栏
 function search() {
     // 1. 获取当前banner元素的高度
     var banner = document.querySelector('.hm_banner');
     var bannerHeight = banner.offsetHeight;
     // 获取header搜索块元素
     var search = document.querySelector('.hm_header');
     // 监听屏幕滚动
     window.onscroll = function() {
         // 2. 获取当前屏幕滚动时，banner滚动出屏幕的距离，也就是当前整个文档滚动出屏幕的高度。同时处理兼容性。
         var offsetTop = document.body.scrollTop || document.documentElement.scrollTop;
         // 3. 计算比例值，获取透明度，设置背景颜色的样式
         var opacity = 0; // 默认透明度为0
         // 判断如果当banner还没有完全滚出屏幕，才有必要去计算并设置透明度
         if (offsetTop < bannerHeight) {
             opacity = offsetTop / bannerHeight;
             // 设置样式
             search.style.backgroundColor = 'rgba(201,21,35,' + opacity + ')';
         }
     }
 }
 // 倒计时
 function downTime() {
     // 获取用于展示时间的span
     var spans = document.querySelector('.sk_time').querySelectorAll('span');
     // 设置初始的倒计时时间（以秒为单位）
     var totalTime = 1 * 60 * 60;
     // 开启定时器
     var timer = setInterval(() => {
         totalTime--;
         // 判断倒计时时间是否已经完成
         if (totalTime < 0) {
             clearInterval(timer); // 清除时钟
             return;
         }
         // 获取剩余时间中的 时分秒
         var h = Math.floor(totalTime / 3600); // 获取小时数
         var m = Math.floor(totalTime % 3600 / 60); // 获取分钟数
         var s = Math.floor(totalTime % 60); // 获取秒钟数
         // 赋值，将时间填充到span中
         spans[0].innerHTML = Math.floor(h / 10);
         spans[1].innerHTML = Math.floor(h % 10);
         spans[3].innerHTML = Math.floor(m / 10);
         spans[4].innerHTML = Math.floor(m % 10);
         spans[6].innerHTML = Math.floor(s / 10);
         spans[7].innerHTML = Math.floor(s % 10);
     }, 1000);
 }
 // 轮播图
 function bannerEffect() {
     // 在开始位置添加原始的最后一张图片
     // 在结束位置添加原始的第一张图片
     // 获取轮播图结构
     var banner = document.querySelector('.hm_banner');
     var imgBox = banner.querySelector('ul:first-of-type');
     // 获取原始的第一张图片
     var first = imgBox.querySelector('li:first-of-type');
     // 获取原始的最后一张图片
     var last = imgBox.querySelector('li:last-of-type');
     // 在首尾插入两张图片   cloneNode：复制一个DOM元素
     imgBox.appendChild(first.cloneNode(true));
     // insertBefore(需要插入的DOM元素, 位置)
     imgBox.insertBefore(last.cloneNode(true), imgBox.firstChild);

     // 设置对应的样式
     // 获取所有图片li元素
     var lis = imgBox.querySelectorAll('li');
     // 获取li元素的数量
     var count = lis.length;
     // 获取banner的宽度
     var bannerWidth = banner.offsetWidth;
     // 设置图片盒子的宽度
     imgBox.style.width = count * bannerWidth + 'px';
     // 设置每一个li元素的宽度
     for (var i = 0; i < lis.length; i++) {
         lis[i].style.width = bannerWidth + 'px';
     }

     // 定义图片索引，图片已经有一个宽度的默认偏移
     var index = 1;
     imgBox.style.left = -bannerWidth + 'px'; // 设置默认的偏移
     // 当屏幕变化的时候，重新计算宽度
     window.onresize = function() {
         // 获取banner的宽度，覆盖全局的宽度值
         bannerWidth = banner.offsetWidth;
         // 设置图片盒子的宽度
         imgBox.style.width = count * bannerWidth + 'px';
         // 设置每一个li元素的宽度
         for (var i = 0; i < lis.length; i++) {
             lis[i].style.width = bannerWidth + 'px';
         }
         // 重新设置偏移
         imgBox.style.left = -index * bannerWidth + 'px';
     };

     // 实现点标记
     var setIndicator = function(index) {
         var indicators = banner.querySelector('ul:last-of-type').querySelectorAll('li');
         // 先清除其他li元素的active样式
         for (var i = 0; i < indicators.length; i++) {
             indicators[i].classList.remove('active');
         }
         // 为当前li元素添加active样式
         indicators[index - 1].classList.add('active');
     }

     var timerId;
     // 实现自动轮播
     var startTime = function() {
         timerId = setInterval(function() {
             // 变换索引
             index++;
             // 添加过渡效果
             imgBox.style.transition = 'left 0.5s ease-in-out';
             // 设置偏移
             imgBox.style.left = (-index * bannerWidth) + 'px';
             // 判断是否到最后一张，如果是则回到索引1的位置
             setTimeout(function() {
                 if (index == count - 1) {
                     index = 1;
                     // 如果一个元素的某个属性之前添加过过渡效果，那么过渡属性会一直存在，如果不想要，则需要清除过渡效果
                     // 关闭过渡效果
                     imgBox.style.transition = 'none';
                     // 偏移到指定的位置
                     imgBox.style.left = (-index * bannerWidth) + 'px';
                 }
             }, 500);
         }, 2000);
     }
     startTime();

     // 实现手动轮播，注意touch事件的触发，必须保证元素有具体的宽高值，如果宽高为0，则不会进行触发。
     // 记录开始坐标值、滑动过程中的坐标值、两者的差异值
     var startX, moveX, distanceX;
     // 标记当前过渡效果是否已经执行完毕
     var isEnd = true; // 默认没有加过渡效果，标记当前过渡效果是否已经执行完毕
     // 为图片添加触摸开始事件
     imgBox.addEventListener('touchstart', function(e) {
         // 清除定时器
         clearInterval(timerId);
         // 获取当前手指的起始位置
         startX = e.targetTouches[0].clientX;
     });

     // 为图片添加触摸滑动过程事件
     imgBox.addEventListener('touchmove', function(e) {
         if (isEnd == true) {
             // console.log('touchmove');
             // 记录手指在滑动过程中的位置
             moveX = e.targetTouches[0].clientX;
             // 计算坐标的差异
             distanceX = moveX - startX;
             // 为了保证效果正常，将之前可能添加的过渡样式清除
             imgBox.style.transition = 'none';
             // 实现元素的偏移  left参照最原始的坐标
             // 本次的滑动操作应该基于之前轮播图已经偏移的距离
             imgBox.style.left = (-index * bannerWidth + distanceX) + 'px';
         }
     });

     // 为图片添加触摸结束事件
     // 判断当前滑动的距离，如果超出指定的范围就翻页，否则回弹
     imgBox.addEventListener('touchend', function(e) {
         // 松开手指，标记当前过渡效果正在执行
         isEnd = false;
         // 获取当前滑动的距离，判断距离是否超出指定的范围 100px
         if (Math.abs(distanceX) > 100) {
             // 判断滑动的方向
             if (distanceX > 0) {
                 index--; // 上一张
             } else {
                 index++; // 下一张
             }
             // 翻页，下一张图
             imgBox.style.transition = 'left 0.5s ease-in-out';
             imgBox.style.left = -index * bannerWidth + 'px';
         } else if (Math.abs(distanceX) > 0) { //得保证用户确实进行过滑动操作
             // 回弹
             imgBox.style.transition = 'left 0.5s ease-in-out';
             imgBox.style.left = -index * bannerWidth + 'px';
         }
         // 将上一次move所产生的数据重置为0
         startX = 0;
         moveX = 0;
         distanceX = 0;
     });

     // webkitTransitionEnd：可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件
     imgBox.addEventListener('webkitTransitionEnd', function() {
         //console.log('webkitTransitionEnd');
         // 如果到了最后一张(count - 1)，回到索引1
         // 如果到了第一张(0)，回到索引count-2
         if (index == count - 1) {
             index = 1;
             // 清除过渡
             imgBox.style.transition = 'none';
             // 设置偏移
             imgBox.style.left = -index * bannerWidth + 'px';
         } else if (index == 0) {
             index = count - 2;
             // 清除过渡
             imgBox.style.transition = 'none';
             // 设置偏移
             imgBox.style.left = -index * bannerWidth + 'px';
         }
         // 设置标记
         setIndicator(index);
         setTimeout(function() {
             isEnd = true;
             // 清除之前添加的定时器
             clearInterval(timerId);
             // 重新开启定时器
             startTime();
         }, 1000);
     });
 }

谢谢您的观看！！制作不易，如对您有帮助还请您点赞收藏na！

如有对您有不妥请尽情联系进行修改，如有问题请联系删除,修改。

qq:242658595

大口喝水&

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
京东/淘宝移动端商城

这个商城是基于HTML框架开发的，对初学者比较的友好。javascrip作为辅助型框架进行对网页的修改和帮助。本移动商城主要以2022年的京东网页为参考进行的设计与勾勒。此代码一部分都有注释，方便新学者学习！话不多说直接上代码！！
复制链接

扫一扫