根据不同时间，显示不同图片，显示不同问候语

最新推荐文章于 2023-09-25 11:09:20 发布

茂茂睡不醒

最新推荐文章于 2023-09-25 11:09:20 发布

阅读量3.8k

点赞数 6

分类专栏： JS 文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_44029226/article/details/113178334

版权

JS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

用Javascript实现分时间问候并显示不同图片

正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教
实现功能打开一个页面，根据用户目前的时间来判断，并表示问候
例如：9点，早上好，并显示早上的图片
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$Title$</title>
  <style>
    img{
      width: 300px;
    }
  </style>
</head>
<body>
<img src="../99_images/1.png" alt="">
<div>上午好</div>
<script>
  var img=document.querySelector('img')
  var div=document.querySelector('div')
  var date=new Date()
  var h=date.getHours()
  //判断小时数改变文字图片信息
  if (h<12){
    img.src='../99_images/1.png'
    div.innerHTML='上午'
  }else if (h<18){
    img.src='../99_images/2.png'
    div.innerHTML='下午'
  }else{
    img.src='../99_images/3.png'
    div.innerHTML='晚上'
  }
</script>
</body>
</html>

这里调用了一个new Date（）的方法，获取用户目前的时间
显示效果如下
现在是上午

在这里插入图片描述
下午

在这里插入图片描述
晚上

这就是一个简单的案例

别喷我，写的不好就劳烦指点一二，觉得有帮助就留下个大拇指点个关注再走哈哈哈！

茂茂睡不醒

关注

6
点赞
踩
34

收藏

觉得还不错? 一键收藏
打赏
5
评论
根据不同时间，显示不同图片，显示不同问候语

用Javascript实现分时间问候并显示不同图片正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教实现功能打开一个页面，根据用户目前的时间来判断，并表示问候例如：9点，早上好，并显示早上的图片代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$Title$</title> <style>
复制链接

扫一扫