案例三，点击事件购物车，万年历
一．购物车表单框
例：
Document
table{
width: 800px;
height: 400px;
border: 1px solid black;
}
tr,th{
border: 1px solid black;
}
td{
text-align: center;
border: 1px solid black;
}
}
商品
单价
数量
小计
苹果
¥9987
+1-
¥9987
华为
¥5666
+1-
¥5666
小米
¥100000
+1-
¥100000
合计
¥115563
function an(btn){
var d=btn.parentElement.querySelector('span');
var n=d.innerHTML;
if(btn.innerHTML=='+'){
n++;
}else if(n>1){
n--;
}else{
n=1;
}
d.innerHTML=n;
var he=btn.parentElement.previousElementSibling.innerHTML.slice(1);
var ji=he*n;
btn.parentElement.nextElementSibling.innerHTML='¥'+ji.toFixed(2);
var jia=document.querySelectorAll('tbody tr')
console.log(jia)
var zongjia=document.querySelector('tfoot tr').lastElementChild;
console.log(zongjia)
for(var i=0,j=0;i
j+=parseInt(jia[i].lastElementChild.innerHTML.slice(1));
zongjia.innerHTML='¥'+j;
}
}
二．万年历点击日期背景色变化，下方同时出现内容
例：
Document
*{
margin: 0;
padding: 0;
list-style: none;
}
bo{
}
ul{
width: 440px;
height: 400px;
overflow: hidden;
background: white;
}
ul>li{
width:100px;
height: 100px;
float: left;
text-align: center;
margin-top: 30px;
line-height: 50px;
background: black;
color: white;
margin-left: 10px;
}
ul>li>span{
display: none;
}
.zi p{
width: 400px;
height: 100px;
background: #666;
margin-left: 20px;
}
1
pve
11111111111111
2
pve
11112222221
3
pve
111113333333311
4
pve
11111111444444111
5
pve
11155555551
6
pve
1116666661
7
pve
1177777771111
8
pve
1188888881111
9
pve
11999999991111
10
pve
10101010
11
pve
11111111111111
12
pve
1212121
var li=document.querySelectorAll('.bo>ul>li');
var zi=document.querySelector('.zi>p');
for(var i=0;i
li[i].onclick=function(){
this.style.background='white';
this.firstElementChild.style.color='cyan';
zi.innerHTML=this.lastElementChild.innerHTML;
}
li[i].onmouseout=function(){
this.firstElementChild.style.color='white';
this.style.background='black';
}
}
