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

最新推荐文章于 2024-07-08 18:01:35 发布

hellohello777

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量494

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_63680738/article/details/127707992

版权

如果上午时间打开页面，显示上午好，显示上午的图片。

如果下午时间打开页面，显示下午好，显示下午的图片。

如果晚上时间打开页面，显示晚上好，显示晚上的图片。

<!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="5CFFD17D1FC5B0AB0345639A645933A6.png">//图片需要自定义
   <div>早上好！</div>
   <script>
    var img=document.querySelector('img');
    var div=document.querySelector('div');
    var time=new Date();
    var t=time.getHours();
    if(t<12)
    {
      img.src="5CFFD17D1FC5B0AB0345639A645933A6.png";
      div.innerHTML="早上好！";
    }
    else if(t<18)
    {
        img.src="E8177E5308B573C54BEC3052E8132AA5.png";
        div.innerHTML="下午好！";
    }
    else{
        img.src="C7F7AECF36AEDA7928D4691DA575EF6B.png";
        div.innerHTML="晚上好！";
    }
   </script>
</body>
</html>