js day14 案例01
2018-07-21 本文已影响0人
追逐喆
1.改变body的背景颜色
<body id='body'>
<div id='container'>
<h1>鹅</h1>
<p>鹅,鹅,鹅,</p>
<p>取勃用刀割</p>
<p>拔毛烧开水</p>
<p>铁锅炖大鹅</p>
</div>
<script type="text/javascript">
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';
}
</script>
</body>
2.导航条
<style type="text/css">
*{
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;
}
</style>
<body>
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">公司介绍</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
<li>
<a href="#">涉及分类</a>
</li>
<li>
<a href="#">综合设计</a>
</li>
</ul>
<script type="text/javascript">
var li=document.querySelectorAll('ul>li');
console.log(li);
for(var i=0;i<li.length;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';
}
}
</script>
</body>
3.购物车
tr表示行
td表示列 th可以加粗显示
<table border="1" cellspacing="0" width="500">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>iphone</td>
<td>¥5999</td>
<td>
<button onclick="calc(this)">+</button>
<span>1</span>
<button onclick="calc(this)">-</button>
</td>
<td>¥5999</td>
</tr>
<tr>
<td>iphone</td>
<td>¥5999</td>
<td>
<button onclick="calc(this)">+</button>
<span>1</span>
<button onclick="calc(this)">-</button>
</td>
<td>¥5999</td>
</tr>
<tr>
<td>iphone</td>
<td>¥5999</td>
<td>
<button onclick="calc(this)">+</button>
<span>1</span>
<button onclick="calc(this)">-</button>
</td>
<td>¥5999</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
<td>¥17997</td>
</tr>
</tfoot>
</table>
<script>
跨列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<tds.length;i++){
total+=parseFloat(tds[i].innerHTML.slice(1));
}
document.querySelector('tfoot>tr>td:last-child').innerHTML='¥'+total.toFixed(2);
}
</script>
</body>
