-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path04_根据时间显示图片问候.html
59 lines (54 loc) · 2.05 KB
/
04_根据时间显示图片问候.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分时显示不同图片 显示不同问候语</title>
<style>
img {
width: 300px;
}
h1 {
font-family: Arial;
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<!--
根据不同时间，页面显示不同图片，同时显示不同的问候语
如果上午时间打开页面，显示上午好，显示上午的图片
如果下午时间打开页面，显示下午好，显示下午的图片
如果晚上时间打开页面，显示晚上好，显示晚上的图片
-->
<!--
根据系统不同时间来判断，所以需要用到日期内置对象
利用多分支语句来设置不同的图片
需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
需要一个div元素，显示不同问候语，修改元素内容即可
-->
<body>
<img src="image/morning.jfif" alt="morning" title="Good Morning"> <br>
<div>
<h1></h1>
</div>
<script>
// 1. 获取事件源
var img = document.querySelector('img');
var heading = document.querySelector('h1');
// 2. 得到当前的小时数
var date = new Date();
var h = date.getHours();
// 3. 判断小时数改变图片和文字信息
if (h < 12) {
img.src = 'image/morning.jfif';
heading.innerHTML = 'Good morning, Jian Wu. Solve some algorithm problems.';
} else if (h < 18) {
img.src = 'image/afternoon.jfif';
heading.innerHTML = 'Good afternoon, Jian Wu. Keep working on the project.';
} else {
img.src = 'image/evening.jfif';
heading.innerText = 'Good evening, Jian Wu. Review the notes for today.';
}
</script>
</body>
</html>