<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<img src="https://img0.baidu.com/it/u=2425217669,701039194&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500" alt="">
<div>上午好</div>
<script>
//根据系统不同时间来判断,所以需要用到日期内置对象
// 利用多分支语句来设置不同的图片
// 需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性
//需要一个div元素,显示不用问候语,修改元素内容即可
//1.获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
//2.得到当前的小时数
var date = new Date();
var h = date.getHours();
//3.判断小时数改变图片和文字信息
if(h<12){
img.src = "https://img0.baidu.com/it/u=2425217669,701039194&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500";
div.innerHTML = '上午好!好好写代码';
}
else if(h<18){
img.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fd0c8a786c9177f3e2263a3ac7dcf3bc79f3d563f.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649392911&t=ac6fb3ab6d9015dbe496315e936af0bd";
div.innerHTML = '下午好!好好写代码'
}
else{
img.src = "https://img0.baidu.com/it/u=856207980,3964570221&fm=26&fmt=auto";
div.innerHTML = "晚上好!好好写代码"
}
</script>
</body>
</html>
07-26
11-02
523