AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

某东购物车（动态）网页搭建

2022-08-25 156
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 网页编程实战二: 利用JavaScript实现某东购物车（动态）网页搭建

需要实现的功能：

单选操作、全选操作、单行删除操作、多行删除操作、价格结算

使用的方式

JavaScript

项目环境

win10+Hbuilder+chrome浏览器

项目结构

红色为新添加的东西，其他的在静态网页搭建时已经搞好

项目效果

在这里插入图片描述

实现了所有功能的主界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>进行价格计算</title>
        
        <link rel="stylesheet" type="text/css" href="css/jd.css"/>
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
        
            
        <!--使用JS别忘记将其引入-->
        <script src="js/jd.js" type="text/javascript" charset="utf-8"></script>
        
        
    </head>
    <body>
        <!--导航开始-->
        <div class="nav">
            
            <div class="warp">
                <ul class="nav_ul1">
                    <li><a href=""><i class="iconfont">&#xe6d3;</i></a></li>
                    <li><a href="">京东首页</a></li>
                    <li><a href="">配送到：宿州</a></li>
                </ul>
                
                 <ul class="nav_ul2">
                         <li><a href="">洋洋宝贝</a><span>|</span></li>
                         <li><a href="">我的订单</a><span>|</span></li>
                         <li><a href="">我的京东</a><span>|</span></li>
                         <li><a href="">京东会员</a><span>|</span></li>
                         <li><a href="">企业采购</a><span>|</span></li>
                         <li><a href="">京东手机</a><span>|</span></li>
                         <li><a href="">关注京东</a><span>|</span></li>
                         <li><a href="">客户服务</a><span>|</span></li>
                         <li><a href="">网站导航</a></li>
                     </ul>
            </div>
            
        </div>
        <!--导航结束-->
        
        <!--搜索框开始-->
        <div class="search">
            <div class="warp">
                <img src="img/logo.jpg" />
                
                <div class="search_div">
                    <input type="text" class="search_text">
                     <input type="button" value="搜索"  class="search_but"/>
                    
                </div>
            </div>
        </div>
        <!--搜索框结束-->
        
        <!--标题开始    -->
        <div class="title warp">
            <h3>全部商品</h3>
            
            <div >
                <span id="">配送至</span>
                <select >
                    <option >埇桥区</option>
                    <option >灵璧县</option>
                    <option >砀山县</option>
                    <option >萧县</option>
                </select>
            </div>
        </div>
        
        <!--标题结束-->
        
        <!--显示菜单的开始 -->
        <!--warp令内容居中显示-->
        <div class="tips warp">
            <ui>
                <li>
                    <input type="checkbox" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>全选</li>
                <li>商品</li>
                <li>单价</li>
                <li>数量</li>
                <li>小计</li>
                <li>操作</li>
            </ui>
        </div>
        <!--显示菜单的结束-->
        
        <!--商品详情展示开始-->
         <div class="info warp">
              
                <ul>
                    <li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()" /> </li>
                    <li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
                    <li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
                    <li class="info_4"><a>颜色：灰色+粉红</a> </li>
                    <li class="info_5">182.5</li>
                    <li class="info_6">
                        <button onclick="checkTest3(this,1),checkTest2()" >-</button>
                        <input type="text" name="" id="" value="1" />
                        <button class="bot" onclick="checkTest3(this,2),checkTest2()" >+</button>
                        
                    </li>
                    <li class="info_7">￥182.5</li>
                    <li>
                    <!--通过href触发后面的JS代码，通过点击自身-->
                        <a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()" >删除</a><br />
                        <a>已到我的关注</a>
                    </li>
                </ul>
              
          </div>
          
          <div class="info warp">
              
                <ul>
                    <li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()" /> </li>
                    <li class="info_2"> <img src="img/img2.jpg" width="80px"/> </li>
                    <li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
                    <li class="info_4"><a>颜色：灰色+粉红</a> </li>
                    <li class="info_5">182.5</li>
                    <li class="info_6">
                        <button onclick="checkTest3(this,1),checkTest2()">-</button>
                        <input type="text" name="" id="" value="1" />
                        <button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
                        
                    </li>
                    <li class="info_7">￥182.5</li>
                    <li>
                        <!--删除完毕，再进行一次判断-->
                        <a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()" >删除</a><br />
                        <a>已到我的关注</a>
                    </li>
                </ul>
              
          </div>
          
          <div class="info warp">
              
                <ul>
                    <li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()" /> </li>
                    <li class="info_2"> <img src="img/img3.jpg" width="80px"/> </li>
                    <li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
                    <li class="info_4"><a>颜色：灰色+粉红</a> </li>
                    <li class="info_5">182.5</li>
                    <li class="info_6">
                        <button onclick="checkTest3(this,1),checkTest2()">-</button>
                        <input type="text" name="" id="" value="1" />
                        <button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
                        
                    </li>
                    <li class="info_7">￥182.5</li>
                    <li>
                        <a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()" >删除</a><br />
                        <a>已到我的关注</a>
                    </li>
                </ul>
              
          </div>
        <!--商品详情展示结束-->
        
        <!--结算窗口开始-->
            <div class="balance warp">
                <ul class="balance_ul1">
                <li><input type="checkbox" name="fav" onclick="checkTest1(this),checkTest2()" />全选</li>
                <li>删除选中商品</li>
                <li>移到我的关注</li>
                <li>清除下柜商品</li>
            </ul>
            
            <ul class="balance_ul2">
                <li>已经选择<span id="snum">0</span>件商品</li>
                <li>总价<span id="zongz">￥0</span></li>
                <li class="butt">去结算</li>
            </ul>
            </div>
        <!--结算窗口结束-->
    </body>
