根据不同时间显示不同的图片（JS）

功能：分时间显示不同的图片

早上显示上午好，显示上午的图片 6-10

中午显示中午好，显示中午的图片 10-14

下午 14-20

晚上 20-6

<!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></head><body><img src="" alt=""><script>var img = document.querySelector('img');var timer = new Date();var h = timer.getHours(); // 获取当前小时if (6 < h && h <= 10) {img.src = 'images/早上好.png'} else if (10 < h && h <= 14) {img.src = 'images/中午好.jpg'} else if (14 < h && h <= 20) {img.src = 'images/下午好.png'} else {img.src = 'images/晚上好.png'}</script>
</body></html>

注意：时间范围一定是写成6 < h && h <= 10 ，别跟我一样粗心写成 6 < h <= 10啦

运行效果：（当前时间是20:43）

根据不同时间显示不同的图片（JS）相关推荐

js html模板生成图片不显示,网页中图片不显示问题
问题描述网页展示时,图片不显示.其实图片已经上传到服务器,通过ftp也能够下载图片问题出现的环境背景及自己尝试过哪些方法相关代码 // 请把代码文本粘贴到下方(请勿用图片代替代码) 界面的代码如 ...
js获取当前时间显示在页面上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
用JS做一个简易的时间显示动态效果
用JS做一个简易的时间显示动态效果运行效果代码 <!DOCTYPE html> <html lang="en"><head><meta ...
Moment.js插件学习:制作一个时间显示小案例
插件地址:http://momentjs.cn/ Moment.js是一个原生JavaScript 日期处理类库,使用起来也非常简单.但是注意它所得到的结果都是一个字符串,并且可以改变时间显示的格式. ...
操作元素实例-时间戳：根据不同时间显示不同图片极其文字
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
js判断时间是早上还是下午_JS获取时间显示上午，下午 | 学步园
时间显示站长学院 www.pigzz.com var timerID = null; var timerRunning = false; function stopclock (){ if(tim ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
c android显示gif动画,MFC显示GIF动画图片
本帖则将讨论如何在MFC的对话框里显示GIF动画图片.一些关于传统控件的美化方法正在研究当中会陆续发帖的. 这是本帖用到的一个VS2008例程. 附件 GifPicture.rar (138.1 K ...
EasyPlayer播放H.265视频，播放器快照时间显示的问题优化
我们的EasyPlayer流媒体播放器可支持H.264与H.265,能支持RTSP.RTMP.HLS.FLV.WebRTC等格式的视频流播放.TSINGSEE的视频平台均集成了EasyPlayer的播 ...

根据不同时间显示不同的图片（JS）

根据不同时间显示不同的图片（JS）相关推荐

最新文章

热门文章