分时问候并显示不用图片案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>分时问候并显示不用图片案例</title><style>img {width: 300px;}</style>
</head><body><img src="https://pic.imgdb.cn/item/612102724907e2d39c25f915.jpg" alt="" class="Picture"><div>上午好</div><script>// 根据系统不同时间来判断，所以需要用到日期内置对象// 利用多分支语句来设置不同的图片// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性// 需要一个div元素，显示不同问候语，修改元素内容即可// 1.获取元素//var img = document.querySelector('img');var Picture = document.querySelector('.Picture')var div = document.querySelector('div');// 2. 得到当前的小时数var date = new Date();var h = date.getHours();// 3. 判断小时数改变图片和文字信息if (h < 12) {Picture.src = 'https://pic.imgdb.cn/item/612102724907e2d39c25f915.jpg';div.innerHTML = '亲，上午好，好好写代码';} else if (h < 18) {Picture.src = 'https://pic.imgdb.cn/item/612102574907e2d39c25b5d9.jpg';div.innerHTML = '亲，下午好，好好写代码';} else {Picture.src = 'https://pic.imgdb.cn/item/612102094907e2d39c250f01.jpg';div.innerHTML = '亲，晚上好，好好写代码';}</script>
</body></html>

分时问候并显示不用图片案例相关推荐

JavaScript-150：分时间问候并显示不同图片案例
根据系统不同事件来判断所以需要用到日期内置对象利用多分支语句来设置不同的图片需要一个图片并个根据事件修改图片就需要用到操作元素src属性需要一个div元素显示不同问候语修改元素内容即可 ...
根据不同时间，显示不同图片，显示不同问候语
用Javascript实现分时间问候并显示不同图片正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教实现功能打开一个页面,根据用户目前的时间来判断,并表示问候例如:9点,早上好 ...
js学习-操作元素案例-分时显示不同图片不同问候语
js学习-操作元素案例-分时显示不同图片不同问候语 // 操作元素案例 // 分时显示不同图片,不同问候语// 上午7-11 中午12-13 下午14-18 晚上18-22![请添加图片描述](htt ...
案例1 分时显示不同图片，显示不同的问候语
案例: <div>123</div><img src="" alt="& ...
【JavaScript】案例：分时显示不同图片，显示不同问候语
题目: 根据不同时间,页面显示不同图片,同时显示不同的问候语 1.如果是上午时间打开页面显示上午好,显示上午的图片 2.如果是上午时间打开页面显示上午好,显示上午的图片 3.如果是上午时间打开页面显示 ...
分时显示不同图片，显示不同的问候语
[案例] 分时显示不同图片,显示不同的问候语要求: 根据不同的时间,页面显示不同的图片,同时显示不同的问候语. 1:如果是早上时间打开页面,显示上午好,显示上午图片: 2:如果是下午时间打开页面,显 ...
radio切换控制div显示_JavaScript连载31图片动态切换以及关闭图片案例
一.图标切换 31.1 点击那两个按钮可以做到轮番显示图片二.关闭图片案例 31.2 点击右上角的叉,图片会消失. 三.源码: D31_iconSwitch.html D31_2_CloseImag ...
VS2003 下GridControl的列显示成图片+文字的形式实现
public RC_CustomerSolicitListUC(){// 该调用是 Windows.Forms 窗体设计器所必需的. InitializeComponent();// TODO: 在 ...
JavaScript——分时问候
源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

分时问候并显示不用图片案例

分时问候并显示不用图片案例相关推荐

最新文章

热门文章