js代碼實作購物車原理
// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
i {font-style: normal;}
ul li{list-style: none;}
</style>
</head>
<body>
<ul>
<li>
<div>
<button>-</button> <span>0</span> <button>+</button> <i>單價：<span>12.5</span> 元</i> <i>小計：<span>0</span> 元</i>
</div>
</li>
<li>
<div>
<button>-</button> <span>0</span> <button>+</button> <i>單價：<span>18.5</span> 元</i> <i>小計：<span>0</span> 元</i>
</div>
</li>
<li>
<div>
<button>-</button> <span>0</span> <button>+</button> <i>單價：<span>2.5</span> 元</i> <i>小計：<span>0</span> 元</i>
</div>
</li>
<li>
<div>
<button>-</button> <span>0</span> <button>+</button> <i>單價：<span>9</span> 元</i> <i>小計：<span>0</span> 元</i>
</div>
</li>
</ul>
<script>
var oli=document.getElementsByTagName('li');
for(i=0;i<oli.length;i++){
shopcar(i);
}
function shopcar(index){
var odiv=oli[index].getElementsByTagName('div');
var jbutton=odiv[0].getElementsByTagName('button')[0];
var abutton=odiv[0].getElementsByTagName('button')[1];
var numspan=odiv[0].getElementsByTagName('span')[0];
var prispan=odiv[0].getElementsByTagName('span')[1];
var monspan=odiv[0].getElementsByTagName('span')[2];
numspan.innerHTML=0;
monspan.innerHTML= numspan.innerHTML*prispan.innerHTML;
//減
jbutton.onclick=function(){
numspan.innerHTML--;
if(numspan.innerHTML<0){
numspan.innerHTML=0;
}
monspan.innerHTML= numspan.innerHTML*prispan.innerHTML;
}
//加
abutton.onclick=function(){
numspan.innerHTML++;
monspan.innerHTML= numspan.innerHTML*prispan.innerHTML;
}
}
</script>
</body>
</html>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)