js动态案例1
题目:分时问候案例(分时显示不同图片以及不同的问候语)
<body>
<img src="img/iu.jpg" alt="">
<div>上午好</div>
<script>
//根据系统时间来变化图片和文字
//第一步,获取元素
var img = document.querySelector('img')
var div = document.querySelector('div')
//第二步,得到当前系统时间的小时数
var data = new Date();
var h = data.getHours();
//判断时间周期,确定时间范围的图片和文字
if (h < 12) {
img.src = 'img/iu.jpg'
div.innerHTML = '上午好'
} else if (h < 18) {
img.src = 'img/iu2.jpg'
div.innerHTML = '下午好'
} else {
img.src = 'img/iu7.jpg'
div.innerHTML = '晚上好'
}
</script>
</body>
运行效果:
2、更换背景
点击小盒子中的照片后,背景图片依次变换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 100px;
margin: auto;
margin-top: 50px;
}
img {
width: 80px;
height: 100px;
}
ul li {
list-style: none;
width: 100px;
height: 100px;
float: left;
}
body {
background-image: url('iu2.jpg');
}
</style>
</head>
<body>
<ul class="box">
<li>
<img src="iu2.jpg" alt="">
</li>
<li><img src="iu3.jpg" alt=""></li>
<li>
<img src="iu4.jpg" alt="">
</li>
<li><img src="iu5.jpg" alt=""></li>
</ul>
<script>
//获取元素
var imgs = document.querySelector('.box').querySelectorAll('img')
console.log('imgs')
//使用循环点击 图片更换背景
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
document.body.style.backgrandImage = 'url(' + this.src + ')'
}
}
</script>
</body>
</html>