⑴ 如何用html css javascript php製作購物車
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="---.css">
<script src="---.js"></script>
</head>
<body>
<div class="container">
<div class="shop">
<div class="header">
<input type="checkbox" class="shop-checkbox">
<span class="shop-icon"></span>
<span class="shop-name">---</span>
<span class="wangwang-icon"></span>
</div>
<div class="items">
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>----</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">----</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥50.13</span>
</div>
<div class="operation">
<div>---</div>
<div>---</div>
</div>
</div>
</div>
</div>
<div class="shop">
<div class="header">
<input type="checkbox" class="shop-checkbox">
<span class="shop-icon"></span>
<span class="shop-name">---</span>
<span class="wangwang-icon"></span>
</div>
<div class="items">
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>----</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">---</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥9.90</span>
</div>
<div class="operation">
<div>移入收藏夾</div>
<div>刪除</div>
</div>
</div>
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>---</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">---</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥19.9</span>
</div>
<div class="operation">
<div>移入收藏夾</div>
<div>刪除</div>
</div>
</div>
</div>
</body>
</html>
.container{
width: 1000px;
margin-left: auto;
margin-right: auto;
color: #444444;
}
.header{
margin: 8px;
}
.shop-icon, .wangwang-icon, .promotion-icons span{
display:inline-block;
width: 15px;
height: 15px;
background-color: rgb(117,192,241);
}
.promotion-icons span{
margin-right: 4px;
}
.items{
border: 1px solid #ebe9e9;
}
.item{
display: flex;
margin: 8px;
}
.item-img{
width:100px;
height: 100px;
display: inline-block;
background-color: aquamarine;
margin-left: 6px;
margin-right: 6px;
}
.item-name
{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sku, .price,.item-price-total,.operation,.num-control{
margin-left: 18px;
}
.num{
width: 18px;
height: 15px;
}
.num-control{
display: flex;
align-items: baseline;
}
.num-minus,.num-plus{
width: 18px;
height: 22px;
display: inline-block;
background-color: #ebe9e9;
}
.checkout{
display: flex;
justify-content: space-between;
}
.shop{
margin-bottom: 20px;
margin-top: 30px;
}
.goods,.freight,.checkout-button{
margin-left: 15px;
}
.price-1{
text-decoration: line-through;
color: gray;
}
.check-num ,.total-price{
font-size: large;
color: red;
margin-left: 3px;
margin-right: 3px;
}
.checkout-button{
height: 30px;
width: 50px;
background-color: beige;
}
.checkout{
margin-top: 15px;
}
.item-name{
width: 25%;
}
.item-price-total{
width: 5%;
}
.sku{
width: 20%;
}
function updatePrice(){
let items = document.querySelectorAll('.item');
let totalNum = 0;
let totalPrice = 0;
items.forEach(function(item){
if(item.querySelector('.item-checkbox').checked){
let num = item.querySelector('.num').value;
totalNum = totalNum + parseInt(num);
let price = item.querySelector('.price-2').getAttribute('data-price');
totalPrice = totalPrice + parseFloat(price) * num;
}
});
document.querySelector('.check-num').innerText= totalNum;
document.querySelector('.total-price').innerText = totalPrice;
}
window.onload=function(){
let itemCheckboxes = document.querySelectorAll('.item-checkbox');
itemCheckboxes.forEach(function(itemCheckbox){
itemCheckbox.onchange = function(){
updatePrice();
}
});
let minuses = document.querySelectorAll('.num-minus');
minuses.forEach(function(minus){
minus.onclick = function(event){
let num=minus.parentElement.querySelector('.num').value;
if(parseInt(num)>1)
{
minus.parentElement.querySelector('.num').value=parseInt(num)-1;
updatePrice();
}
};
});
let pluses = document.querySelectorAll('.num-plus');
pluses.forEach(function(plus){
plus.onclick = function(event){
let num=plus.parentElement.querySelector('.num').value;
plus.parentElement.querySelector('.num').value=parseInt(num)+1;
updatePrice();
}
});
}
⑵ 自己建一個網站，如何實現購物車的功能
自己建站啊？呵呵呵，可以找個合作夥伴啊！介紹一個不錯的：3w網站精品店，價格也實惠。網路谷歌一下吧。
⑶ 購物網站如何設計漂亮且實用的購物車
相應的，大量的購物網站也隨之出現。如何設計兼顧美觀與可用性的網站購物車，是一門非常有研究價值的問題。本文為讀者介紹了10個優秀購物車的設計技巧，並為讀者推薦了一些國外的優秀購物車設計欣賞。1.
整版車和迷你車購物車通常有兩種形式，整版頁面的購物車和作為網頁組件的迷你購物車。建議兩種形式同時包括。迷你購物車不影響購物車以外的布局，只顯示購物的列表及簡要信息，並且有一個醒目的鏈接指向整版購物車頁面，下面是一個很好的例子：相反的，整版購物車頁面可以提供更詳細的信息，例如產品詳情、刪除/添加、稅收和發貨選項等。以下顯示了一個整版購物車頁面，它的右上角同時也包含了一個迷你購物車：
2.
結賬：逐步引導或一頁式用逐步引導的方法使用戶更容易上手。看看Apple.com結帳頁面，結帳程序包含四個步驟：登錄，結算及托運，付款方式和最後確認/修改。
除了循序漸進的引導，另一種方式是把所有的付費、運輸和結算操作放在一個頁面上。
如果設計得合理，這也是一種很好的方式。下面的網站使用了良好的單頁結帳過程：
3.
使用圖標鏈接到詳細頁面迷你購物車上應該有鏈接到詳細頁面的醒目圖標，以引導用戶進入詳細頁面。下面這個網頁雖然是日語的，但它的圖標可以清晰的顯示這是購物車鏈接。4.
使用明顯的結賬/添加按鈕設計電子商務購物車，重要的是要包含明確的信息
，並引導客戶進入結賬程序。最好使用明顯的按鈕，並包含清楚易懂的文字，如「添加到購物車」或「結賬」。
5.
使用清晰整潔的列表設計購物車最好使用列表結構，清晰的現實信息，使用標准字體
，
並盡量避免使用復雜的背景
。6.
「繼續選購」鏈接「繼續購物」鏈接的作用是引導用戶回到商品列表繼續選購，這當然是所有網站都想要的。
7.
避免填寫過多的條目盡量讓用戶填寫最少的表格，用最快的速度完成網上購物過程。
8.
提供充分的幫助信息快速提示和通用提示是網站必不可少的組成部分，尤其是購物網站，你要讓你的客戶沒有任何疑問和疑慮的完成購物過程。關於電子商務網站的提示技巧，請參閱：
正確使用提示文字提升用戶體驗9.
使用視覺輔助使用圖標、箭頭、文字等醒目的視覺輔助元素，引導用戶的視覺流向。以下圖片顯示的一個極方便的單擊並拖動車
。.形象的購物車圖標告訴顧客，他們可以拖動物品到購物車。
10.
包含確認步驟用戶必須有一個步驟來確認是不是買到了正確的貨物，並且有辦法及時取消選擇，然後進入付款結算程序。
⑷ 怎麼製作淘寶購物車鏈接，然後直接復制地址欄，直接到提交訂單的頁面
天貓裝修加入購物車代碼是：
<a class="J_CartPluginTrigger" href="寶貝鏈接" target="_blank">
<img src="http://img01.taobaocdn.com/tps/i1/T1G.1AXXNtXXXXXXXX-90-24.png" />
</a>
我覺得這里講的應該是對的，還沒有測試過，樓主看一下這個鏈接http://..com/question/1689662169335001068.html
⑸ 如何做一個購物車 用Macromedia Dreamweaver 8
僅僅用Macromedia Dreamweaver 8的自帶功能做購物車比較困難。必須要懂點編程的知識。
⑹ 如何用C#做購物車
首先，為每一個客戶生成一個虛擬的購物車，其實就是一個Datatable：
DataTable GoodsCar = new DataTable();
GoodsCar.Columns.Add("Index",typeof(int));//商品序號
下面你還可以加很多的，比如商品名稱，價格，產地等等
然後，在已經存在的商品欄里把所選擇的商品序號加入購物車中，就是往Datatable中增加所選擇的行信息：
DataRow ChoosedGoods = GoodSCar.NewRow();
ChoosedGoods["Index"] = 你已經存在的商品序列號;
最後，選擇完了結帳前，應該有一個綜合顯示已經選擇的商品，就是現實表GoodsCar中的信息：
生成一個Datalist或者DataGrid然後綁定，顯示出來。還可以往裡面加入一點別的功能，比如，刪除已經選擇的物品等等！
這個類似的程序源代碼網上很多的。隨便從網路上搜一下都是一大把啊！
⑺ 淘寶網中的「加入購物車」是如何做的鏈接
可以打開那個量子統計，左邊的頁面有一個實時客戶訪問，在旁邊一點有一個入店來源，
如果買家是加入了購物車的，從購物車進來，那個入店來源就會寫購物車的。
詳情請看下圖：
⑻ 用dreamweaver怎麼製作購物車
製作購物車屬於編寫動態程序，首先要選擇用哪一種程序來製作，比如php，jsp等等；dreamweaver可以利用內置的可視化動態程序製作功能生成程序，不過也要了解動態程序的一些基礎知識，比如安裝網路伺服器以便測試編寫的網頁，安裝資料庫、建立站點等等，如果對動態程序的代碼一點不了解，也不能夠修改出現的錯誤、豐富網頁的功能。
像購物車這樣的程序，僅僅用dreamweaver生成的程序來製作效果會非常簡陋，很不專業，製作功能完善的程序還是需要學習代碼，手寫編程。
⑼ 網頁製作中像電商購物車中的商品數量改變是怎麼做的
這個用javascript實現啊.貌似不難啊