作業(yè)1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#img1,#img2,#img3{
display: inline-block;
}
</style>
</head>
<body>
<img src="img/picture-1.jpg" id="bgimg"/>
<br />
<img src="img/thumb-1.jpg" id="img1" onmouseover="turn1()"/>
<img src="img/thumb-2.jpg" id="img2" onmouseover="turn2()"/>
<img src="img/thumb-3.jpg" id="img3" onmouseover="turn3()"/>
</body>
</html>
<script type="text/javascript">
//獲取圖片的id
bgNode = document.getElementById('bgimg')
//第一個圖片切換
function turn1(){
img1Node = document.getElementById('img1')
img1Node.onmouseover = function(){
bgNode.src='img/picture-1.jpg'
//alert('11111111111111111')
}
}
//第二個圖片切換
function turn2(){
img2Node = document.getElementById('img2')
img2Node.onmouseover = function(){
bgNode.src='img/picture-2.jpg'
}
}
//第三個圖片切換
function turn3(){
img3Node = document.getElementById('img3')
img3Node.onmouseover = function(){
bgNode.src='img/picture-3.jpg'
}
}
</script>
作業(yè)2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#content{
width: 800px;
height: 800px;
margin: auto;
border: 1px solid lightgray;
font-size: 0;
}
#menu{
width: 800px;
margin: auto;
margin-top: 10px;
text-align: center;
}
button{
background-color: orange;
color: white;
border: none;
margin-left:10px;
width: 80px;
}
button:focus{
outline: none;
}
#stop{
margin-left:10px;
}
</style>
</head>
<body>
<div id="content">
</div>
<div id="menu">
<button id="start" onclick="start()">開始</button><button id="stop" onclick="stop()">閃爍</button>
</div>
</body>
</html>
<script type="text/javascript">
//======================開始=========================
var t1,t2
//獲取容器的id
contentNode = document.getElementById('content')
//開始按鈕事件
function start(){
t1 = setInterval(function(){
new_square = document.createElement('div')
//生成隨機背景色的正方形塊
//產(chǎn)生1到255的隨機整數(shù)
red = parseInt(Math.random()*255)
green = parseInt(Math.random()*255)
blue = parseInt(Math.random()*255)
//添加背景色
new_square.style.backgroundColor = 'rgb('+red+','+green+','+blue+')'
//設置小正方塊的大小
new_square.style.width = 40+'px'
new_square.style.height = 40+'px'
new_square.style.display = 'inline-block'
new_square.style.border='none'
//統(tǒng)計子元素的個數(shù)
count = contentNode.children.length
//當方塊鋪滿容器時自動停止
if(count >= 400){
clearInterval(t1)
return false // 數(shù)量大于等于400就終止
}
contentNode.appendChild(new_square)
},10)
}
//======================閃爍=========================
function stop(){
clearInterval(t1) // 停止自動加載方塊
stopNode = document.getElementById('stop')
if(stopNode.innerText == '閃爍'){
stopNode.innerText = '暫停'
t2 = setInterval(function(){
for(x=0;x<=contentNode.children.length;x++){
each = contentNode.children[x]
//添加背景色
//產(chǎn)生1到255的隨機整數(shù)
red = parseInt(Math.random()*255)
green = parseInt(Math.random()*255)
blue = parseInt(Math.random()*255)
each.style.backgroundColor = 'rgb('+red+','+green+','+blue+')'
}
},10)
}else{
stopNode.innerText = '閃爍'
clearInterval(t2)
}
}
</script>
