Javascript 加载后在5秒内显示不同的背景，然后进行最终更改_Javascript_Jquery_Css

Javascript 加载后在5秒内显示不同的背景，然后进行最终更改

javascript jquery css

Javascript 加载后在5秒内显示不同的背景，然后进行最终更改,javascript,jquery,css,Javascript,Jquery,Css,我想在加载后的前5秒显示，每1秒或更短一点显示一个不同的背景。在这5秒钟之后，我想设定一个明确的背景我已经设置了我的div的类： <div id="plateau" class="step01"> <div id="plateau-fond"> 我想使用javascript或jQuery来执行上述操作。在我的脑海中，我建议如下： $(function() { var step = 1; var interval = window.setInterval(fu

我想在加载后的前5秒显示，每1秒或更短一点显示一个不同的背景。在这5秒钟之后，我想设定一个明确的背景

我已经设置了我的div的类：

<div id="plateau" class="step01">
<div id="plateau-fond">

我想使用javascript或jQuery来执行上述操作。

在我的脑海中，我建议如下：

$(function() {
  var step = 1;

  var interval = window.setInterval(function() {
     var $plateau = $("#plateau");
     $plateau.removeClass("step0" + step);
     step++;
     $plateau.addClass("step0" + step);
     if(step == 5) { 
         window.clearInterval(interval);
     }
  }, 1000);
});

稍后，我将在jsfiddle中验证这一点。

在我的头顶上，我建议如下：

$(function() {
  var step = 1;

  var interval = window.setInterval(function() {
     var $plateau = $("#plateau");
     $plateau.removeClass("step0" + step);
     step++;
     $plateau.addClass("step0" + step);
     if(step == 5) { 
         window.clearInterval(interval);
     }
  }, 1000);
});

稍后将在JSFIDLE中验证这一点。

以下是完成所需任务的代码样式表：您需要编写您的样式/图像等

<style type="text/css">
    .step00{background:#000000;}  /*this is the initial background when page loaded*/
.step01{background:#454545;}  /*First change after 1 sec*/
.step02{background:#333333;}  /*2nd change after 2 sec*/
.step03{background:#234567;}  /*3rd change after 3 sec*/
.step04{background:#789564;}  /*4th change after 5 sec*/
.step05{background:#cccccc;}  /*5th change after 5 sec*/
.stepfixed{background:#fff222;} /*final definitive bg after 6 sec*/
</style>


.step00{background:#000000；}/*这是加载页面时的初始背景*/
.step01{背景：#454545；}/*1秒后第一次更改*/
.step02{背景：#333333；}/*2秒后的第二次更改*/
.step03{背景：#234567；}/*3秒后第三次更改*/
.step04{背景：#789564；}/*5秒后的第4次更改*/
.step05{背景：#CCCC；}/*5秒后第5次更改*/
.stepfixed{背景：#fff222；}/*6秒后的最终确定背景*/

Html


var计数=0；
jQuery（窗口）.load（函数（）{
var interval=window.setInterval（“change_bg（）”，1000）；//1000=1秒
});
函数更改_bg（）{
jQuery（'div#plateau'）.removeClass（'step0'+count）；
计数++；
如果（计数>5）{
jQuery（'div#plateau'）.addClass（'stepfixed'）；
窗口。清除间隔（间隔）；
}否则{
jQuery（'div#plateau'）.addClass（'step0'+计数）；
}
}

***上述代码需要Jquery才能工作。不要忘记包含jquery。包含jquery非常简单。如果您不能这样做，请留下评论。

以下是完成所需任务的代码

<style type="text/css">
    .step00{background:#000000;}  /*this is the initial background when page loaded*/
.step01{background:#454545;}  /*First change after 1 sec*/
.step02{background:#333333;}  /*2nd change after 2 sec*/
.step03{background:#234567;}  /*3rd change after 3 sec*/
.step04{background:#789564;}  /*4th change after 5 sec*/
.step05{background:#cccccc;}  /*5th change after 5 sec*/
.stepfixed{background:#fff222;} /*final definitive bg after 6 sec*/
</style>

    <div id="plateau" class="step00">
    <div id="plateau-fond">

    <script type="text/javascript">
        var count = 0;
        var flag = 1;
        jQuery(window).load(function () {
            var interval = window.setInterval("change_bg()",1000); //1000 = 1sec here
        });
        function change_bg() {
            if(count == 0)
                jQuery('div#plateau').removeClass('step00');
            else
                jQuery('div#plateau').removeClass('step0'+flag);
            count++;
            if(flag % 2 == 0)
                flag = 1;
            else
                flag = 2;
            if(count > 5) {
                jQuery('div#plateau').addClass('stepfixed');
                window.clearInterval(interval);
            } else {
                jQuery('div#plateau').addClass('step0'+flag);
            }
        }
    </script>

样式表：您需要编写您的样式/图像等

<style type="text/css">
    .step00{background:#000000;}  /*this is the initial background when page loaded*/
.step01{background:#454545;}  /*First change after 1 sec*/
.step02{background:#333333;}  /*2nd change after 2 sec*/
.step03{background:#234567;}  /*3rd change after 3 sec*/
.step04{background:#789564;}  /*4th change after 5 sec*/
.step05{background:#cccccc;}  /*5th change after 5 sec*/
.stepfixed{background:#fff222;} /*final definitive bg after 6 sec*/
</style>


.step00{background:#000000；}/*这是加载页面时的初始背景*/
.step01{背景：#454545；}/*1秒后第一次更改*/
.step02{背景：#333333；}/*2秒后的第二次更改*/
.step03{背景：#234567；}/*3秒后第三次更改*/
.step04{背景：#789564；}/*5秒后的第4次更改*/
.step05{背景：#CCCC；}/*5秒后第5次更改*/
.stepfixed{背景：#fff222；}/*6秒后的最终确定背景*/

Html


var计数=0；
jQuery（窗口）.load（函数（）{
var interval=window.setInterval（“change_bg（）”，1000）；//1000=1秒
});
函数更改_bg（）{
jQuery（'div#plateau'）.removeClass（'step0'+count）；
计数++；
如果（计数>5）{
jQuery（'div#plateau'）.addClass（'stepfixed'）；
窗口。清除间隔（间隔）；
}否则{
jQuery（'div#plateau'）.addClass（'step0'+计数）；
}
}

***上述代码需要Jquery才能工作。不要忘记包含jquery。包含jquery非常简单。如果您不能这样做，请留下评论。


<style type="text/css">
    .step00{background:#000000;}  /*this is the initial background when page loaded*/
.step01{background:#454545;}  /*First change after 1 sec*/
.step02{background:#333333;}  /*2nd change after 2 sec*/
.step03{background:#234567;}  /*3rd change after 3 sec*/
.step04{background:#789564;}  /*4th change after 5 sec*/
.step05{background:#cccccc;}  /*5th change after 5 sec*/
.stepfixed{background:#fff222;} /*final definitive bg after 6 sec*/
</style>

    <div id="plateau" class="step00">
    <div id="plateau-fond">

    <script type="text/javascript">
        var count = 0;
        var flag = 1;
        jQuery(window).load(function () {
            var interval = window.setInterval("change_bg()",1000); //1000 = 1sec here
        });
        function change_bg() {
            if(count == 0)
                jQuery('div#plateau').removeClass('step00');
            else
                jQuery('div#plateau').removeClass('step0'+flag);
            count++;
            if(flag % 2 == 0)
                flag = 1;
            else
                flag = 2;
            if(count > 5) {
                jQuery('div#plateau').addClass('stepfixed');
                window.clearInterval(interval);
            } else {
                jQuery('div#plateau').addClass('step0'+flag);
            }
        }
    </script>

.step00{background:#000000；}/*这是加载页面时的初始背景*/
.step01{背景：#454545；}/*1秒后第一次更改*/
.step02{背景：#333333；}/*2秒后的第二次更改*/
.step03{背景：#234567；}/*3秒后第三次更改*/
.step04{背景：#789564；}/*5秒后的第4次更改*/
.step05{背景：#CCCC；}/*5秒后第5次更改*/
.stepfixed{背景：#fff222；}/*6秒后的最终确定背景*/
var计数=0；
var标志=1；
jQuery（窗口）.load（函数（）{
var interval=window.setInterval（“change_bg（）”，1000）；//1000=1秒
});
函数更改_bg（）{
如果（计数=0）
jQuery（'div#plateau'）.removeClass（'step00'）；
其他的
jQuery（'div#plateau'）.removeClass（'step0'+标志）；
计数++；
如果（标志%2==0）
flag=1；
其他的
flag=2；
如果（计数>5）{
jQuery（'div#plateau'）.addClass（'stepfixed'）；
窗口。清除间隔（间隔）；
}否则{
jQuery（'div#plateau'）.addClass（'step0'+标志）；
}
}


.step00{background:#000000；}/*这是加载页面时的初始背景*/
.step01{背景：#454545；}/*1秒后第一次更改*/
.step02{背景：#333333；}/*2秒后的第二次更改*/
.step03{背景：#234567；}/*3秒后第三次更改*/
.step04{背景：#789564；}/*5秒后的第4次更改*/
.step05{背景：#CCCC；}/*5秒后第5次更改*/
.stepfixed{背景：#fff222；}/*6秒后的最终确定背景*/
var计数=0；
var标志=1；
jQuery（窗口）.load（函数（）{
var interval=window.setInterval（“change_bg（）”，1000）；//1000=1秒
});
函数更改_bg（）{
如果（计数=0）
jQuery（'div#plateau'）.removeClass（'step00'）；
其他的
jQuery（'div#plateau'）.removeClass（'step0'+标志）；
计数++；
如果（标志%2==0）
flag=1；
其他的
flag=2；
如果（计数>5）{
jQuery（'div#plateau'）.addClass（'stepfixed'）；
窗口。清除间隔（间隔）；
}否则{
jQuery（'div#plateau'）.addClass（'step0'+标志）；
}
}

可能是$plateau.addClass（“step0”+步骤），而不是$plateau.addClass（“step0”+（++）步骤），因为您在前一行中已经增加了步骤+。这是真的。。。修好了。（将整个jQuery操作作为一行代码，但试图使其更具可读性）哦，这是一个很好的函数。我用了setTimeout，但是setInterval也很好。但是，在这个函数中，在5秒钟内，我想显示step02，然后是step01，然后是