2. 程式人生 > 其它 >HTML5+CSS3+JavaScript 實現淘寶購物車

HTML5+CSS3+JavaScript 實現淘寶購物車

阿新 • • 發佈：2020-12-16

HTML5+CSS3+JavaScript 實現淘寶購物車

1.在一個裡面寫的，好複製。。。。。下邊有分開寫的 備註詳細

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    <style>
        .block{
            width: 800px;
            height: auto;
            min-height
 
: 30px;
            border: 1px solid silver;
            margin: auto;
        }
        .title{
            display: flex;/*彈性佈局*/
            flex-direction: row;/*以行的方式修飾*/
        }
        .title>div{
            flex: 1;/*劃分區域*/
            border-bottom: 1px solid silver;
            border-right
 
: 1px solid silver;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 13px;
        }
        .title>div:nth-child(i) input{
            position: relative;
            top: 2px;
        }
        .h_list{
            display: flex;
            flex-direction
 
: row;

        }
        .h_list>div{
            flex: 1;
            text-align: center;
            line-height: 80px;
            border: 1px solid silver;
        }
        .leftbtn,.rightbtn,.txt{
            display: inline-block;
            width: 30px;
            text-align: center;
        }
        .iscolor{
            background: antiquewhite;
        }
    </style>
</head>
<body>
<div class="block"><!--顯示的盒子-->
    <div class="title"><!--購物車框框-->
        <div><input type="checkbox" id="allcheck"/>全選/反選</div>
        <div>名稱</div>
        <div>單價</div>
        <div>數量</div>
        <div>小計</div>
        <div>操作</div>
    </div>
</div>
<div>
    總計：<label id="label"></label>
</div>
<script>
    var data=[{
        name:"短袖",
        price:40,
        num:1,
        totle:40
        },
        {
            name:"短袖",
            price:120,
            num:1,
            totle:120
        },
        {
            name:"短袖",
            price:80,
            num:1,
            totle:80
        },
        {
            name:"短袖",
            price:110,
            num:1,
            totle:110
        }
        ];
    var block=document.querySelector(".block");
    var allcheck=document.getElementById("allcheck");
    showEle();
    function showEle(){
        for (var i = 0; i <data.length ; i++) {
            //建立行元素
            var h_list=document.createElement("div");
            h_list.setAttribute("class","h_list");
            var div_v_f=document.createElement("div")
            var check=document.createElement("input");
            check.type="checkbox";
            check.index=i;
            check.addEventListener("click",ckcolor);
            check.className="all";
            div_v_f.appendChild(check);
            h_list.appendChild(div_v_f);
            for (var k in data[i]) {//裡邊是集合所以用for in
                if(k=="num")
                {
                    var div_v=document.createElement("div");
                    var left=document.createElement("button");
                    left.className="leftbtn";
                    left.innerHTML="-";
                    left.index=i;
                    left.addEventListener("click",leftbtn);
                    div_v.appendChild(left);

                    var txt=document.createElement("label");
                    txt.innerHTML=data[i][k];
                    txt.className="txt";
                    div_v.appendChild(txt);

                    var right=document.createElement("button");
                    right.innerHTML="+";
                    right.className="rightbtn";
                    right.index=i;
                    right.addEventListener("click",rightbtn);
                    div_v.appendChild(right);

                    h_list.appendChild(div_v);
                }
                else{
                    var div_v=document.createElement("div");
                    div_v.innerHTML=data[i][k];
                    div_v.className=k;
                    h_list.appendChild(div_v);
                }
            }
            var div_v_d=document.createElement("div")
            var btn=document.createElement("button");
            btn.innerHTML="刪除";
            btn.className="delete";
            btn.index= i;
            btn.addEventListener("click",deletebtn);
            div_v_d.appendChild(btn);
            h_list.appendChild(div_v_d);
            block.appendChild(h_list);
        }
    }
    allcheck.onclick=function (){
        var ckall=document.getElementsByClassName("all");
        var hlist=document.getElementsByClassName("h_list")
        for (var i = 0; i <ckall.length ; i++) {
            ckall[i].checked=!ckall[i].checked;
            ckallcolor(ckall[i].checked,hlist,i);
        }
    }
    function leftbtn(){
        var txt=document.getElementsByClassName("txt")
        var num=txt[this.index].innerHTML;
        num--;
        if(num<=1){
            num=1;
        }
        txt[this.index].innerHTML=num;
        s_totle(this.index,num);
        showallprice();
    }
    function rightbtn(){
        var txt=document.getElementsByClassName("txt")
        var num=txt[this.index].innerHTML;
        num++;
        txt[this.index].innerHTML=num;
        s_totle(this.index,num);
        showallprice();
    }
    function s_totle(index,n){
        var price=document.getElementsByClassName("price");
        var totle=document.getElementsByClassName("totle");
        totle[index].innerHTML=price[index].innerHTML*n;
    }
    function ckallcolor(isck,obj,index){
        if(isck){
            obj[index].className="h_list iscolor";
        }else {
            obj[index].className="h_list";
        }
        showallprice();
    }
    function ckcolor(){
        var hlist=document.getElementsByClassName("h_list");
        if(this.checked){
            hlist[this.index].className="h_list iscolor";
        }else {
            hlist[this.index].className="h_list";
        }
        showallprice();
    }
    function showallprice(){
        var all=document.getElementsByClassName("all");
        var totle=document.getElementsByClassName("totle");
        var allprice=0;
        for (var i = 0; i <all.length ; i++) {
            if(all[i].checked){
                allprice+=parseFloat(totle[i].innerHTML);
            }
        }
        var label=document.getElementById("label");
        label.innerText=allprice;
        //console.log(allprice);
    }
    function deletebtn(){
        var hlist=document.getElementsByClassName("h_list");
        var checkbox=document.getElementsByClassName("all");
        var leftbtn=document.getElementsByClassName("leftbtn");
        var deletebtn=document.getElementsByClassName("delete");
        var rightbtn=document.getElementsByClassName("rightbtn");
        hlist[this.index].remove();
        for (var i = 0; i <hlist.length ; i++) {
            checkbox[i].index=i;
            leftbtn[i].index=i;
            rightbtn[i].index=i;
            deletebtn[i].index=i;

        }

        showallprice();
    }
