javascript - 每 10 秒使用 querySelector 更改背景图像不起作用
问题描述
我尝试每 10 秒将 div 中的背景图像更改为随机图像(img/1-10.jpg)。
背景仅更改一次,而不是每 10 秒更改一次,因为它应该更改......我每 10 秒收到一次 ALERT(因此 setInterval 确实有效)。
function update() {
window.setInterval(function() {
alert('ok');
document.querySelector("#ri-grid div:nth-child(1)")
.style
.backgroundImage = "url(img/<?php echo rand(1,10);?>.jpg)";
}, 10000);
}
update();
.grid--layout-1 .grid__item:nth-child(1) {
background-image: url(img/1.jpg);
transition: background 5s linear;
}
<div class="grid grid--layout-1 grid--current" id="ri-grid">
<div class="grid__item 0"></div>
<div class="grid__item 1"></div>
<div class="grid__item 2"></div>
<div class="grid__item 3"></div>
</div>
解决方案
使用JS生成随机数
<script type="text/javascript">
function update() {
window.setInterval(function() {
var index = Math.floor(Math.random() * 10) + 1; // Generates random number from 1 to 10
document.querySelector("#ri-grid div:nth-child(1)").style.backgroundImage = "url(img/" + index + ".jpg)";
}, 10000);
}
update();
</script>
推荐阅读
- bash - 压缩文件——路径名中的撇号
- javascript - 在 Google Analytics 中将 Wisepops 链接点击作为事件发送
- r - 因子与字符的效率 - 对象大小
- arrays - 检查值是否小于或等于或大于 MongoDB 的条件
- c# - Facebook Live Comments 服务器发送的事件
- wordpress - WPGraphQL:使用 SLUG 作为唯一标识符的自定义帖子类型查询不返回数据
- spring-boot - 在春季健康报告中显示条目发起者
- reactjs - 如何在不破坏应用程序的情况下更改 redux 中的 stateReconciler?
- vb.net - MaskedTextBox 的下划线消失
- php - Laravel 策略发送 403 进行更新,发送 201 进行创建