• 热点推荐:
 首页 / web案例 / 正文
javascript代码实现根据时间变换网页背景颜色或图片效果-js技巧

Time:2021年08月18日 Read:291 评论:1 作者:小天老师

现实时间一天24小时,当前网页背景会根据时间的变化而改变,比如晚上时,网页的背景颜色会变成黑色,下午时,网页的背景颜色会变成红色等。也可以换成自己喜欢的图片。 获取本机时间的构造函数 new Date(); 小时h  = date.getHours,然后通过if....else实现代码如下

原生js实现:

<!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>根据时间自动变换网页背景</title>
    <style>
        body {
            background-color: rgb(126, 126, 126);
        }
        
        div {
            width: 500px;
            height: 100px;
            margin: 100px auto 0;
            font-size: 50px;
            font-weight: 700;
            color: #fff;
        }
    </style>
</head>

<body>
    <div>显示的时间问候</div>

    <script>
        var bodyEle = document.body;
        var date = new Date();

        var h = date.getHours();
        var div = document.querySelector('div');
        console.log(h);
        if (h < 6) {
            bodyEle.style.backgroundColor = 'rgb(126, 126, 126)';
            div.innerText = '都凌晨了,你熬夜了吗';
        } else if (h < 12) {
            bodyEle.style.backgroundColor = 'rgb(194, 141, 92)';
            div.innerText = '上午好';

        } else if (h < 18) {
            bodyEle.style.backgroundColor = 'rgb(255, 123, 0)';
            div.innerText = '下午好';

        } else {
            bodyEle.style.backgroundColor = '#000';
            div.innerText = '晚上好';
        }
    </script>
    
</body>

</html>

版权声明:本文为 “传授PC-资源分享网” 原创文章,转载请附上原文出处链接及本声明;

原文链接:https://pc2356.com/post/61.html

标签: javascript基础 
  • 评论列表
  •  访客
      2021-08-21 05:04:38  回复
  • 学到了自动变换图片

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

排行榜
四种主题风格
广告位 Ad1
关于我们
传授PC资源学习网(www.pc2356.com)个人博客,记录学习前端笔记和日记生活,分享网页源码、软件下载、学习资源等多方面资源网站。
联系我们
意见反馈
举报中心
扫码关注
Copyright@2020-2021 | Powered by©ZBLOG | 传授PC资源分享网 | RSS 订阅 | 站点地图