Question

我找到了这个JS Fiddle，我知道要将它插入到整个页面的背景中我只需将div id添加到body标签中，如下所示。

然而，有人可以在显示源代码的页面上显示我如何进行布局，因为我无法在Dreamweaver中使用它。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript">
function changeColor(element, curNumber){
curNumber++;

if(curNumber > 4){
    curNumber = 1;
}
console.log(curNumber);
element.addClass('color' + curNumber, 500);
// So previous classes get removed.
element.attr('class', 'color' + curNumber);
setTimeout(function(){changeColor(element, curNumber)}, 1000);  
}

changeColor($('#testElement'), 0);
</script>

谢谢你们：）

Answer 1

在运行任何JQuery代码之前，您需要确保包含JQuery框架。

<head>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<other scripts using JQuery syntax go here>
</head>

Answer 2

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
element = $("#testElement");
i = 1;
        setInterval(function(){
            element.removeClass("color"+i);
            console.log(i);
            i++
            if(i == 5) {
            i = 1;
            }
            element.addClass("color"+i);
        }, 1000);
})
</script>
<style>
.color1{
    background: yellow;
}

.color2{
    background: red;
    color: white;
}

.color3{
    background: blue;
    color: white;
}

.color4{
    background: green;
}
</style>

</head>
<body>
<div id="testElement">Im a test element for testing OMG!!!!?!</div>
</body>
</html>

背景颜色变化，使用javascript定时

2 个答案: