分时间问候并显示不同的图片

 

 

        <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修改问候语。

注：以上仅属于个人理解，用于学习。