Home >Web Front-end >HTML Tutorial >JS code request_html/css_WEB-ITnose

JS code request_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:44:351011browse

Explain my problem:
I want to make a JS special effect
What special effect?
A background color keeps rotating on several DIVs
Example:
Gray background, displayed in gray on one DIV; after 2 seconds, it will appear gray on the next DIV; after 2 seconds, it will appear gray on the next DIV DIV is gray;


Reply to discussion (solution)

19880c1ecf38c1691172a18c891affca
049c7a38119cb40861df2f1896b90f32
93f0f5c25f18dab9d176bd4f6de5d30e
a30da2168b822b8146b7e0fde8a59c01
b2386ffb911b14667cb8f0f91ea547a7Untitled Document6e916e0f7d1e588d4f442bf645aedb2f
c55ababf5617a43fb46d5bb0e94778fac8cdfd8c137c219689c7ba1bdf6c93c9
#main div{ width:100px; height:100px; background-color:red; margin:10px;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
243a8f3f087936dc3f96e2f0cf018c22
428c41199dc7d7a8d8e11a9bf3a6a83716b28748ea4df4d9c2150843fecfba68
58104fe04bb3ea76a1de6dd3815d615216b28748ea4df4d9c2150843fecfba68
678a046bebc5ee7951973d981586f38f16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(function(){
var divs = $("#main div");
var current = 0;
setInterval(function(){
$(divs).each (function(){
$(this).css("background-color","red");
});
$(divs).each(function(e){
if(e==current){
$(divs[e]).css("background-color","black");
current ;
if(current>=divs.length){ current=0;}
return false;
}
});
},2000);
});
2cacc6d41bbb37262a98f745aa00fbf0

$('div:odd').addClass("class1");$('div:even').addClass("class2");

$('div:odd').addClass("class1");$('div:even').addClass("class2");


Ignore the above, you need to setInterval
var idx=0;setInterval(function(){var divs = $('div');divs .removeClass("classShow");$('div:eq('+idx+')').addClass("classShow");idx++;idx=idx%divs.length;},2000);

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>        <style>        .normal {            width: 100px;            height: 100px;            border: solid 1px gray;            margin: 10px;        }        .current {            background-color: gray;        }    </style>        <div id="container">        <div class="normal">1</div>        <div class="normal">2</div>        <div class="normal">3</div>        <div class="normal">4</div>    </div>        <script>    setInterval( play, 1000 * 2 );    // 获取所有的div    play.divs = document.getElementById( "container" ).getElementsByTagName( "div" );    // 计时器    play.count = 0;    function play() {        var divs = play.divs;        for (var i = 0; i < divs.length; i++) {            if ( i === play.count % divs.length ) {                divs[ i ].className = "normal current";                continue;            }            divs[ i ].className = "normal";        }        play.count++;    }    </script></body></html>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:SVG Drawing AnimationNext article:SVG Drawing Animation