html实现颜色刷新变化,js+css绘制颜色动态变化的圈中圈效果

本文实例讲述了js+css绘制颜色动态变化的圈中圈效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

circle

.circle

{

border-radius:50%;

background:#DDDDDD;

}

.circle_inside

{

width:80%;

height:80%;

left:10%;

border-radius:50%;

background:#494949;

position:relative;

top:10%;

}

#circle

{

margin-left:50%;

position:relative;

left:-250px;

width:500px;

height:500px;

}

var c = 'DDDDDD,DFEFFF,494949,C8DB74,46DFDE,59DDDE'.split(',');

function create_color() {

var color = '',

c_length = c.length,

random_nmb = Math.floor(Math.random()*c_length);

return '#'+c[random_nmb];

}

function create_inside_circle(color, id) {

return "

}

function create_all_circle() {

var circle_nmb = 15,

html = [],

id = 0,

inside_circle = document.getElementById('circle');

for(var i=0; i

id = "circle"+i;

inside_circle.innerHTML = create_inside_circle(create_color(), id);

inside_circle = document.getElementById(id);

}

}

window.onload = function(){

setInterval(function(){

create_all_circle();

}, 1500);

}

希望本文所述对大家JavaScript程序设计有所帮助。