</script>
</body>
</html>

2.拆一下 html裡外鏈路徑要寫對（不用我說了吧）

html檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>購物車</title>
    <link href="css/css.css" rel="stylesheet">
</head>
<body>
<div class="block"><!--設定大盒子-->
    <div class="title"><!--設定大盒子裡的title-->
        <div><input type="checkbox" id="allck">全選/反選</div>
        <div>名稱</div>
        <div>單價</div>
        <div>數量</div>
        <div>小計</div>
        <div>操作</div>
    </div>
</div>
<script src="js/js.js"></script>
</body>
</html>

css 樣式

.block{
    width: 800px;
    height: auto;/*高度自適應*/
    min-height: 30px;/*最小高度指的是沒有資料前title那一行的資料*/
    border: 1px silver solid;
    margin: auto;/*居中顯示*/
}
.title{
    display: flex;/*設定伸縮盒*/
    flex-direction: row;/*讓裡面的元素在一行顯示*/
}
.title>div{
    flex: 1px;/*分配空間*/
    height: 30px;/*設定高度是想垂直顯示用*/
    border: 1px solid silver;
    text-align: center;/*居中顯示*/
    line-height: 30px;/*垂直顯示*/
}

.h_list{
    display: flex;/*設定伸縮盒*/
    flex-direction: row;/*讓裡面的元素在一行顯示*/
}
.h_list>div{/*分配空間 居中*/
    flex: 1;
    text-align: center;
    line-height: 80px;
    border: 1px solid silver;
}
.txt {/*num裡label的寬*/
    width: 30px;
    display: inline-block;
}

js檔案

var data=[{
    name:"短袖",
    price:40,
    num:1,
    totle:40
},{
    name:"短袖",
    price:40,
    num:1,
    totle:40
},{
    name:"短袖",
    price:40,
    num:1,
    totle:40
},{
    name:"短袖",
    price:40,
    num:1,
    totle:40
},
]//虛擬後臺資料
var block=document.querySelector(".block");//獲取大盒子位置，為的就是想讓虛擬資料顯示到大盒子位置
var allck=document.getElementById("allck")
show();//執行show方法
function show(){
    //迴圈方法 確定幾行
    for (var i = 0; i <data.length ; i++) {
        //建立行元素  為什麼要建立行元素---因為想讓取出的資源成行顯示
        var h_list=document.createElement("div");
        //給行元素設定class類選擇器
        h_list.setAttribute("class","h_list");
        //建立放置選擇框的div
        var datacheck =document.createElement("div");
        //給每行建立選擇框
        var check=document.createElement("input");
        check.type="checkbox";
        check.index=i;//給選擇框一個索引，點選變色用
        check.className="ck";
        check.addEventListener("click",ckcolor);
        //給選擇框放到放置選擇框的div
        datacheck.appendChild(check);
        //給放置選擇框的div放到行元素
        h_list.appendChild(datacheck);
        //選擇框完事了 要遍歷出來資料放到行元素裡了
        for (var k in data[i]) {
            //給計數行新增+、-按鈕 所以要一個判斷
            if(k=="num"){
                //num行新增div
                var numall=document.createElement("div");
                //新增按鈕
                var left=document.createElement("button");
                left.innerHTML="-";
                left.index=i;
                left.className="left";
                left.addEventListener("click",leftbtn);
                //新增計數框
                var txt=document.createElement("label");
                txt.innerHTML="1";
                txt.className="txt";
                //新增按鈕
                var right=document.createElement("button");
                right.innerHTML="+";
                right.index=i;
                right.className="right";
                right.addEventListener("click",rightbtn);
                //依次向上新增
                numall.appendChild(left);
                numall.appendChild(txt);
                numall.appendChild(right);
                h_list.appendChild(numall);
            }else{
            //建立放置資料的div
            var datalist=document.createElement("div");
            //給每個div顯示字
            datalist.innerHTML=data[i][k];
            //給每個div設定class類選擇器
            datalist.className=k;
            h_list.appendChild(datalist);
            }
        }
        //放置刪除按鈕的div
        var remove=document.createElement("div");
        //建立刪除的按鈕
        var btn=document.createElement("button");
        btn.innerHTML="刪除";
        btn.className="delete";
        btn.index=i;
        btn.addEventListener("click",deletebtn);
        //依次往上加
        remove.appendChild(btn)
        h_list.appendChild(remove);
        block.appendChild(h_list);
    }
}
//給全選框設定點選全選事件
allck.onclick=function (){
    //獲取那一組選擇框
    var ck=document.getElementsByClassName("ck");
    //獲取行元素，點選變色用
    var hlist=document.getElementsByClassName("h_list");
    //迴圈遍歷出選擇框狀態
    for (var i=0;i<ck.length;i++){
        //選中，未選中切換
        ck[i].checked=!ck[i].checked;
        //呼叫方法變色
        ckallcolor(ck[i].checked,hlist,i);
    }
}
//選擇框 點選變色
function ckcolor() {
    //同樣獲取行元素
    var hlist=document.getElementsByClassName("h_list");
    if(this.checked){
        hlist[this.index].style.backgroundColor="red";
    }
    else {
        hlist[this.index].style.backgroundColor="white";
    }
    allprice()
}
//全選框選中變色   需要傳遞選擇框狀態，行元素，下標
function ckallcolor(isck,obj,index){
    if(isck){
        obj[index].style.backgroundColor="red";
    }else {
        obj[index].style.backgroundColor="white";
    }
    allprice()
}
//設定按鈕事件
function leftbtn() {
    var txt = document.getElementsByClassName("txt");
    var num = txt[this.index].innerHTML;
    num--;
    if (num <= 1) {
        num = 1;
    }
    txt[this.index].innerHTML = num;
    s_price(this.index,num);
    allprice()
}
function rightbtn() {
    var txt = document.getElementsByClassName("txt");
    var num = txt[this.index].innerHTML;
    num++;
    txt[this.index].innerHTML = num;
    s_price(this.index,num);
    allprice()
}
//小計
function s_price(index,num){
    //獲取單價
    var price=document.getElementsByClassName("price");
    //獲取小計
    var totle=document.getElementsByClassName("totle");
    //小計=單價乘數量
    totle[index].innerHTML=price[index].innerHTML*num;
}
//算總賬
function allprice(){
    //需要小計
    var totle=document.getElementsByClassName("totle");
    //需要選擇框算錢
    var ck=document.getElementsByClassName("ck");
    //需要定義總價初始值
    var allprice=0;
    //遍歷 出選擇框
    for (var i = 0; i <ck.length ; i++) {
        //選擇了 就算總賬
        if(ck[i].checked){
            allprice+=parseFloat(totle[i].innerHTML);
        }
        console.log(allprice);//總賬在控制檯顯示一下，，，，懶
    }
}
//刪除按鈕新增事件
function deletebtn() {
    //刪除意味著所有用到索引的都要更新一下
    var hlist = document.getElementsByClassName("h_list");
    var checkbox = document.getElementsByClassName("ck");
    var leftbtn = document.getElementsByClassName("left");
    var deletebtn = document.getElementsByClassName("delete");
    var rightbtn = document.getElementsByClassName("right");
    //刪除
    hlist[this.index].remove();
    //重新遍歷下標索引 重新賦值
    for (var i = 0; i < hlist.length; i++) {
        checkbox[i].index = i;
        leftbtn[i].index = i;
        rightbtn[i].index = i;
        deletebtn[i].index = i;
    }
    //重新算總賬
    allprice();
}

xinyue Day6

相關推薦

HTML5+CSS3+JavaScript 實現淘寶購物車

HTML5+CSS3+JavaScript 實現淘寶購物車 1.在一個裡面寫的，好複製。。。。。下邊有分開寫的 備註詳細

vue實現淘寶購物車功能

本文例項為大家分享了vue實現淘寶購物車的具體程式碼，供大家參考，具體內容如下

python+selenium+chrome實現淘寶購物車秒殺自動結算

之前總是想要買aj，但是淘寶店鋪每次發售手動搶的時候一般都會被黃牛搶走。。。最近畢業設計學習了一下python的東西，所以寫了這麼一個搶購的東西算是解決自己一個小小的願望，這可是aj啊。

js中實現淘寶購物車各種功能

技術標籤：jsjavascript .selfimg { width: 100%; } table, th { border: 1px solid red; } th:nth-of-type(1) { width: 61px; }

JavaScript實現淘寶商品圖切換效果

javascript之衣服相簿切換效果（類似淘寶商品圖切換），供大家參考，具體內容如下

Vue實現淘寶購物車三級選中功能詳解

最近在練習商城專案，記錄下實現購物車三級選中的過程（小白一個，水平很菜）

scrapy框架攜帶cookie訪問淘寶購物車功能的實現程式碼

scrapy框架簡介 Scrapy是用純Python實現一個為了爬取網站資料、提取結構性資料而編寫的應用框架，用途非常廣泛

JavaScript（Node.js）+ Selenium 實現淘寶搶單

JavaScript（Node.js）+ Selenium實現淘寶搶單 為了買買買（剁手）我也是拼了，看了一點selenium的資料，隨便寫的。

Python 指令碼實現淘寶準點秒殺功能

準備軟體 下載地址 ： https://download.csdn.net/download/tangcv/11968538 pycharm檔案太大，不好上傳 ，直接去官網下載：https://www.jetbrains.com/pycharm/download/#section=windows

python實現淘寶購物系統

本文例項為大家分享了python淘寶購物系統的具體程式碼，供大家參考，具體內容如下

js面向物件之實現淘寶放大鏡

本文例項為大家分享了js實現淘寶放大鏡的具體程式碼，供大家參考，具體內容如下

Android recyclerView橫條指示器實現淘寶選單模組

電商首頁選單模組，可以橫向滑動，底部的滑動位置指示器該如何實現呢？ 實現思路：

【Python】使用Selenium實現淘寶搶單

最近，小明為了達成小姐姐的願望，在某寶買到心儀的寶貝，再加上又迷上了python，就通過python輕而易舉地實現了（個人宣告：對Java來說，這並不是背叛）。

Python使用Selenium實現淘寶搶單的流程分析

最近，小明為了達成小姐姐的願望，在某寶買到心儀的寶貝，再加上又迷上了python，就通過python輕而易舉地實現了（個人宣告：對Java來說，這並不是背叛）。

scrapy框架攜帶cookie訪問淘寶購物車

我們知道，有的網頁必須要登入才能訪問其內容。scrapy登入的實現一般就三種方式。

javascript實現支付寶滑塊驗證碼效果

支付寶的滑塊驗證效果，又重新整理了大家對於驗證碼的認知，這種滑塊效果，改善了使用者體驗。除了它外觀和使用者體驗上的優秀外，其實它的安全性也並未降低，後端對使用者行為的分析依然保證了安全校驗。

支援安卓和ios效果相同的react-native輪播圖,實現淘寶詳情頁banner的效果

# rn-bounces-swiper 實現淘寶詳情頁banner圖片輪播彈跳後跳轉的效果 支援安卓和ios效果相同的react-native輪播圖,實現淘寶詳情頁banner的效果。

Python實現淘寶賣家價格分析，淘寶賣家必會的操作！

淘寶賣家必備程式 前一陣閒的冒泡開了個淘寶店，因為改價格等各種原因麻煩的不得了，這不就心思爬個蟲懶得一頁頁翻了麼！如果你沒開過淘寶店或者非得自己親眼看網頁價格，那麼這篇咱們就沒啥緣分了，我們以後隨緣再見

Axure9教程：如何實現淘寶模糊搜尋框？

提到淘寶的搜尋，大家都能想到在這個搜尋框輸入關鍵詞後出現的一系列聯想詞。那麼這種效果如何通過Axure做出來呢？又有哪些要點呢？

Android自定義流式佈局實現淘寶搜尋記錄

本文例項為大家分享了Android實現淘寶搜尋記錄的具體程式碼，供大家參考，具體內容如下