首页 新闻 搜索 专区 学院

博客背景实现刷新随机切换

0
悬赏园豆:100 [已解决问题] 解决于 2022-04-14 14:18

请问博客背景如何实现刷新网页后随机切换(不是指随机图片网址,而是在自己设定的图片中随机切换)

Jason142的主页 Jason142 | 初学一级 | 园豆:170
提问于:2022-04-13 10:43
< >
分享
最佳答案
1

1、把所有背景图地址放到数组中。
var bgArray = ["http://images.xxx.com/1.jpg","http://images.xxx.com/2.jpg","http://images.xxx.com/3.jpg"]
2、根据随机数确定使用哪张背景图,随机数范围就是背景图个数,如:
var bgAddr = bgArray[Math.floor(Math.random()*3)];
3、替换body背景,bgAddr就是当前背景图地址。
document.body.style.background = "url("+bgAddr +") no-repeat";

ps:每次网页打开先执行以上3个步骤即可。

收获园豆:100
七月的枫丶 | 菜鸟二级 |园豆:302 | 2022-04-13 14:11
var bgArray =["https://images.cnblogs.com/cnblogs_com/blogs/735554/galleries/2141018/t_220412053942_96.jpg","https://images.cnblogs.com/cnblogs_com/blogs/735554/galleries/2141018/t_220411044548_91.jpg","https://images.cnblogs.com/cnblogs_com/blogs/735554/galleries/2141018/t_220409050330_1.jpg"]
var bgAddr = bgArray[Math.floor(Math.random()*3)];
document.body.style.background = "url("+bgAddr +") no-repeat";

请问写在定制CSS代码里为什么没有效果?博客主页背景一片灰色?

Jason142 | 园豆:170 (初学一级) | 2022-04-13 14:52

@Jason142: F12看看body背景样式是什么

七月的枫丶 | 园豆:302 (菜鸟二级) | 2022-04-13 15:21

@Jason142: 那个是js,写在css里面肯定没用啊。如果你自己的网站可以写个js文件,在每个页面引入即可。如果是博客园,要开通JS权限。

七月的枫丶 | 园豆:302 (菜鸟二级) | 2022-04-13 15:51

@七月的枫丶: js已经开通了,可是放公告栏和页脚HTML代码里好像也没用啊?

Jason142 | 园豆:170 (初学一级) | 2022-04-13 15:59

@Jason142: 看一下设置里面有没有JS代码设置

七月的枫丶 | 园豆:302 (菜鸟二级) | 2022-04-13 16:24

@七月的枫丶: “建议在页脚添加js代码”,在页脚添加后没用换背景,只是在页脚出现了代码:https://images.cnblogs.com/cnblogs_com/blogs/735554/galleries/2143650/t_220413084512_屏幕截图 2022-04-13 163759.png

Jason142 | 园豆:170 (初学一级) | 2022-04-13 16:45

@Jason142: 截图看不清,提示什么?

七月的枫丶 | 园豆:302 (菜鸟二级) | 2022-04-13 16:51

@七月的枫丶: 就是我的代码出现在了页脚

Jason142 | 园豆:170 (初学一级) | 2022-04-13 16:58

@Jason142: 看看我的主页 https://www.cnblogs.com/esaybook/

七月的枫丶 | 园豆:302 (菜鸟二级) | 2022-04-13 17:16

@Jason142:
<script>
function onload(){
var bgArray =["https://images.cnblogs.com/cnblogs_com/blogs/735554/galleries/2141018/t_220412053942_96.jpg","https://images.cnblogs.com/cnblogs_com/blogs/735554/galleries/2141018/t_220411044548_91.jpg","https://images.cnblogs.com/cnblogs_com/blogs/735554/galleries/2141018/t_220409050330_1.jpg"]
var bgAddr = bgArray[Math.floor(Math.random()*3)];
document.body.style.background = "url("+bgAddr +") no-repeat";
}
onload();
</script>

七月的枫丶 | 园豆:302 (菜鸟二级) | 2022-04-13 17:17

把上面的内容粘贴到页脚HTML代码

七月的枫丶 | 园豆:302 (菜鸟二级) | 2022-04-13 17:25
Jason142 | 园豆:170 (初学一级) | 2022-04-13 18:30

@Jason142: no-repeat 改成 repeat

七月的枫丶 | 园豆:302 (菜鸟二级) | 2022-04-14 09:55
Jason142 | 园豆:170 (初学一级) | 2022-04-14 10:40

@Jason142: 那是你图片太小了,找个1920*1080 -_-||

七月的枫丶 | 园豆:302 (菜鸟二级) | 2022-04-14 13:35

@七月的枫丶: 上传之前是这个大小,上传之后就被压缩了

Jason142 | 园豆:170 (初学一级) | 2022-04-14 13:54

@七月的枫丶: 换了个图床,现在好了

Jason142 | 园豆:170 (初学一级) | 2022-04-14 14:16

@七月的枫丶: 谢谢大佬!Thanks♪(・ω・)ノ

Jason142 | 园豆:170 (初学一级) | 2022-04-14 14:17
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册