</html>

实现动态交互的JS代码

//获得所有多选框的对象
    var fav=document.getElementsByName("fav");

//判断是否是全选操作
function checkTest1(th){

    //判断选项是否被勾选
    var flag=th.checked;
    //alert(flag);
    
    
    //通过forech的方法遍历名为fav的有序列表
    for (var i in fav) {
        fav[i].checked=flag;
    }
}

//单选决定全选操作
function checkTest2(){
    
    var flag=true;
    
    /*遍历出去第一个和最后一个fav，后来再处理*/
    for (var i=1;i<fav.length-1;i++) {
        if (!fav[i].checked) {
            flag=false;
            break;
        }
    }
    /*决定是否被勾选，fav[0]代表第一个全选框，fav[1]代表第二个多选框*/
    fav[0].checked=flag;
    fav[fav.length-1].checked=flag;
    //alert(flag);
    
    
    
    //商品的总价格
    var zong=0;
    //统计被勾选对象的数量
    var num=0;
    //统计商品数量
    var spNum=0;
    
    //价格是否统计,遍历第2、3、4个fav
    for (var i=1;i<fav.length-1;i++) {
        //如果被勾选
        if (fav[i].checked) {
            num++;
            
            //获得ul父节点
            var par =fav[i].parentNode.parentNode;
            //获得指定ul下的所有li
            var li= par.getElementsByTagName("li");
            
            //单个商品的总价格:将得到的数据通过￥分开，并取第二个元素
            var z=li[6].innerText.split("￥")[1];
            //获得所有商品的总结格
            zong+=Number(z);
            document.getElementById("zongz").innerText=zong;
            
            //获得商品的数量
            var z2=li[5].getElementsByTagName("input");
            var num2=z2[0].value;
            spNum+=Number(num2);
            //获得商品数量统计对象
            document.getElementById("snum").innerText=spNum;
        }
    }
    if(num==0){
         document.getElementById("zongz").innerText=0;    
         document.getElementById("snum").innerText=0;
    }
    
}

/*控制数量的增加或减少，注意括号问题*/
function checkTest3(th,sig){
    //就是th，即this传的值
    var pre;
    if (sig=="1") {
        //获得下一个节点对象
        pre=th.nextElementSibling;
        if (Number(pre.value)>0) {
            //获得节点的value的值
            pre.value=Number(pre.value)-1;
          }
        }else{
            //获得上个节点的对象
            pre=th.previousElementSibling;
            //获得下一个节点对象
            pre.value=Number(pre.value)+1;
        }
        
        
        //计算每个商品的价格
        //获取当前节点的父节点的上一个节点的内容，即每个商品的单价nnerText\innerHTML都可以
        var val=pre.parentNode.previousElementSibling.innerText;
        //计算总价格
        var zong=Number(val)*Number(pre.value);
        //把总价赋值给指定对象
        pre.parentNode.nextElementSibling.innerText="￥"+zong;
}


//删除指定节点
function checkTest4(th){
    //获得父节点div(<a>的父节点（li）的父节点（ul）的父节点div)
    var div=th.parentNode.parentNode.parentNode;
    div.remove();
    
}

相关css文件

jd.css

