编写了两个JavaScript函数，但其中一个似乎正在破坏我的网站
所以我写了一个简单的程序，应该在3秒钟后改变给定网站的背景 下面是我的JavaScript代码：编写了两个JavaScript函数，但其中一个似乎正在破坏我的网站,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以我写了一个简单的程序，应该在3秒钟后改变给定网站的背景 下面是我的JavaScript代码： //this function changes the backgrounds after 3 seconds and increments n function changebackgroundTimed(startvariable) { var n = startvariable; var loop = 1; while (loop == 1) {
//this function changes the backgrounds after 3 seconds and increments n
function changebackgroundTimed(startvariable)
{
var n = startvariable;
var loop = 1;
while (loop == 1)
{
setTimeout(function(){changebackground(n)}, 3000)
n++;
if (n == 5)
{
n=1;
}
}
}
//this function changes the background depending on the given number
function changebackground(number)
{
if (number == 1)
{
$("body").css("background","no-repeat center/120%url('../images/1.jpg')");
}
else if (number == 2)
{
$("body").css("background","no-repeat center/120%url('../images/2.jpg')");
}
else if (number == 3)
{
$("body").css("background","no-repeat center/120%url('../images/3.jpg')");
}
else if (number == 4)
{
$("body").css("background","no-repeat center/120%url('../images/4.jpg')");
}
else {
$("body").css("background","no-repeat center/120%url('../images/1.jpg')");
}
}
问题是：当我启动页面时，它只是加载了很长一段时间，然后最终崩溃，而没有显示任何内容。它必须与这两个功能相关。有人注意到我可能遗漏了一个错误吗？看起来您没有更新循环变量，这导致它进入无限循环 不要使用while循环，而是使用setInterval方法。这应该能帮你完成工作 将变量n保持在函数外部，并使用outsiders this关键字引用它
function abc(){
var self = this;
self.n = 1;
setInterval(function () {
if(self.n ===1){
self.n = self.n + 1;
// your code
}else if(){
// and so on
}
changebackground(self.n);
},3000);
}
您似乎从未退出while循环，这会使页面在永远运行时崩溃。在代码的某些部分，您必须更改循环变量的值。您正在创建一个无限循环，并且永远不会中断它，因此它将尽可能快地运行并锁定UI 为什么不这样使用setInterval： const backgroundChanger=setIntervalchangeBackground，3000 让背景=1 函数更改背景{ 如果背景>=5背景=1 //设置你喜欢的背景 document.body.style.background='url../images/'+background++'.jpg center/120%无重复' } var i=1； setInterval=>{ ifi>5{ i=0； }否则{ 变化背景 } i++； }, 250; 功能变化背景{ 切奇{ 案例1： $body.css颜色，红色 打破 案例2： $body.css颜色，蓝色 打破 案例3： $body.css颜色，绿色 打破 案例4： $body.css颜色，黑色 打破 案例5： $body.css颜色，橙色 打破 违约： $body.css颜色，白色 }
} setTimeout是一个非阻塞调用。这意味着您的代码在调用changebackgroundn；时不会等待3000毫秒并继续在infinte循环中运行 要了解更多有关setTimeout的信息，请访问此处 使用以下代码： 函数changebackgroundTimedstartvariable { var n=起始变量； setInterval=>{ 改变背景； n=n%5+1； }, 3000; } //此函数根据给定的数字更改背景 函数更改背景编号 { 控制台日志号 } changebackgroundTimed2我的2美分。。。 CSS: Javascript:
主题的变体，但没有原始功能的硬编码限制
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Background image cycling</title>
<style>
body{
width:100%;
height:100vh;
padding:0;
margin:0;
}
</style>
<script>
/* configuration */
const PAUSE=3;
const SLIDES=['//www.stevensegallery.com/800/600','//www.placecage.com/800/600','//placebear.com/640/360','//picsum.photos/800/600'];
(function( delay ){
document.addEventListener('DOMContentLoaded',()=>{
var images=[/* default images */
'//placekitten.com/900/800',
'//placekitten.com/1000/800',
'//placekitten.com/1024/768',
'//placekitten.com/1200/800',
'//placekitten.com/1366/768'
];
if( arguments[1] )images=images.concat( arguments[1] )
var i=0;
(function(){
setTimeout( arguments.callee, 1000 * delay );
i++;
if( i > images.length - 1 )i=0;
document.body.style.background='center / contain no-repeat url('+images[ i ]+')';
})();
});
})( PAUSE, SLIDES );
</script>
</head>
<body>
<!-- content -->
</body>
</html>
当您在代码的其他地方更改循环时，您永远不会退出循环？您有while循环===1。。。循环将始终=1，因为您已将其设置为优先。你只是被困在那个圈子里。我建议将其改为if-else。是的，我希望循环无限循环，这样背景图片就可以每3秒不断变化。为什么不使用setInterval并在间隔内进行更改？这项任务可以通过css动画完成哦，伙计，谢谢，我现在意识到我不知道setInterval函数是什么，它现在可以工作了，非常感谢：投票通过，但var self=这看起来是2015年之前的事情：现在我们有了带胖箭头功能的ES6和所有。。。还可以将self.n=self.n+1替换为self.n++，诸如此类。更优雅的事情Jeremy，我将继续关注这一点，谢谢你指出这一点：当值大于4时，你也可以使用这样的东西，不用担心：$body.cssbackground，`no repeat center/120%url'../images/${number++%4+1}.jpg`；即使重置为开始，您也始终希望更改背景。使用您的代码，最后一个背景的显示时间将是其他背景的两倍。
const Root = document.documentElement
, gRoot = getComputedStyle(Root)
, imgList = gRoot.getPropertyValue('--bg-images').match(/"(.*?)"/)[1].split('|')
, NbImgs = imgList.length
, regExp = /\(([^)]+)\)/ // to get img url between parentheses
;
let currImg = imgList.findIndex(img=>img=== (regExp.exec(gRoot.getPropertyValue('--img-bg'))[1]))
;
setInterval(() => {
currImg = ++currImg % NbImgs;
Root.style.setProperty('--img-bg', `url(${imgList[currImg]})`)
}, 3000)
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Background image cycling</title>
<style>
body{
width:100%;
height:100vh;
padding:0;
margin:0;
}
</style>
<script>
/* configuration */
const PAUSE=3;
const SLIDES=['//www.stevensegallery.com/800/600','//www.placecage.com/800/600','//placebear.com/640/360','//picsum.photos/800/600'];
(function( delay ){
document.addEventListener('DOMContentLoaded',()=>{
var images=[/* default images */
'//placekitten.com/900/800',
'//placekitten.com/1000/800',
'//placekitten.com/1024/768',
'//placekitten.com/1200/800',
'//placekitten.com/1366/768'
];
if( arguments[1] )images=images.concat( arguments[1] )
var i=0;
(function(){
setTimeout( arguments.callee, 1000 * delay );
i++;
if( i > images.length - 1 )i=0;
document.body.style.background='center / contain no-repeat url('+images[ i ]+')';
})();
});
})( PAUSE, SLIDES );
</script>
</head>
<body>
<!-- content -->
</body>
</html>