admin 管理员组

文章数量: 1087709

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

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

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

        //修改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>

本文标签： 分时显示不同图片和问候语

版权声明：本文标题：分时显示不同图片和问候语 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1694428316a251930.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。