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

本文主要是介绍分时间问候并显示不同的图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

 

        <style>img{width: 200px;height: 100px;}</style>

css样式，很简单。

        <img src="img/shangwu.png" /><div>上午好，要睡觉了！</div>

html代码，也很简单。

       <script>var img = document.querySelector('img'); //获取img和divvar 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修改问候语。

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

这篇关于分时间问候并显示不同的图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---