一．購物車表單框
例：
????
????Document
????table{
????????width: 800px;
????????height: 400px;
????????border: 1px solid black;
????}
????tr,th{
????????border: 1px solid black;
????}
????td{
???????text-align: center;
????????border: 1px solid black;
????}
????}
????
商品
單價(jià)
數(shù)量
小計(jì)
蘋果
????????????￥9987
????????????+1-
????????????￥9987
華為
????????????￥5666
????????????+1-
????????????￥5666
小米
????????????￥100000
????????????+1-
????????????￥100000
合計(jì)
????????????￥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;
????????????}
????????}
二．萬年歷點(diǎn)擊日期背景色變化，下方同時(shí)出現(xiàn)內(nèi)容
例：
????
????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';
????????}
????????}
