FIDDLE

Question

我想知道我是否可以使用序列中的数字更改div的背景颜色，以便首先使用1，然后使用将自动加载的函数使用2然后使用3？

这是我目前的代码：测试

<!--JavaScript for Changing Colours-->
<script type="text/javascript">

</script>

<!--Table Style-->
<style>
    body{
        background-color: #000000 ;
    }
    table, th, td {
        border: 1px solid #000000 ;
        background-color: #000000 ;
    }
    th,td{
        background-color: #303030 !important;
        width: 218;
        height: 72;
    }
    #table{
        width: 100%;
        height: 100%;
    }

</style>
</head>


<body>
<!-- Start of Table -->
<table id="table" >
<tr id="first">
    <th>&nbsp</th>
    <th>&nbsp</th>
    <th id="3">&nbsp</th> <!--Change to Blue-->
    <th>&nbsp</th>
</tr>
<tr id="second">
    <td>&nbsp</td>
    <td id="1">&nbsp</td>  <!--Change to Yellow-->
    <td>&nbsp</td>
    <td id="5">&nbsp</td>                  <!--Change to Orange-->
</tr>
<tr class="third">
    <td>&nbsp</td>
    <td>&nbsp</td>
    <td id="2">&nbsp</td> <!--Change to Green-->
    <td>&nbsp</td>
</tr>
<tr id="fourth">
    <td id="4">&nbsp</td> <!--Change to White-->
    <td>&nbsp</td>
    <td>&nbsp</td>
    <td>&nbsp</td>
</tr>
</table>

</body>
</html>

Answer 1

您需要setTimeout和一个计数器来调用函数并将背景应用于每个单元格。如果可能的话，你也应该从css中删除!important，因为这样会更难以覆盖背景颜色 - 它有点笨拙，应该作为最后的手段使用。

(function() {

    var i = 1;
    // put colours in an array, we don;t need anything in position 0, because there is no <td id="0">
    var colours = [null, 'yellow', 'green', 'blue', 'white', 'orange'];

    // the function to set the background
    function setColour() {
        // reset previous cell if there was one
        var previousTd = document.getElementById(i-1);
        if(previousTd != null) {
            previousTd.style.backgroundColor = '';
        }

        var td = document.getElementById(i);
        if(td != null) {
            td.style.backgroundColor = colours[i];
            i++;
            // wait half a second and call the function again
            window.setTimeout(setColour, 500);
        }
    }

    window.addEventListener('load', setColour);

})();

Fiddle

Answer 2

您可以使用 setTimeout 。

如果您不想使用jQuery。

   setTimeout(function() {

    document.getElementById("1").style.color = "yellow"

    },3000); // here 3000 is the timeinterval in milliseconds(1000 = 1sec)

和..

Answer 3

这是我的解决方案，它可能更简单，jquery更适合跨浏览器支持：

$(document).ready(function () {
    setInterval(changeColor, 500);    
});
var a = 1;
var colors = ["red", "green", "yellow", "blue"];
function changeColor() {
    $( "div" ).each(function() {
        $(this).css("background-color", "");
    });
    if (a > 4) { a = 1; }
    $("#" + a).css("background-color", colors[a - 1]);
    a++;
}

http://jsfiddle.net/cdj87t9e/

只需将$( "div" ).each更改为$( "td" ).each

即可

Answer 4

使用CSS动画更新了Codepen
您可以使用flexbox使用css执行此操作。在codepen here

上查看

HTML

<table id="table" >
<tr id="first">
  <th><p>&nbsp</p></th>
  <th><p>&nbsp</p></th>
  <th id="three"><p>THREE</p></th> <!--Change to Blue-->
  <th><p>&nbsp</p></th>
</tr>
<tr id="second">
  <td><p>&nbsp</p></td>
  <td id="one"><p>ONE</p></td>  <!--Change to Yellow-->
  <td><p>&nbsp</p></td>
  <td id="five"><p>FIVE</p></td>                  <!--Change to Orange-->
</tr>
<tr class="third">
  <td><p>&nbsp</p></td>
  <td><p>&nbsp</p></td>
  <td id="two"><p>TWO<p></td> <!--Change to Green-->
  <td><p>&nbsp</p></td>
</tr>
<tr id="fourth">
  <td id="four"><p>FOUR</p></td> <!--Change to White-->
  <td><p>&nbsp</p></td>
  <td><p>&nbsp</p></td>
  <td><p>&nbsp</p></td>
</tr>
</table>

CSS

body{
    background-color: #000000 ;
}
table, th, td {
    border: 1px solid #000000 ;
    background-color: #000000 ;
}
th,td{
    background-color: #303030 !important;
    width: 218;
    height: 72;
  font-weight: bold;
}
#table{
    width: 100%;
    height: 100%;


}
tr{
  display:flex;
  flex-direction:row;

}
td,th {
  order:2;
  flex-grow:1;
  text-align:center;
}
#three {
  order:1;
  color:#fff;
  background:blue !important;
}
#one {
  order:1;
  color:#333;
  background:yellow !important;
}
#two {
  order:1;
  color:#fff;
  background:green !important;
}
#five{
  order:1;
  color:#333;
  background:orange !important;
}
#four {
  order:1;
  color:#333;
  background:#fff !important;
}

Answer 5

您可以使用setTimeout执行此操作。您可以使用.css()来更改背景颜色，但如果您想要添加更多CSS规则，我建议您添加class（我也建议您更改您的id代表单词而不是数字，例如#one代替#1）：

FIDDLE

<强> JS

setTimeout(function(){

    $("#one").addClass("yellow");

}, 1000);

setTimeout(function(){

    $("#two").addClass("green");

}, 2000);

setTimeout(function(){

    $("#three").addClass("blue");

}, 3000);

setTimeout(function(){

    $("#four").addClass("white");

}, 4000);

setTimeout(function(){

    $("#five").addClass("orange");

}, 5000);

<强> CSS

.yellow{
    background-color: yellow;
}

.green{
    background-color: green;
}

.blue{
    background-color: blue;
}

.white{
    background-color: white;
}


.orange{
    background-color: orange;
}

更新

我发现你的评论是关于在我发布我的anwser后希望它们淡入淡出。要使用jQuery（简单的javascript可能非常罗嗦）这样做更简单，这是使用setInterval的另一种解决方案：

var counter = 0;
var colorArray = ["yellow","green", "blue", "white", "orange"];

setInterval(function(){

 $("#color"+(counter+1)).css({"background-color":colorArray[counter]});
 $('td,th').not("#color"+(counter+1)).attr("style", "");

 counter++;

}, 500);

我怎么能用数字改变div改变背景颜色

5 个答案:

FIDDLE

更新

NEW FIDDLE