求html购物车代码，，效果如图显示_随笔

<head>

body{

font-size:13px

line-height:25px

}

table{

border-top: 1px solid #333

border-left: 1px solid #333

width:400px

}

td{

border-right: 1px solid #333

border-bottom: 1px solid #333

text-align:center

}

.title{

font-weight:bold

background-color: #cccccc

}

input text{

width:100px

}

</style>

function addRow(){

//行的长度

var rowlength=document.getElementById("order").rows.length

//得到整个表格对象

var order = document.getElementById("order").insertRow(rowlength-1)

order.id=rowlength-1

//插入列

var cel1=order.insertCell(0).innerHTML="游戏光盘"

var cel2=order.insertCell(1).innerHTML="34"

var cel3=order.insertCell(2).innerHTML="&yen58.40"

var cel4=order.insertCell(3).innerHTML="<input type=\"button\"value=\"删除\" onclick=\"delRow('"+(rowlength-1)+"')\"/>"+ "<input type=\"button\"value=\"修改\" onclick=\"editRow('"+(rowlength-1)+"')\"/>"

}

function delRow(qwe){

var ewq=document.getElementById(qwe).rowIndex

document.getElementById("order").deleteRow(ewq)

}

function editRow(rowID){

var row=document.getElementById(rowID)

var cel=row.cells

var text=cel[1].innerHTML

cel[1].innerHTML="<input type='text' value='"+text+"' style='width:40px'>"

cel[3].lastChild.value="确定"

cel[3].lastChild.setAttribute("onclick","update('"+rowID+"')")

}

function update(qwe){

var row=document.getElementById(qwe)

var cel=row.cells

var text=cel[1].lastChild.value

cel[1].innerHTML=text

cel[3].lastChild.value="修改"

cel[3].lastChild.setAttribute("onclick","editRow('"+qwe+"')")

}

function add(){

var a = document.getElementById("order").rows.length

var b = document.getElementById("order").insertRow(a-1)

var one1 = b.insertCell(0).innerHTML="123"

}

</script>

</head>

<body>

</tr>

<td>防滑真皮休闲鞋</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

这个是我原来上学的时候练习的代码，练习的是基础的jsDOM *** 作，不过建议以后用Jquery 比较方便有什么不懂得可以问我

相应的，大量的购物网站也随之出现。如何设计兼顾美观与可用性的网站购物车，是一门非常有研究价值的问题。本文为读者介绍了10个优秀购物车的设计技巧，并为读者推荐了一些国外的优秀购物车设计欣赏。1. 整版车和迷你车购物车通常有两种形式，整版页面的购物车和作为网页组件的迷你购物车。建议两种形式同时包括。迷你购物车不影响购物车以外的布局，只显示购物的列表及简要信息，并且有一个醒目的链接指向整版购物车页面，下面是一个很好的例子：相反的，整版购物车页面可以提供更详细的信息，例如产品详情、删除/添加、税收和发货选项等。以下显示了一个整版购物车页面，它的右上角同时也包含了一个迷你购物车： 2. 结账：逐步引导或一页式用逐步引导的方法使用户更容易上手。看看Apple.com结帐页面，结帐程序包含四个步骤：登录，结算及托运，付款方式和最后确认/修改。除了循序渐进的引导，另一种方式是把所有的付费、运输和结算 *** 作放在一个页面上。如果设计得合理，这也是一种很好的方式。下面的网站使用了良好的单页结帐过程：3. 使用图标链接到详细页面迷你购物车上应该有链接到详细页面的醒目图标，以引导用户进入详细页面。下面这个网页虽然是日语的，但它的图标可以清晰的显示这是购物车链接。4. 使用明显的结账/添加按钮设计电子商务购物车，重要的是要包含明确的信息，并引导客户进入结账程序。最好使用明显的按钮，并包含清楚易懂的文字，如“添加到购物车”或“结账”。5. 使用清晰整洁的列表设计购物车最好使用列表结构，清晰的现实信息，使用标准字体，并尽量避免使用复杂的背景。6. “继续选购”链接“继续购物”链接的作用是引导用户回到商品列表继续选购，这当然是所有网站都想要的。 7. 避免填写过多的条目尽量让用户填写最少的表格，用最快的速度完成网上购物过程。 8. 提供充分的帮助信息快速提示和通用提示是网站必不可少的组成部分，尤其是购物网站，你要让你的客户没有任何疑问和疑虑的完成购物过程。关于电子商务网站的提示技巧，请参阅：正确使用提示文字提升用户体验9. 使用视觉辅助使用图标、箭头、文字等醒目的视觉辅助元素，引导用户的视觉流向。以下图片显示的一个极方便的单击并拖动车。.形象的购物车图标告诉顾客，他们可以拖动物品到购物车。 10. 包含确认步骤用户必须有一个步骤来确认是不是买到了正确的货物，并且有办法及时取消选择，然后进入付款结算程序。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

<div>移入收藏夹</div>

</div>

<div>

</div>

</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()

}

})

}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7292747.html

求html购物车代码，，效果如图显示

发表评论

评论列表（0条）