JS：個人完善和美化后的購物車，CSS 設(shè)置字體大小【詩書畫唱】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.li1{
background-color: red;
}
span{color: red;font-size:50px;}
input{
background-color: red;
color: white;
font-size:25px;
border: none;
border-radius: 40%;
text-align: center;
}
body{background-color: orangered;}
table {
width: 1000px;
height: 400px;
margin: 0px auto;
text-align: center;
/*border-top: solid 1px blue;
border-left: solid 1px blue;*/
background-color: yellow;
border-radius: 90%;
}
td {
/*border-bottom: 1px solid blue;
border-right: 1px solid blue;*/
color: cyan;
font-size:25px ;
border-radius: 90%;
background-color: #0000FF;
}
th {
/*border-bottom: 1px solid blue;
border-right: 1px solid blue;*/
color: blue;
border-radius: 90%;
background-color:orange;
}
p{
background-color: orange;
border-radius: 90%;
}
</style>
<script>
window.onload=function(){
//獲取所有的復(fù)選框
window.xuanOneShuZu=document.getElementsByClassName("xuanOne");
window.trShuZu=document.getElementsByTagName("tr");
window.spanShuZu=document.getElementsByTagName("span");
//遍歷ck，判斷點擊的時候是全選
zengJiaSpNum();
for(var i of xuanOneShuZu){
if(i.className=="xuanOne xuanAll"){
i.onclick=function(){
//點擊的時候遍歷所有的ck，讓每個ck的樣式等于點擊的樣式
for(var j of xuanOneShuZu){
j.checked=this.checked;
}
jiSuanFangFa();
}
}else{
i.onclick=function(){
//判斷所有的ck是否都選中，如果都選中的時候
//就給全選加上選中
// panDuan:判斷
var panDuan=true;
for(var i=1;i<xuanOneShuZu.length;i++){
if(!xuanOneShuZu[i].checked){
panDuan=false;
}
}
if(panDuan){
xuanOneShuZu[0].checked="checked";
}else{
xuanOneShuZu[0].checked="";
}
jiSuanFangFa();
}
}
}
}
//增加數(shù)量封裝為了方法
// zengJiaSpNum:增加商品數(shù)量
function zengJiaSpNum(){
//獲取到加號這個位置
for(var i=1;i<trShuZu.length;i++){
//已經(jīng)獲取到每個tr了
//獲取加號
var inputs=trShuZu[i].children[4].children;
inputs[2].onclick=function(){
//獲取數(shù)量的位置、
var neirong=this.previousElementSibling;
//讓數(shù)量+1
neirong.value=Number(neirong.value)+1;
//獲取單價
var danjia=this.parentElement.previousElementSibling.innerHTML;
//獲取總價
var zongjia=this.parentElement.nextElementSibling;
//總價的內(nèi)容等于單價乘以數(shù)量
zongjia.innerHTML=Number(danjia)*Number(this.previousElementSibling.value);
jiSuanFangFa();
}
//減號
inputs[0].onclick=function(){
// alert("11");
if(Number(this.nextElementSibling.value)>1){
//獲取數(shù)量的位置、
var neirong=this.nextElementSibling;
//讓數(shù)量+1
neirong.value=Number(neirong.value)-1;
//獲取單價
var danjia=this.parentElement.previousElementSibling.innerHTML;
//獲取總價
var zongjia=this.parentElement.nextElementSibling;
//總價的內(nèi)容等于單價乘以數(shù)量
zongjia.innerHTML=Number(danjia)*Number(this.nextElementSibling.value);
jiSuanFangFa();
}
}
}
}
//封裝一個點擊選中的方法
function jiSuanFangFa(){
var zongjiage=0,zongshuliang=0;
for(var i=1;i<xuanOneShuZu.length;i++){
//判斷是否選中
if(xuanOneShuZu[i].checked){
//得到單個商品的總價格
//console.log(xuanOneShuZu[i].parentElement);
var dangezongjiage=xuanOneShuZu[i].parentElement.parentElement.children[5].innerHTML;
zongjiage+=Number(dangezongjiage);
//得到單個數(shù)量
var dangeshuliang=xuanOneShuZu[i].parentElement.parentElement.children[4].children[1].value;
zongshuliang+=Number(dangeshuliang);
}
}
spanShuZu[0].innerHTML=zongshuliang;
spanShuZu[1].innerHTML=zongjiage;
}
</script>
</head>
<body>
<table align="center">
<tr>
<th><input type="checkbox" class="xuanOne xuanAll">全選</th>
<th>商品名稱</th>
<th>商品圖片</th>
<th>商品價格(元/件)</th>
<th>商品數(shù)量（件）</th>
<th>商品總價（元）</th>
</tr>
<tr>
<td><input type="checkbox" class="xuanOne"></td>
<td>海報A</td>
<td><img src="img/1.png" width="50px" height="50px"></td>
<td>2</td>
<td>
<input type="button" value="-" />
<input type="text" value="1" disabled="disabled" />
<input type="button" value="+" />
</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" class="xuanOne"></td>
<td>海報B</td>
<td><img src="img/2.png" width="50px" height="50px"></td>
<td>3</td>
<td>
<input type="button" value="-" />
<input type="text" value="1" disabled="disabled" />
<input type="button" value="+" />
</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" class="xuanOne"></td>
<td>海報C</td>
<td><img src="img/3.png" width="50px" height="50px"></td>
<td>3</td>
<td>
<input type="button" value="-" />
<input type="text" value="1" disabled="disabled" />
<input type="button" value="+" />
</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" class="xuanOne"></td>
<td>海報D</td>
<td><img src="img/4.png" width="50px" height="50px"></td>
<td>6</td>
<td>
<input type="button" value="-" />
<input type="text" value="1" disabled="disabled" />
<input type="button" value="+" />
</td>
<td>6</td>
</tr>
<tr>
<td><input type="checkbox" class="xuanOne"></td>
<td>海報D</td>
<td><img src="img/4.png" width="50px" height="50px"></td>
<td>6</td>
<td>
<input type="button" value="-" />
<input type="text" value="1" disabled="disabled" />
<input type="button" value="+" />
</td>
<td>6</td>
</tr>
</table>
<p align="center">
總數(shù)量:<span>0</span>件
總價格：<span>0</span>元
</p>
</body>
</html>
