作业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>
作业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')
//生成随机背景色的正方形块
//产生1到255的随机整数
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'
//统计子元素的个数
count = contentNode.children.length
//当方块铺满容器时自动停止
if(count >= 400){
clearInterval(t1)
return false // 数量大于等于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]
//添加背景色
//产生1到255的随机整数
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>
