Question

我制作了一个（必须）改变身体背景图像的功能，但它不应该工作（虽然我很久以前就把它用于其他网站并且在那里做它的工作）。所以这是代码，但我不知道错了什么：

function bgChange()
{
    var totalcount=7;
    var num;
    num = Math.ceil( (Math.random() * totalCount) );
    $('#divID').css("background", "url(kepek/"+num+".jpg)");
    /*document.body.style.background=url(kepek/"+num+".jpg);*/
    setInterval(bgChange(),10000);
}

[编辑] 如果有帮助，这里是html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>To infinity... and beyond!</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="content.css"/>
    <script type="text/javascript" src="bgchange.js"></script>
</head>

<body>
    <div id="wrapper">
        <h1>Galaxis útikalauz (nem csak) stopposoknak</h1>
        <div id="left_side">
            <h2>Menü</h2>
            <ul id="menu">
                <li class="menu_element"><a class="" href="#">menupont</a></li>
                <li class="menu_element"><a class="" href="#">menupont</a></li>
                <li class="menu_element"><a class="" href="#">menupont</a></li>
                <li class="menu_element"><a class="" href="#">menupont</a></li>
                <li class="menu_element"><a class="" href="#">menupont</a></li>
            </ul>
        </div>
        <div id="main_content" onload="bgChange()">
            <h2>Témacím 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus risus risus, congue tempus turpis dapibus in. Donec posuere, felis non aliquam pulvinar, est ante luctus nunc, vel mollis velit turpis non est. Vivamus ut neque a nulla euismod ultricies in vel lectus. Quisque quis mauris felis. Mauris pellentesque eu ante ac semper. Morbi nec dapibus odio, ut lobortis orci. Vivamus eget sem porta orci condimentum facilisis. Suspendisse id tortor adipiscing, tincidunt diam vitae, lacinia velit. Proin sit amet rhoncus sapien, sed auctor nisl. Donec ullamcorper nibh vel faucibus lacinia. Ut sed faucibus eros, vel molestie dui. Nunc auctor ac nibh vel varius. Integer quis nisi facilisis orci laoreet dictum. <a href="#">Tovább >></a></p>
            <h2>Témacím 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus risus risus, congue tempus turpis dapibus in. Donec posuere, felis non aliquam pulvinar, est ante luctus nunc, vel mollis velit turpis non est. Vivamus ut neque a nulla euismod ultricies in vel lectus. Quisque quis mauris felis. Mauris pellentesque eu ante ac semper. Morbi nec dapibus odio, ut lobortis orci. Vivamus eget sem porta orci condimentum facilisis. Suspendisse id tortor adipiscing, tincidunt diam vitae, lacinia velit. Proin sit amet rhoncus sapien, sed auctor nisl. Donec ullamcorper nibh vel faucibus lacinia. Ut sed faucibus eros, vel molestie dui. Nunc auctor ac nibh vel varius. Integer quis nisi facilisis orci laoreet dictum. <a href="#">Tovább >></a></p>
            <h2>Témacím 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus risus risus, congue tempus turpis dapibus in. Donec posuere, felis non aliquam pulvinar, est ante luctus nunc, vel mollis velit turpis non est. Vivamus ut neque a nulla euismod ultricies in vel lectus. Quisque quis mauris felis. Mauris pellentesque eu ante ac semper. Morbi nec dapibus odio, ut lobortis orci. Vivamus eget sem porta orci condimentum facilisis. Suspendisse id tortor adipiscing, tincidunt diam vitae, lacinia velit. Proin sit amet rhoncus sapien, sed auctor nisl. Donec ullamcorper nibh vel faucibus lacinia. Ut sed faucibus eros, vel molestie dui. Nunc auctor ac nibh vel varius. Integer quis nisi facilisis orci laoreet dictum. <a href="#">Tovább >></a></p>
        </div>
        <div id="right_side">
            <img src="Me.jpg" alt="Én vagyok" />
            <h4>Ez Injektív!</h4>
            <p>Quisque congue nunc vel bibendum dictum. Curabitur elit ligula, auctor viverra mauris eu, mollis luctus libero. Aliquam vel semper tortor, eu vestibulum risus. Nullam scelerisque malesuada lectus ut fermentum. Phasellus gravida felis ut laoreet mollis. </p>
        </div>
    </div>
    <div id="footer">
        <p>Soha Művek Zrt.</p>
    </div>
</body>
</html>

Answer 1

每次运行该函数时，最后一件事就是再次运行该函数。

这会锁定事件循环，因此永远不会重新绘制DOM。

将()移到bgChange的末尾，以便将bgChange本身功能传递给setInterval而不是返回值undefined调用那个函数。

然后将setInterval更改为setTimeout，这样就不会说“每次运行此函数时，每隔10秒再次运行”，因为这会增加函数每10次运行一次的次数秒指数。

setInterval(bgChange(),10000);应为setTimeout(bgChange ,10000);

Answer 2

我假设你试图在页面加载时实现这一点：

$(document).ready(function(){
  var repeater = setInterval(bgChange, 10000);
  function bgChange(){
    var totalcount=7,
      num = Math.ceil( Math.random() * totalCount ),
      target = $('#divID');
    if(target.length)
      target.css("background", "url(kepek/"+num+".jpg)");
    else
      clearInterval(repeater);
  }
});

我该如何修复这个javascript函数？

2 个答案: