1.改变body的背景颜色
鹅
鹅,鹅,鹅,
取勃用刀割
拔毛烧开水
铁锅炖大鹅
var container=document.getElementById('container');
container.onmouseover=function(){
body.style.backgroundColor='#f00';
body.style.color='#0f0';
}
container.onmouseout=function(){
body.style.backgroundColor='#ff0';
body.style.color='#f00';
}
2.导航条
*{
margin:0;
padding:0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
ul{
width:500px;
margin:0 auto;
height:40px;
line-height: 40px;
background: #e4393c;
}
ul>li{
float:left;
}
ul>li>a{
display: inline-block;
width:100px;
text-align: center;
color:#fff;
}
var li=document.querySelectorAll('ul>li');
console.log(li);
for(var i=0;i
li[i].onmouseover=function(){
this.style.background='#fff';
this.firstElementChild.style.color='red';
}
li[i].onmouseout=function(){
this.style.background='#e4393c';
this.firstElementChild.style.color='#fff';
}
}
3.购物车
tr表示行
td表示列 th可以加粗显示
商品名称 | 单价 | 数量 | 小计 |
---|---|---|---|
iphone | ¥5999 |
1
|
¥5999 |
iphone | ¥5999 |
1
|
¥5999 |
iphone | ¥5999 |
1
|
¥5999 |
总计 | ¥17997 |
跨列colspan
跨行rowspan
function calc(btn){
//让n加1或减1通过btn的父元素找到span元素
var span=btn.parentElement
.querySelector("span");
//保存在变量span中获取span的内容保存在变量n中
var n=parseInt(span.innerHTML);
console.log(typeof(n));
//如果btn的内容是"+",就让n+1否则如果n>1,就n--,否则n=1
if(btn.innerHTML=="+"){
n++;
}else if(n>1){
n--
}else{
n=1
}
设置span的内容为n
span.innerHTML=n;
第二步让每行的小计变化
找到btn的父元素的前一个兄弟元素的内容
并截取出数字保存在变量price中
var price=btn.parentElement
.previousElementSibling
.innerHTML
.slice(1);
//声明subtotal表示小计,subtotal=price*n
var subtotal=price*n;
//找到btn的父元素的下一个兄弟元素并设置
// 内容为"¥"+subtotal.toFixed(2)
btn.parentElement
.nextElementSibling
.innerHTML="¥"+subtotal
.toFixed(2);
计算总价
获取tbody中每行最后一个td保存在tds中
var tds=document.querySelectorAll('tbody>tr>td:last-child');
console.log(tds);
for(var i=0,total=0;i total+=parseFloat(tds[i].innerHTML.slice(1)); } document.querySelector('tfoot>tr>td:last-child').innerHTML='¥'+total.toFixed(2); }