溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)javascript如何實(shí)現(xiàn)購(gòu)物車效果，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。javascript實(shí)現(xiàn)購(gòu)物車效果的方法：1、使用table來(lái)進(jìn)行界面布局；2、自行封裝getClasses函數(shù)；3、通過(guò)js實(shí)現(xiàn)選中和全選商品，以及商品數(shù)量的增減等功能即可。
本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版，DELL G3電腦
javascript怎么實(shí)現(xiàn)購(gòu)物車效果？
用javascript實(shí)現(xiàn)的購(gòu)物車實(shí)例
基于javascript實(shí)現(xiàn)的購(gòu)物車實(shí)例：
首先是效果和功能，如下圖所示，具有購(gòu)物車的基本功能。
包括1、選中和全選商品；2、商品數(shù)量的增減；3、單個(gè)商品價(jià)格的計(jì)算；4、總價(jià)的計(jì)算；5、刪除商品。
一、界面布局
使用的是table來(lái)進(jìn)行布局，由于用js來(lái)獲取tr 和 td節(jié)點(diǎn)的時(shí)候，可以獲取帶下標(biāo)的元素集合，操作起來(lái)較為便利。
html+css的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>購(gòu)物車</title>
<style>
*{margin:0px; padding:0px;}
table,td,td{
border:1px solid #000000;
font-size:10px;
}
table{
display: block;
}
img{
float:left;
}
tr{
text-align: center;
}
#box{
width:900px;
}
#cart{
float:left;
border-collapse:collapse;
}
#head{
background:#F0FFFF;
}
#settlement{
margin-top:20px;
width:805px;
height:30px;
border:1px solid #EBEBEB;
float:left;
background: #EBEBEB;
font-size:10px;
line-height:30px ;
}
#settlement div{
float:left;
}
#addupto{
color:#ff0000;
font-weight:700;
}
#NumofGoods{
color:#ff0000;
font-weight:700;
}
.goods{
padding:5px;
text-align: left;
}
.number{
position:relative;
left:19px;
width:60px;
height:10px;
border:1px solid #cccccc;
}
.acc{
width:40px;
height:10px;
border-left:0px solid #cccccc;
border-right:0px solid #cccccc;
line-height: 10px;
float:left;
}
.desymbol{
width:10px;
height:10px;
line-height: 10px;
background:#ccc;
float:left;
cursor:pointer;
}
.adsymbol{
width:10px;
height:10px;
line-height: 10px;
background:#ccc;
float:right;
cursor: pointer;
}
/*.dele{
cursor: pointer;
}*/
.total{
color:#ff0000;
font-weight:700;
}
</style>
</head>
<body>
<div id="box">
<table id="cart">
<tr id="head">
<td width="50px"><input type="checkbox"> 全選</td>
<td width="400px;">商品</td>
<td width="100px">單價(jià)</td>
<td width="100px">數(shù)量</td>
<td width="100px">小計(jì)</td>
<td width="50px">操作</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><img src="img/goods1.jpg">外星人筆記本電腦17 R4 15R3 13寸 17寸 alienware今晚吃雞游戲本</td>
<td>12888.00</td>
<td>
<div>
<div>-</div>
<div>1</div>
<div>+</div>
</div>
</td>
<td></td>
<td>刪除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><img src="img/goods2.jpg">任天堂（Nintendo）Switch 家用游戲機(jī) 掌機(jī)NS智能體感游戲主機(jī)</td>
<td>2258.00</td>
<td>
<div>
<div>-</div>
<div>1</div>
<div>+</div>
</div>
</td>
<td></td>
<td>刪除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><img src="img/goods3.jpg">Microsoft/微軟 Surface Pro i5 8G 256G 筆記本平板電腦二合一</td>
<td>4999.00</td>
<td>
<div>
<div>-</div>
<div>1</div>
<div>+</div>
</div>
</td>
<td></td>
<td>刪除</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><img src="img/goods4.jpg">Apple/蘋(píng)果 10.5 英寸 iPad Pro</td>
<td>3666.00</td>
<td>
<div>
<div>-</div>
<div>1</div>
<div>+</div>
</div>
</td>
<td></td>
<td>刪除</td>
</tr>
</table>
<div id="settlement">
<div style="width:550px"><input type="checkbox"> 全選</div>
<div style="width:120px">全選商品<span id="NumofGoods"></span><span>件^</span></div>
<div style="width:80px">合計(jì)：￥<span id="addupto"></span></div>
<div style="width:50px;text-align: center;border-left:1px solid #000000;">結(jié)算</div>
</div>
</div>
<script src="cart.js"></script>
</body>
</html>二、javascript代碼
自行封裝了getClasses（）函數(shù)，避免兼容性問(wèn)題。
var prices = getClasses("price"),
cart = document.getElementById("cart");
acc = getClasses("acc"),
totals = getClasses("total"),
detracts = getClasses("desymbol"),
adds = getClasses("adsymbol"),
NumofGoods = document.getElementById("NumofGoods"),
addupto = document.getElementById("addupto"),
allSelect = getClasses("allSelect"),
select = getClasses("select"),
dele = getClasses("dele");
count();
countAll();
for(var i=0; i<allSelect.length; i++ ){
allSelect[i].onclick = function(){
for(var j=0; j<select.length; j++){
select[j].checked = this.checked;
}
for(j=0; j<allSelect.length; j++){
allSelect[j].checked = this.checked;
}
//每次點(diǎn)擊選框就計(jì)算一次總價(jià)
countAll();
}
}
for(i=0; i<select.length; i++){
select[i].onclick = function(){
if(ifAllSelected()){
for(j=0; j<allSelect.length; j++){
allSelect[j].checked = true;
}
}
if(ifNotAllSelected()){
for(j=0; j<allSelect.length; j++){
allSelect[j].checked = false;
}
}
countAll();
}
}
for(i=0; i<adds.length; i++){
adds[i].onclick = function(){
console.log(this.parentNode.childNodes[3].innerHTML);
var num = parseInt(this.parentNode.childNodes[3].innerHTML);
num += 1;
this.parentNode.childNodes[3].innerHTML = num;
count();
countAll();
}
detracts[i].onclick = function(){
var num = parseInt(this.parentNode.childNodes[3].innerHTML);
num -= 1;
if(num<1){
num=1;
}
this.parentNode.childNodes[3].innerHTML = num;
count();
countAll();
}
//刪除時(shí)也應(yīng)該重新計(jì)算總價(jià)，或者先判斷商品是否被選中，有選中則重新計(jì)算
dele[i].onclick = function(){
cart.childNodes[1].removeChild(this.parentNode);
countAll();
}
}
//避免兼容性問(wèn)題，自行封裝classname
function getClasses(className){
var arr = [],
nodes = document.getElementsByTagName("*");
for(var i=0; i<nodes.length; i++){
if(nodes[i].className == className){
arr.push(nodes[i]);
}
}
return arr;
}
//進(jìn)行單價(jià)的計(jì)算，保留兩位小數(shù)
function count(){
for(var i=0; i<prices.length; i++){
totals[i].innerHTML = (prices[i].innerHTML*acc[i].innerHTML).toFixed(2);
}
}
//計(jì)算總價(jià)的函數(shù)
function countAll(){
var num1=0;
var num2=0;
//注意，每次計(jì)算總價(jià)應(yīng)該重新取得一次select,acc和totals，因?yàn)閳?zhí)行刪除操作時(shí)，會(huì)讓這幾個(gè)值發(fā)生變化
var select = getClasses("select"),
acc = getClasses("acc"),
totals = getClasses("total");
for(var i=0; i<select.length; i++){
if(select[i].checked == true){
num1 += parseInt(acc[i].innerHTML);
num2 += parseFloat(totals[i].innerHTML);
}
}
NumofGoods.innerHTML = num1;
addupto.innerHTML = num2;
}
//判斷是否全部選中或者全部沒(méi)有選中的函數(shù)
function ifAllSelected(){
var allSelected = true;
for(var i=0; i<select.length; i++){
if(select[i].checked == false){
allSelected = false;
}
}
return allSelected;
}
function ifNotAllSelected(){
var notAllSelected = false;
for(var i=0; i<select.length; i++){
if(select[i].checked == false){
notAllSelected = true;
}
}
return notAllSelected;
}關(guān)于javascript如何實(shí)現(xiàn)購(gòu)物車效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