/*导航栏开始*/
.nav{
    width:1920px ;
    height:30px;
    background-color: #f1f1f1;
}
.warp{
    width: 1000px;
    margin: 0px auto;
}
.nav_ul1,.nav_ul2 li{
    float: left;
}
.nav_ul1 li{
    float: left;
    line-height: 30px;
    margin-right: 20px;
}

.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{    
    font-size: 12px;
    color: gray;
    
}

.nav_ul2{
    float: right;
}

.nav_ul2 li,.nav_ul2 span{
    line-height: 30px;
    margin-left: 15px;
    
}
.nav a:hover{    
    color: red;
}
/*导航栏结束*/


/*搜索框开始*/
.search{
    margin: 20px;
}

.search img{
    /*清除之前冲突样式  重点*/
    clear: both;
    float: left;
}

.search_div{
    float: right;
    margin-top: 20px;
}

.search_text{
    width: 265px;
    height: 21px;
    border: 3px solid #C91623;
    
    position: relative;
    left: 4px;
    top: -1px;
}    

.search_but{
    width: 51px;
    height: 29px;
    background-color: #C91623;
    border: 0px;
    color: #FFFFFF;
}

/*搜索框结束*/

/*标题开始*/
.title{
    margin-top: 130px;
}

.title h3{
    float: left;
    font-size: 23px;
    color: #C91623;
}

.title div{
    float: right;
    font-size: 14px;
    color: gray;
}
/*标题结束*/

/*显示菜单的开始*/
.tips{
    width: 1000px;
    height: 50px;
    background-color: #F1F1F1;
    margin-top: 165px;
    
    border: 1px solid #E9E9E9;
}

