HTML代码:
<style type="text/css">
.boss {
width: 400px;
height: 400px;
border: 5px solid #000;
margin: 0 auto;
border-radius: 50%;
position: relative;
}
.box1 {
width: 2px;
height: 200px;
position: absolute;
background-color: #000;
top: 0;
left: 50%;
margin-left: -1px;
transform-origin: bottom;
}
.box2 {
width: 1px;
height: 200px;
background-color: red;
position: absolute;
top: 0;
left: 50%;
transform-origin: bottom;
z-index: 99;
transition: 2s;
}
</style>
</head>
<body>
<div class="boss">
<div class="box2"></div>
</div>
份数:<input type="number" id="inputs" placeholder="请输入份数"/>
<button type="button" onclick="func()">确定份数</button>
<button type="button" onclick="myFunc()">点击旋转</button>
<div class="boss1"></div>
</body>
JS代码:
<script type="text/javascript">
var inputs = document.getElementById("inputs");
var boss = document.querySelector(".boss");
var boss1 = document.querySelector(".boss1");
// 点击确定分成多少等份
var num = 0;
function func(){
boss.innerHTML = "<div class='box2'></div>";
boss1.innerHTML = "";
num = inputs.value;
if(num<=1){
return;
}
for(var i=0;i<num;i++){
var divs = document.createElement("div");
var inp = document.createElement("input");
divs.className = "box1";
divs.style.transform = `rotate(${360/num*i}deg)`
boss.appendChild(divs);
boss1.appendChild(inp);
}
}
var sum = 0;
function myFunc(){
var arrs = [];
var nums = 0;
var box2 = document.querySelector(".box2");
var boss1_inp = document.querySelectorAll(".boss1 input");
for(var j=0;j<boss1_inp.length;j++){
nums+= Number(boss1_inp[j].value);
for(var i=0;i<boss1_inp[j].value;i++){
arrs.push(j+1)
}
}
if(nums>100){
console.log("总和值不能大于100");
alert("总和值不能大于100");
}else{
var aa = arrs[Math.floor(Math.random()*arrs.length)];
var bb = Math.floor(Math.random()*360/boss1_inp.length);
sum += 1;
box2.style.transform = `rotate(${aa*360/boss1_inp.length+1080*sum-bb}deg)`;
}
}
</script>
结果如下: