アイデア:
1。ボールを配置するボックスを作成します
2.ランダムなボールが表示される時間を記録するタイマーを定義します
3.ボールを作成し、そのスタイルを設定
します4. Math.randomを使用してボールの定義を作成しますランダムなサイズ、色と位置
5.最初に作成したボックスにこの小さなボールを追加します
スタイル
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
div .wrap {
position: relative;
}
.wrap div {
position: absolute;
border-radius: 80px;
}
<div class="wrap"></div>
jsコード
var wrap = document.getElementsByTagName('div')[0];
var timer = setInterval(randomball, 50);
var num = 0;
function randomball() {
num++;
//1创建
var div = document.createElement('div');
//随即大小
var wh = ranFun(3, 30);
div.style.width = wh + 'px';
div.style.height = wh + 'px';
//随机颜色
var r = ranFun(0, 255);
var g = ranFun(0, 255);
var b = ranFun(0, 255);
div.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ')';
//随机位置
div.style.left = ranFun(0, window.innerWidth - wh) + 'px';
div.style.top = ranFun(0, window.innerHeight - wh) + 'px';
//2追加
wrap.appendChild(div);
if (num >= 100) {
clearInterval(timer);
}
}
function ranFun(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}