<style>
img{
width: 200px;
height: 100px;
}
</style>
css样式,很简单。
<img src="img/shangwu.png" />
<div>上午好,要睡觉了!</div>
html代码,也很简单。
<script>
var img = document.querySelector('img'); //获取img和div
var div = document.querySelector('div');
var date = new Date(); //创建一个对象
var h = date.getHours();
if(h<12){
img.src = "img/shangwu.png"; 根据时间修改图片和问候语
div.innerHTML = '上午好,要睡觉了!';
}else if(h<18){
img.src = "img/zhongwu.png";
div.innerHTML = '中午好,要睡觉了!';
}else{
img.src = "img/wanshangwu.png";
div.innerHTML = '晚上好,要睡觉了';
}
</script>
利用document.querySelector获取img和div
创建一个对象 ,把这个对象存入h中
利用if语句判断相对应的时间
然后img(图片名)+src(图片路径)修改图片
div.innerHTML修改问候语。
注:以上仅属于个人理解,用于学习。