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.導(dǎo)航條
<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="#">聯(lián)系我們</a>
</li>
<li>
<a href="#">涉及分類</a>
</li>
<li>
<a href="#">綜合設(shè)計(jì)</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.購(gòu)物車
tr表示行
td表示列 th可以加粗顯示
<table border="1" cellspacing="0" width="500">
<thead>
<tr>
<th>商品名稱</th>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>小計(jì)</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">總計(jì)</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èi)容保存在變量n中
var n=parseInt(span.innerHTML);
console.log(typeof(n));
//如果btn的內(nèi)容是"+",就讓n+1否則如果n>1,就n--,否則n=1
if(btn.innerHTML=="+"){
n++;
}else if(n>1){
n--
}else{
n=1
}
設(shè)置span的內(nèi)容為n
span.innerHTML=n;
第二步讓每行的小計(jì)變化
找到btn的父元素的前一個(gè)兄弟元素的內(nèi)容
并截取出數(shù)字保存在變量price中
var price=btn.parentElement
.previousElementSibling
.innerHTML
.slice(1);
//聲明subtotal表示小計(jì)，subtotal=price*n
var subtotal=price*n;
//找到btn的父元素的下一個(gè)兄弟元素并設(shè)置
// 內(nèi)容為"¥"+subtotal.toFixed(2)
btn.parentElement
.nextElementSibling
.innerHTML="¥"+subtotal
.toFixed(2);
計(jì)算總價(jià)
獲取tbody中每行最后一個(gè)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>
