ボタンをクリックして、任意の色、サイズ、位置の円をランダムに生成します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* #box {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
} */
</style>
</head>
<body>
<div id="box">
</div>
<button id="btn">点击随机生成颜色高度位置任意的圆</button>
<script>
var boxyuan = document.getElementById('box');
var btn = document.getElementById('btn');
btn.onclick = function() {
//随机颜色
var rgb1 = Math.floor(Math.random() * 256);
var rgb2 = Math.floor(Math.random() * 256);
var rgb3 = Math.floor(Math.random() * 256);
// var rgb4 = Math.floor(Math.random() * 256);
//随机高度宽度
var Width = Math.floor(Math.random() * 1000);
console.log(Width);
//随机定位
var top_ps = Math.floor(Math.random() * 500);
var left_ps = Math.floor(Math.random() * 1000);
var code = 'rgba' + '(' + rgb1 + ',' + rgb2 + ',' + rgb3 + ')';
console.log(code);
//创建元素
var box1 = document.createElement('div');
box1.innerHTML = '我真美';
box1.style.width = Width + 'px';
box1.style.height = Width + 'px';
box1.style.borderRadius = '50%';
box1.style.backgroundColor = code;
box1.style.position = 'absolute';
box1.style.top = top_ps + 'px';
box1.style.left = left_ps + 'px';
//添加元素
boxyuan.appendChild(box1);
}
</script>
</body>
</html>