分时显示不同图片和问候语

//根据系统不同时间判断，需要用到日期内置对象

//利用分支语句设置不同图片

//修改img元素的src属性

//需要一个div显示问候语，跟随时间修改元素内容

<!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: 200px;height: 160px;margin-bottom: 10px;}</style>
</head><body><img src="./image/上午.jpg" alt="#"><div>上午好</div><script>var div = document.querySelector('div');var img = document.querySelector('img');var date = new Date();var h = date.getHours();if (h < 10) {img.src = './image/上午.jpg';div.innerHTML = '上午好~';} else if (h < 13) {img.src = './image/中午好.png';div.innerHTML = '中午好~';} else if (h < 18) {img.src = './image/下午好.png';div.innerHTML = '下午好~';} else if (h < 24) {img.src = './image/晚上好.gif';div.innerHTML = '晚上好~';}// alert(h);//检查是否获取到时间</script>
</body></html>

分时显示不同图片和问候语相关推荐

js学习-操作元素案例-分时显示不同图片不同问候语
js学习-操作元素案例-分时显示不同图片不同问候语 // 操作元素案例 // 分时显示不同图片,不同问候语// 上午7-11 中午12-13 下午14-18 晚上18-22![请添加图片描述](htt ...
DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定
分时显示不同的图片以及问候语分析: 根据不同的时间来判断,所以需要获取到系统的时间. 利用分支语言来设置不同的图片需要更换不同的图片,因此需要操作img的元素src 需要一个div来显示不同问候语 ...
分时显示不同图片，显示不同的问候语
[案例] 分时显示不同图片,显示不同的问候语要求: 根据不同的时间,页面显示不同的图片,同时显示不同的问候语. 1:如果是早上时间打开页面,显示上午好,显示上午图片: 2:如果是下午时间打开页面,显 ...
案例1 分时显示不同图片，显示不同的问候语
案例: <div>123</div><img src="" alt="& ...
JavaScript小案例——分时显示不同图片，显示不同问候语
要求: 1.根据不同时间,页面显示不同的问候语. 2.如果上午时间打开画面,显示上午好,显示上午的照片.中午,晚上同理. 分析: 1.根据不同系统不同时间来判断,所有需要用到日期内置对象. 2.利用多 ...
【JavaScript】案例：分时显示不同图片，显示不同问候语
题目: 根据不同时间,页面显示不同图片,同时显示不同的问候语 1.如果是上午时间打开页面显示上午好,显示上午的图片 2.如果是上午时间打开页面显示上午好,显示上午的图片 3.如果是上午时间打开页面显示 ...
分时显示不同图片，显示不同问候语
如果上午时间打开页面,显示上午好,显示上午的图片. 如果下午时间打开页面,显示下午好,显示下午的图片. 如果晚上时间打开页面,显示晚上好,显示晚上的图片. <!DOCTYPE html> ...
分时问候并显示不用图片案例
分时问候并显示不用图片案例 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
Dom——隔行变色、分时显示问候语
隔行显示效果效果如上图所示,当鼠标经过某一行时,该行的背景颜色变深,其余行不变,当鼠标移开,背景颜色恢复.如下图所示. 核心思路设置一个表格,获取事件源表格的每一行,但不能给每一行设置类名再逐一 ...

分时显示不同图片和问候语

分时显示不同图片和问候语相关推荐

最新文章

热门文章