Question

我已经设法为我正在做的小项目整理了一些很棒的代码，我已经设法创建了一个改变颜色的页面背景，当页面背景颜色发生变化时，一行文本也会发生变化。

使用相同的javascript我想知道每次页面背景颜色发生变化时，是否有可能在页面正文中有一个div来改变其背景颜色（与页面背景颜色不同）。

以下是我的javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script>
$(document).ready(function() {

element = $("#testElement");
var arr = ['hi','hello ','how ','are ','you ']; 

var i = 1; // localizing scope of this variable (not necessary)
setInterval(function(){
    element.removeClass("color"+i);
    console.log(i);
    i++; // missing semicolon here
    if(i == 5)  i = 1;
    element.addClass("color"+i);
    element.text(arr[i]); // change the inner text of element

}, 60000);
})

</script>

这是我的HTML

<body id="testElement">
<div id="testDiv"></div>
</body>

这是我的css

.color1{
background: #099;
}

.color2{
background: #F9C;
}

.color3{
background: #6FC;
}

.color4{
background: #C6C;
}
#testdiv {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
}

我已经学到了很多，所以提前感谢所有优秀的人

Answer 1

你可以改写这样的东西......

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script>
$(document).ready(function() {

var bodyElement = $("#testElement"),
    divElement = $("#testDiv"),
    arr = ['hi','hello ','how ','are ','you '],
    i = 1; 

setInterval(function(){
    var oldColor, newColor;

    oldColor = "color" + i;

    i++; 
    if(i === 5)  {
      i = 1;
    }     

    newColor = "color" + i;    


    bodyElement.removeClass(oldColor);
    divElement.removeClass(oldColor);


    bodyElement.addClass(newColor).text(arr[i]); 
    divElement.addClass(newColor);

}, 60000);
})

</script>

或者您可以重写CSS以将颜色应用于子元素，例如

.color1 {
  background-color:green;
}

.color2 {
  background-color:red;
}

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 = $("body");
element2 = $("#testElement");
i = 1;
        setInterval(function(){
            if(typeof color != "undefined") { 
            element.removeClass(color)
            element2.removeClass(color2)
            }
            color="color"+Math.floor((Math.random()*4)+1);
            color2="color"+Math.floor((Math.random()*4)+1);
                    while(color==color2) {
                          color2="color"+Math.floor((Math.random()*4)+1);
                    }
            console.log(i);
            i++
            if(i == 5) {
            i = 1;
            }
            element.addClass(color);
            element2.addClass(color2);
        }, 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>

这就是你想要的吗？

Answer 3

嘿，你有一个很好的代码，但是当身体背景颜色发生变化时，你可以尝试使用这段代码进行动态代码更改。。

<body bgcolor=#652310> <div style="opacity:.5; float:right; height:40%; width:50%; border-radius:15px; background-color:#994248; padding-top:10%; color:white" align="center">

Shenic always rock
                     </div>


<div style="opacity:0.5; float:right; height:40%; width:50%; border-radius:15px; background-color:#232424; padding-top:30%;color:yellow" align="center">

ViniColtinRoy is a lazy boy :-)
                     </div> </body>

当bg颜色改变javascript时，div bgcolor会改变

3 个答案: