原生JS購物車計算器

效果圖

在這裏插入圖片描述

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="price.css" />
</head>

<body onselectstart="return false;">
    <div class="wrap">
        <div class="box">
            <ul class="list">
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        單價:<strong>12.5元 </strong> 小計:<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        單價:<strong>10.5元 </strong> 小計:<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        單價:<strong>8.5元 </strong> 小計:<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        單價:<strong>8元 </strong> 小計:<strong>0元</strong>
                    </span>
                </li>
                <li>
                    <i></i>
                    <em>0</em>
                    <i></i>
                    <span>
                        單價:<strong>14.5元 </strong> 小計:<strong>0元</strong>
                    </span>
                </li>
            </ul>
            <div class="info">
                <span>商品公合計:<em>0</em></span>
                <span>共花費了:<em>0</em></span>
                <br />
                <br />
                <span>其中最貴的商品單價是:<em>0</em></span>
            </div>
        </div>
    </div>
    <script>
    

        let list = document.querySelectorAll('li');
        let lis = document.querySelectorAll('i');
        let em = document.querySelectorAll(".info em")

        function fn() {
            var total = 0;
            var expenditure = 0;
            var mostExpensive = 0;//排序做的

            for (var i = 0; i < list.length; i++) {
                //數量
                var count = list[i].children[1].innerHTML; 
                //單價
                var price = parseFloat(list[i].children[3].children[0].innerHTML); 
                //小計
                list[i].children[3].children[1].innerHTML = price * count + "元";
                //總數量
                total += parseFloat(list[i].children[1].innerHTML);
                //總價格
                expenditure += parseFloat(list[i].children[3].children[1].innerHTML);
                if (count > 0) {
                    if (mostExpensive < price) {
                        mostExpensive = price
                    }
                }
            }
            //總合計
            em[0].innerHTML = total;
            //總花費
            em[1].innerHTML = expenditure;
            //最貴
            em[2].innerHTML = mostExpensive;
        }
        for (let i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function () {
                if (this.index % 2 === 0) {
                    //減
                    var count = this.nextElementSibling.innerHTML;
                    count > 0 ? count-- : count = 0
                    this.nextElementSibling.innerHTML = count

                } else {
                    var count = this.previousElementSibling.innerHTML;
                    count < 50 ? count++ : count = 50;
                    this.previousElementSibling.innerHTML = count;
                }
                fn();
            }
        }
    </script>
</body>

</html>

CSS

.wrap {
	width: 764px;
	height: 800px;
	margin: 0 auto;
	display: flex;
}

.box {
	width: 479px;
	height: 591px;
	margin: auto;
	background: url(bg1.png) no-repeat center center;
	position: relative;
}
.list {
	width: 100%;
	position: absolute;
	left: 0;
	top: 138px;
}
.list li {
	margin-bottom: 18px;
	width: 100%;
	height: 44px;
	overflow: hidden;
	box-sizing: border-box;
	padding-left: 44px;
}
.list li i {
	width: 52px;
	height: 44px;
	float: left;
	margin-right: 10px;
	cursor: pointer;
}
.list li i:nth-of-type(1) {
	background: url(sub.png) no-repeat center center;
}
.list li i:nth-of-type(2) {
	background: url(add.png) no-repeat center center;
}
.list li em {
	width: 44px;
	height: 36px;
	float: left;
	background: #fff;
	border-radius: 5px;
	font: 16px/36px arial;
	text-align: center;
	margin-right: 10px;
}
.list li span {
	width: 247px;
	height: 36px;
	border-radius: 5px;
	float: left;
	margin-left: 10px;
	background: #171818;
	color: #878787;
	line-height: 36px;
	box-sizing: border-box;
	padding-left: 15px;
}
.list li span strong {
	margin-right: 10px;
}

.info {
	width: 100%;
	height: 140px;
	position: absolute;
	left: 0;
	bottom: 0;
	color: #878787;
	box-sizing: border-box;
	padding: 20px 0 0 42px;
}

.info em {
	width: 46px;
	height: 36px;
	display: inline-block;
	background: #fff;
	border-radius: 5px;
	font: 16px/36px arial;
	text-align: center;
	margin: 0 10px 0;
}
.info span:nth-of-type(2) em {
	width: 66px;
}
.info span:nth-of-type(3) em {
	width: 66px;
}
.info span:nth-of-type(1) {
	margin-right: 20px;
}

資源

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章