原生js模拟淘宝购物车项目实战

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

本文实例讲述了原生js模拟淘宝购物车实现代码。分享给大家供大家参考。具体如下：

通过JavaScript实现类似与淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图：

相应的代码：

shoppingCart.html

<!DOCTYPE html>
<html>
<head>
 <meta charset = "UTF-8">
 <title>JavaScript实现购物车项目实战</title>
 <link rel="stylesheet" type="text/css" href="./css/shoppingCart.css">
 <script type="text/javascript" src="/UploadFiles/2021-04-02/shoppingCart.js">

shoppingCart.js




window.onload = function(){
 //低版本的IE浏览器不支持getElementByClassName方法，考虑兼容性,重写方法。
 if (!document.getElementByClassName) {
  document.getElementByClassName =function(cls){
   var ret = [];
   var clsElments = document.getElementsByTagName('*');
   for (var i = 0, len = clsElments.length; i < len; i++) {
    //考虑一个标签有多个class的情况,这里用正则表达式会好一点
    if (clsElments[i].className == cls 
     || (clsElments[i].className.indexOf(cls + " ") >= 0)
     || (clsElments[i].className.indexOf(" " + cls + " ") >= 0)
     || (clsElments[i].className.indexOf(" " + cls) >= 0)) 
    {
     ret.push(clsElments[i]);
    }
   }
   return ret;
  }

 }

 var cartTable = document.getElementById("cartTable");
 var tr = cartTable.children[1].rows; //table标签特有的属性，rows可以获得表格元素的所有tr行。
 var checkInput = document.getElementByClassName('check');//获得所有的单选框
 var checkAllInput = document.getElementByClassName('check_all');//获得所有的单选框
 var priceTotle = document.getElementById("priceTotle");//总价
 var selectTotle = document.getElementById("selectTotle");//已选商品
 var selected = document.getElementById("selected");
 var footer = document.getElementById("footer");//底部标签
 var selectedViewList = document.getElementById("selectedViewList");//底部标签
 var deleteAll = document.getElementById("deleteAll");



 //计算总价格和数量
 function getTotle(){
  var selectNum = 0;//数量
  var priceNum = 0;//价格
  var HTMLstr = ""; //缩略图的字符串拼接
  for (var i = 0,len = tr.length; i < len; i++) {
   if (tr[i].getElementsByTagName("input")[0].checked) {
    tr[i].className ="on";
    selectNum += parseInt(tr[i].getElementsByTagName("input")[1].value);
    priceNum += parseFloat(tr[i].cells[4].innerHTML);


    //拼接字符串显示已经选择的商品 
    HTMLstr += '<div><img src="/UploadFiles/2021-04-02/'+ tr[i].getElementsByTagName('img')[0].src +'">


shoppingCart.css




.count_input{
 width: 39px;
 height: 15px;
 line-height: 15px;
 border: 1px solid #aaa;
 color: #343434;
 text-align: center;
 padding: 4px 0;
 background-color: #fff;
}

span.add, span.reduce{
 height: 23px;
 width: 27px;
 border: 1px solid #e5e5e5;
 background: #f0f0f0;
 line-height: 23px;
 color: #444;
}
.closing{
 display: inline-block;
 width: 120px;
 height: 50px;
 line-height: 50px;
 background: #f40;
 text-align: center;
 font-family: 'Microsoft Yahei';
 font-size: 20px;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 -ms-border-radius: 2px;
 border-radius: 2px;
 text-decoration: none;
 cursor: pointer;
}
.fr{
 float: right;
}
.selected_totle, .selectAll, .select_all, .delete_all{
 margin-top: 15px;
}
.footer{
 height: 50px;
 background: #e5e5e5;
 font-family: 'Microsoft Yahei';
}
#selectTotle, #priceTotle,.subtotle {
 color: #f40;
 font-weight: 700;
 font-size: 18px;
 font-family: tohoma,arial;
 padding: 5px;

}



以上就是js模拟淘宝购物车的全部项目代码，欢迎大家学习品鉴，从中得到收获。

js淘宝购物车结算代码,js淘宝购物车多选框,js仿淘宝购物车

标签：

js淘宝购物车结算代码,js淘宝购物车多选框,js仿淘宝购物车

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“原生js模拟淘宝购物车项目实战”

暂无原生js模拟淘宝购物车项目实战的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

原生js模拟淘宝购物车项目实战

js淘宝购物车结算代码,js淘宝购物车多选框,js仿淘宝购物车

JavaScript如何获取数组最大值和最小值

JavaScript统计网站访问次数的实现代码

评论“原生js模拟淘宝购物车项目实战”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接