<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
animation:move 6s linear infinite normal;
overflow: hidden;
}
.wrap{
width: 400px;
height: 400px;
background-color: aqua;
margin: 100px auto;
position: relative;
}
.wrap div:nth-child(1){
width: 300px;
height: 300px;
background-color: aquamarine;
top: 50px;
left: 50px;
}
.wrap div:nth-child(2){
width: 200px;
height: 200px;
background-color: pink;
top:100px;
left: 100px;
}
.wrap div:nth-child(3){
width: 100px;
height: 100px;
background-color:skyblue;
top: 150px;
left: 150px;
}
@keyframes move{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
<script src="./js/jquery.js"></script>
<script>
// 每隔60ms 随机下标的一个div 改变成随机颜色
setInterval(function(){
//随机数 math.random()*数
var r = Math.floor(Math.random()*255);
var g = Math.floor(Math.random()*255);
var b = Math.floor(Math.random() * 255);
var i = Math.floor(Math.random() *$('div').length);
$('div').eq(i).css('background','rgb('+ r +','+ g +','+ b +')');
},60)
</script>
</body>
</html>
用jQuery实现每隔60ms 随机下标的一个div 改变成随机颜色
最新推荐文章于 2022-05-28 13:03:58 发布
关键词由CSDN通过智能技术生成