利用js實作一個簡單的購物車功能
這篇文章主要為大家分享了js簡易版的購物車，具有一定的參考價值，有興趣的小伙伴們可以參考一下
本文實例為大家分享了js購物車功能的具體程式碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
li {
float: left;
width: 200px;
border: 1px #000 solid;
margin: 10px;
}
li img {
width: 200px;
}
p {
height: 20px;
border-bottom: 1px #333 dashed;
}
#bus {
width: 600px;
border: 1px #000 solid;
height: 300px;
clear: both;
}
.box1 {
float: left;
width: 200px;
}
.box2 {
float: left;
width: 200px;
}
.box3 {
float: left;
width: 200px;
}
#allMoney {
float: right;
}
</style>
<script>
window.onload = function() {
var oList = document.getElementById('list');
var aLi = oList.getElementsByTagName('li');
var oBus = document.getElementById('bus');
var obj = {};
var iNum = 0;
var allMoney = 0;
for (var i = 0; i < aLi.length; i++) {
aLi[i].ondragstart = function(ev) {
//点击拖拽元素的时候，就设置数据，以后放到购物车的时候数据就可以传过去了
var ev = ev || window.event;
var aP = this.getElementsByTagName('p');
ev.dataTransfer.setData('title', aP[0].innerHTML);
ev.dataTransfer.setData('price', aP[1].innerHTML);
ev.dataTransfer.setDragImage(this, 0, 0);
}
}
oBus.ondragover = function(ev) {
//阻止鼠标默认事件
var ev = ev || event;
ev.preventDefault();
};
oBus.ondrop = function(ev) {
var ev = ev || event;
var title = ev.dataTransfer.getData('title');
var price = ev.dataTransfer.getData('price');
if(!obj[title]){
var oP = document.createElement('p');
var oSpan = document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = 1;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = title;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML = price;
oP.appendChild(oSpan);
oBus.appendChild(oP);
obj[title] = 1;
}else{
var box1 = document.getElementsByClassName('box1');
var box2 = document.getElementsByClassName('box2');
for(var i=0;i<box2.length;i++){
if(box2[i].innerHTML == title){
box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
};
};
};
//总价
if(!allMoney){
allMoney = document.createElement('p');
allMoney.id = 'allMoney';
}
iNum += parseInt(price);
allMoney.innerHTML = '￥'+iNum;
oBus.appendChild(allMoney);
};
};
</script>
</head>
<body>
<ul id="list">
<li draggable="true">
<img src="img/img1.jpg" />
<p>javascript语言精粹</p>
<p>40￥</p>
</li>
<li draggable="true">
<img src="img/img2.jpg" />
<p>javascript权威指南</p>
<p>120￥</p>
</li>
<li draggable="true">
<img src="img/img3.jpg" />
<p>精通javascript</p>
<p>35￥</p>
</li>
<li draggable="true">
<img src="img/img4.jpg" />
<p>DOM编程艺术</p>
<p>45￥</p>
</ul>
<p id="bus"></p>
</body>
</html>以上是利用js實作一個簡單的購物車功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
最簡單的硬碟序號查詢方式
Feb 26, 2024 pm 02:24 PM
硬碟序號是硬碟的一個重要標識，通常用於唯一標識硬碟以及進行硬體識別。在某些情況下，我們可能需要查詢硬碟序號，例如在安裝作業系統、尋找正確裝置驅動程式或進行硬碟維修等情況下。本文將介紹一些簡單的方法，幫助大家查詢硬碟序號。方法一：使用Windows命令提示字元開啟命令提示字元。在Windows系統中，按下Win+R鍵，輸入"cmd"並按下回車鍵即可開啟命
華為手機如何實現雙微信登入？
Mar 24, 2024 am 11:27 AM
華為手機如何實現雙微信登入？隨著社群媒體的興起，微信已成為人們日常生活中不可或缺的溝通工具之一。然而，許多人可能會遇到一個問題：在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說，實現雙微信登入並不困難，本文將介紹華為手機如何實現雙微信登入的方法。首先，華為手機自帶的EMUI系統提供了一個很方便的功能－應用程式雙開。透過應用程式雙開功能，用戶可以在手機上同
PHP程式設計指南：實作斐波那契數列的方法
Mar 20, 2024 pm 04:54 PM
程式語言PHP是一種用於Web開發的強大工具，能夠支援多種不同的程式設計邏輯和演算法。其中，實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中，將介紹如何使用PHP程式語言來實作斐波那契數列的方法，並附上具體的程式碼範例。斐波那契數列是一個數學上的序列，其定義如下：數列的第一個和第二個元素為1，從第三個元素開始，每個元素的值等於前兩個元素的和。數列的前幾元
實戰教學：PHP與MySQL實作購物車功能詳解
Mar 15, 2024 pm 12:27 PM
實戰教學：PHP和MySQL實現購物車功能詳解購物車功能是網站開發中常見的功能之一，透過購物車使用者可以輕鬆地將想要購買的商品加入購物車，然後進行結算和付款。在這篇文章中，我們將詳細介紹如何使用PHP和MySQL實作一個簡單的購物車功能，並提供具體的程式碼範例。建立資料庫和資料表首先需要在MySQL資料庫中建立一個用來儲存商品資訊的資料表。以下是一個簡單的數據表
如何在華為手機上實現微信分身功能
Mar 24, 2024 pm 06:03 PM
如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視，微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號，方便管理和使用。在華為手機上實現微信分身功能並不困難，只需要按照以下步驟操作即可。第一步：確保手機系統版本和微信版本符合要求首先，確保你的華為手機系統版本已更新至最新版本，以及微信App
掌握Golang如何實現遊戲開發的可能性
Mar 16, 2024 pm 12:57 PM
在現今的軟體開發領域中，Golang（Go語言）作為一種高效、簡潔、並發性強的程式語言，越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發，並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言，Golang正在建構大型遊戲系統
PHP遊戲需求實作指南
Mar 11, 2024 am 08:45 AM
PHP遊戲需求實現指南隨著網路的普及和發展，網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲，而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求，並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中，遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性，例如姓名、等級、經驗值等，並提供方法來操作這些
如何在Golang中實現精確除法運算
Feb 20, 2024 pm 10:51 PM
在Golang中實現精確除法運算是一個常見的需求，特別是在涉及金融計算或其它需要高精度計算的場景中。 Golang的內建的除法運算子「/」是針對浮點數計算的，並且有時會出現精度遺失的問題。為了解決這個問題，我們可以藉助第三方函式庫或自訂函數來實現精確除法運算。一種常見的方法是使用math/big套件中的Rat類型，它提供了分數的表示形式，可以用來實現精確的除法運算