.tips li{
    float: left;
    
    line-height: 50px;
    font-size: 12px;
    color: gray;
}
/*border-top：加上边框加*/
.tips li:nth-child(1){width:90px; border-top: 3px solid #c91623; }

.tips li:nth-child(2){margin-left: 80px; }

.tips li:nth-child(3){margin-left: 430px; }

.tips li:nth-child(4){margin-left: 70px; }

.tips li:nth-child(5){margin-left: 110px; }

.tips li:nth-child(6){margin-left: 50px; }
/*显示菜单的结束*/


/*商品详情展示开始*/
.info{
     width: 1000px; 
     height: 125px;
     background-color: #fff4e8;

     border: 1px  solid gray; 
     margin-top: 30px;
     /*上边框，对原来边框的约定进行覆盖*/
      border-top: 3px solid  gray;
}

.info li{
      float:  left;    
      margin-top: 20px;
}

.info a{
    font-size: 12px;
    color: #333333;
}

.info_2{
    margin-left: 15px;
    border: 1px  solid gray;
}

.info_3{ 
      width: 270px; 
      height: 20px;
}

.info_4{
     margin-left: 45px;
    
}

.info_5{
    margin-left: 70px;
    
}

.info_6{
     margin-left: 40px;
}

.info_6 input{    
    width: 30px;
    height: 12px;
    text-align: center;
    
    position: relative;
    top: -2px;
    left: -5px;
    
}

.info_6 button{    
     width: 30px; 
     height: 18px;
}

.bot{
     position: relative;
    left: -10px;
}

.info_7{
    
     margin-left: 40px;
}
/*商品详情展示结束*/

/*结算窗口开始*/
.balance{
    width: 1000px;
    height: 50px;
    
    border: 1px solid gray;
    margin-top: 30px;
}

.balance_ul1 li,.balance_ul2 li{
    float: left;
    line-height: 50px;
    margin-left: 14px;
}

.balance_ul2{
    float: right;

}

.butt{

    width: 110px;
    height: 50px;
    background-color: #C91623;
    
    border: 0px;
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
}

.balance_ul2 span{
    font-size:20px ;
    font-weight: bold;
    color: #C91623;
}
/*结算窗口结束*/

reset.css
统一控制页面格式的css

body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{margin: 0px; padding: 0px;}
body{text-align: center;font-size:14px;}
a{text-decoration: none;}
li{list-style: none;}

源代码已分享至本人云盘~~~
链接：https://pan.baidu.com/s/1ul_DbL2KVdETTc6himvfUA
提取码：7wbw
复制这段内容后打开百度网盘手机App，操作更方便哦

文章标签：
JavaScript
前端开发
时间静止不是简史
目录
相关文章
雷霆半月斩掉你的板砖
|
6月前
|
前端开发 JavaScript
简单购物车功能制作
简单购物车功能制作
雷霆半月斩掉你的板砖
55 0
赵广陆
|
前端开发
HTML+CSS仿京东购物车页面静态页面
HTML+CSS仿京东购物车页面静态页面
赵广陆
174 2
HelloDam
|
SQL 小程序 JavaScript
【易售小程序项目】小程序首页(展示商品、商品搜索、商品分类搜索)【后端基于若依管理系统开发】
【易售小程序项目】小程序首页(展示商品、商品搜索、商品分类搜索)【后端基于若依管理系统开发】
HelloDam
57 0
我是快乐的嘟嘟
|
2月前
|
移动开发
H5页面及店铺分享带图简介
H5页面及店铺分享带图简介
我是快乐的嘟嘟
142 61
疯狂的猿
|
4月前
|
小程序 前端开发
手机租房房源小程序模板源码
手机租房房源小程序模板源码
疯狂的猿
143 4
爱你三千遍斯塔克
|
4月前
|
前端开发 开发工具 数据库
支付系统资料-青戈版沙箱支付，订单编号样式设计，还有七天无理由退款，常与会员系统相搭配，内网穿透客户看到页面，前端展示，直播过程所有都能访问的写法
支付系统资料-青戈版沙箱支付，订单编号样式设计，还有七天无理由退款，常与会员系统相搭配，内网穿透客户看到页面，前端展示，直播过程所有都能访问的写法
爱你三千遍斯塔克
125 0
支付系统资料-青戈版沙箱支付，订单编号样式设计，还有七天无理由退款，常与会员系统相搭配，内网穿透客户看到页面，前端展示，直播过程所有都能访问的写法
落798.
|
开发者
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
落798.
255 0
阿甘兄
|
缓存 NoSQL 数据库
40分布式电商项目 - 网站首页(缓存广告数据)
40分布式电商项目 - 网站首页(缓存广告数据)
阿甘兄
56 0
落798.
|
存储 小程序 API
【 uniapp - 黑马优购 | 购物车页面(2)】如何实现收货地址区域功能、常见问题解决方案
【 uniapp - 黑马优购 | 购物车页面(2)】如何实现收货地址区域功能、常见问题解决方案
落798.
313 0
落798.
【 uniapp - 黑马优购 | 购物车页面(3)】结算页面组件封装与渲染 (超详细代码讲解）
【 uniapp - 黑马优购 | 购物车页面(3)】结算页面组件封装与渲染 (超详细代码讲解）
落798.
208 0

热门文章

最新文章

  • 1
    会声会影2023视频编辑软件免费序列号永久
  • 2
    苹果电脑 Mac OS X 系统上防止误按 command+Q 退出软件
  • 3
    Flutter之禅 内存优化篇
  • 4
    用户密码以BCrypt加密的方式来防范被破解
  • 5
    java Redis工具类
  • 6
    unit9练习
  • 7
    XP注册表优化工具箱
  • 8
    CV和Resume的区别（转）
  • 9
    两名在校生的问题
  • 10
    【AIX 学习】网络管理
  • 1
    通义灵码的代码安全增强措施
    63
  • 2
    国外地区经纬度查询免费API接口教程
    56
  • 3
    《C++文件操作新境界：随机访问与映射的高效实现秘籍》
    55
  • 4
    《C++ 网络编程：高效实现 TCP/IP 与 UDP 通信》
    43
  • 5
    全国行政区划查询免费API接口教程
    47
  • 6
    全国行政区划代码与经纬度查询免费API接口教程
    28
  • 7
    Web应用防火墙（WAF）与数据库应用防火墙有什么区别？
    29
  • 8
    服务器最大支持多少链接数
    27
  • 9
    国家名称大全免费API接口教程
    25

    • 相关课程

    更多
  • 实时数据应用：实现淘宝母婴订单实时查询和可视化
  • 相册服务中的故事生成算法介绍

    • 相关电子书

    更多
  • 如何高效的制作主机次时代游戏——高效游戏制作流程
  • 如何高效的制作主机次时代游戏
  • 千万级用户直播App——服务端架构设计和思考

    • 相关实验场景

    更多
  • 基于Redis实现在线游戏积分排行榜
  • 快速搭建移动端可视化看板
  • 基于Kibana Discover筛选数据，自由搜索航班信息
  • 通过云拨测对指定网页进行网页性能监测
  • 收银台的场景化界面实践
  • 使用EDA架构部署在线外卖订单系统
    • 下一篇
    阿里云OSS设置跨域访问