• 圈子
  • 供求
  • 商城
  • 网址导航
  • 快讯
  • 文档
  • 公告
  • 问答
文章
文章用户商铺圈子网址导航

{{userData.name}}已认证

文章

评论

关注

粉丝

¥{{role.user_data.money}}
{{role.user_data.credit}}
您已完成今天任务的
  • 私信列表所有往来私信

  • 财富管理余额、积分管理

  • 推广中心推广有奖励

    NEW
  • 任务中心每日任务

    NEW
  • 成为会员购买付费会员

  • 认证服务申请认证

    NEW
  • 小黑屋关进小黑屋的人

    NEW
  • 我的订单查看我的订单

  • 我的设置编辑个人资料

  • 进入后台管理

  • 网站专区
    • WordPress
      • WP主题WP主题
      • WP美化WP美化
      • WP插件WP插件
      • WP技术WP技术
    • 网站源码
  • 宝塔面板
  • 7b2
写文章

WordPress-B2主题美化之根据时间自动切换网站背景颜色/图片

  • 7b2 特效
  • 22年6月6日
  • 编辑
小狐狸 凌云小狐狸
释放双眼,带上耳机,听听看~!

WordPress-B2主题美化之根据时间自动切换网站背景颜色/图片


顾名思义,根据设定时间,7b2网站会显示不同的颜色或背景图片,目前使用的是黑夜模式,故未测试该功能,详细的演示效果及代码如下

1.黑夜模式图片

白天的图片大家应该都有,分享一个夜晚的图片

2.背景图片/颜色自动切换代码

适用于所有WordPress网站,通过 Date 对象的 getHours() 方法自动获得当前时间,然后自动根据不同的时间段来自动改变页面的背景颜色,当然也可以实现自动更改背景图片等操作,感兴趣的可以自行研究。建议直接将下面的代码放在页脚文件footer.php里面。

<!-- 背景图片自动切换,教程https://www.xiaohulizyw.com/2197.html -->
<script type="text/javascript">
function changeBg(){
  var date = new Date(),
  time = date.getHours();
  if(time > 6 && time < 18){
      document.body.style.backgroundColor="#fff222";}
  else{
      document.body.style.backgroundColor="#000";}
}
changeBg();
</script>
<!-- 背景图片自动切换,教程https://www.xiaohulizyw.com/2197.html -->

 

上面代码中time > 6 && time < 18为时间,指的是早上6点到晚上6点之间,可以自行修改时间。

#fff222和#000为颜色代码,可以自行改修颜色。

如果想换成图片的话就把上面的

document.body.style.backgroundColor="#fff222";
document.body.style.backgroundColor="#000";

 

替换成为

document.body.style.backgroundImage="url('背景图片地址https://www.xiaohulizyw.com/2197.html')";

相关美化请点击文末标签阅读!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
7b2WordPress
7b2

修改7b2认证图标

2022-6-5 14:03:41

特效

WordPress网站下雪特效

2022-6-9 1:11:41

1 条回复 A文章作者 M管理员

您必须登录或注册以后才能发表评论

  1. 奇它论坛 Guest
    22年6月12日

    https://www.qitabbs.com/19696.html

关于作者

小狐狸 凌云

博导lv7

文章

456

评论

6

关注

0

粉丝

11
[文章] 凉拌红油
[文章] 川味卤水
[文章] 蒜蓉配方
[文章] 孜然撒料
Ta的全部动态

文章聚合

  • 1

    响应式华丽摄影小清新HTML5模版

    22年4月28日
  • 2

    html弹窗公告

    22年5月22日
  • 3

    7b2自定义 暂无相关结果 图标

    22年4月7日
  • 4

    手术吸脂40斤要多少钱

    22年4月2日
  • 5

    7b2会员等级美化与自定义标识

    22年3月20日
  • 6

    少儿肥胖最佳减肥方法

    22年3月29日

最新评论

PREVNEXT
  • 来自:
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服
  • 扫码打开当前页

返回顶部
幸运之星正在降临...
点击领取今天的签到奖励!
恭喜!您今天获得了{{mission.data.mission.credit}}积分

今日签到

连续签到

  • {{item.credit}}
  • 连续{{item.count}}天
查看所有
我的优惠劵
  • ¥优惠劵
    使用时效:无法使用
    使用时效:

    之前

    使用时效:永久有效
    优惠劵ID:
    ×
    限制以下商品使用: 限制以下商品分类使用: 不限制使用:
    [{{ct.name}}]
    所有商品和商品类型均可使用
没有优惠劵可用!

购物车
  • ×
    删除
购物车空空如也!

清空购物车 前往结算
您有新的私信
没有新私信
写新私信 查看全部

关于我们

本站建于2021年11月16日,在为客户提供最好的资源的同时,保证优秀的服务质量。

能够给用户最大的帮助是我们最大的奋斗目标。

Copyright © 2021-2023 小狐狸资源网
・赣ICP备2022004852号 网站地图

首页专题认证
搜索菜单我的