JS：个人完善和美化后的购物车，CSS 设置字体大小【诗书画唱】
<!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(){
//获取所有的复选框
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();
}
}
}
}
//增加数量封装为了方法
// zengJiaSpNum:增加商品数量
function zengJiaSpNum(){
//获取到加号这个位置
for(var i=1;i<trShuZu.length;i++){
//已经获取到每个tr了
//获取加号
var inputs=trShuZu[i].children[4].children;
inputs[2].onclick=function(){
//获取数量的位置、
var neirong=this.previousElementSibling;
//让数量+1
neirong.value=Number(neirong.value)+1;
//获取单价
var danjia=this.parentElement.previousElementSibling.innerHTML;
//获取总价
var zongjia=this.parentElement.nextElementSibling;
//总价的内容等于单价乘以数量
zongjia.innerHTML=Number(danjia)*Number(this.previousElementSibling.value);
jiSuanFangFa();
}
//减号
inputs[0].onclick=function(){
// alert("11");
if(Number(this.nextElementSibling.value)>1){
//获取数量的位置、
var neirong=this.nextElementSibling;
//让数量+1
neirong.value=Number(neirong.value)-1;
//获取单价
var danjia=this.parentElement.previousElementSibling.innerHTML;
//获取总价
var zongjia=this.parentElement.nextElementSibling;
//总价的内容等于单价乘以数量
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);
//得到单个数量
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>商品数量（件）</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">
总数量:<span>0</span>件
总价格：<span>0</span>元
</p>
</body>
</html>
