使用JavaScript发出自动刷新的背景图像

Issue auto-refreshing background image with JavaScript

本文关键字：刷新 背景 图像 JavaScript 使用      更新时间：2023-09-26

我正在使用网络摄像头的直播流作为我个人网站的背景图像，我有一个问题，它每2秒自动刷新一次。

网站:daviddiliberto.com

饲料来源:

http://207.251.86.238/cctv7.jpg

我的CSS需要覆盖在站点其余部分上执行的主题。所以我在这里注入了:

#main {
background-image: url("http://207.251.86.238/cctv7.jpg");
background-size: cover;
}

我的JavaScript: 

<script language="JavaScript" type="text/javascript">
function reloadBackground() {
url = "http://207.251.86.238/cctv7.jpg?" + new Date().getTime();
img = document.getElementByClassId("#main");
img.src = url;
}
</script>

在我的HTML中:

<body onLoad="setInterval('reloadBackground()',2000)">

我不擅长JavaScript，所以真的很感谢任何帮助!!

没有此Id的元素。

你应该做的是getElementByClassName。但是，我不确定您是否可以使用该函数连接类名。

//don't use dots '.' or hashes in the parameter
document.getElementByClassName("full-width-homepage");

您尝试这样做的方式有很多错误。没有document.getElementByClassId()方法;"#main"不是图像，所以上面没有。src属性;你不需要把onLoad()放在BODY标签中;你不能有两个BODY标签;你不能在这样的文档中嵌入BODY标记....等等。

这个应该可以工作:

<script type="text/javascript">
    setTimeout(function() {
        document.getElementById("main").style.backgroundImage = "url("
            + "http://207.251.86.238/cctv7.jpg?"
            + new Date().getTime()
            + ")";
    }, 2000);
</script>
相关文章：