JS动态转盘可自由设置个数与概率

让我为大家介绍一下转盘的实现过程与原理,介绍都放在下面代码块中,一步一步的教会你。
我们转盘使用线段来实现

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <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>
<script type="text/javascript">
    // 获取input表单
    var inputs = document.getElementById("inputs");
    // 获取boss容器
    var boss = document.querySelector(".boss");
    // 获取存放概率表单的boss1
    var boss1 = document.querySelector(".boss1");
    var num = 0;
    // 点击确定分成多少等份
    function func() {
        // 点击后会清空设置好的份数 但我们的指针不能删除
        boss.innerHTML = "
"
; // 点击后控制概率的表单也得清空 boss1.innerHTML = ""; // 把inputs.value也就是控制份数的表单的value值存到num中 num = inputs.value; // 判断 如果我表单中输入了1那么就返回 if (num <= 1) { return; } // 循环创建线段 转盘的份数 小于我表单输入的数字 因为是从0开始循环 // 就不需要等于num for (var i = 0; i < num; i++) { // 创建div 相当于线段 var divs = document.createElement("div"); // 创建input表单 控制每一份的概率 var inp = document.createElement("input"); // 我们把事先准备好的box1类名添加给divs divs.className = "box1"; // 旋转的角度 360/份数 * i 就可以得出我们份数旋转到的位置 divs.style.transform = `rotate(${360 / num * i}deg)` // 我们把divs添加到boss里 boss.appendChild(divs); // 把inp添加到boss1里 boss1.appendChild(inp); } } // 存一个sum = 0 到时候控制度数 var sum = 0; // 控制点击旋转按钮不能连点 var isFlag = true // 点击旋转 function myFunc() { // 当isFlag为真时执行 if (isFlag == true) { // 创建一个新数组 存概率 如果我在第一个概率表单中输入100 就生成100个1 var arrs = []; var nums = 0; // 获取指针 var box2 = document.querySelector(".box2"); // 获取控制概率的表单的集合 var boss1_inp = document.querySelectorAll(".boss1 input"); // 循环 j<概率表单的长度 for (var j = 0; j < boss1_inp.length; j++) { // 使用我们事先准备好的nums += 概率表单总体的概率总和 // 我们需要把概率表单中的字符串变为Number 要不然就是字符串拼接了 nums += Number(boss1_inp[j].value); // 循环添加进arrs for (var i = 0; i < boss1_inp[j].value; i++) { // j+1 如果是下标为0 且给的概率为50 就是50个1 arrs.push(j + 1) } } // 判断nums 不能大于 100 if (nums > 100) { console.log("总和值不能大于100"); alert("总和值不能大于100"); } else { // 如果小于100 给一个随机数去随机0-arrs.length范围中的数 向下取整 // 用随机下标去获取arrs数组中的元素 var aa = arrs[Math.floor(Math.random() * arrs.length)]; // 随机的角度 要不然指针一直指向一个地方 var bb = Math.floor(Math.random() * 360 / boss1_inp.length); // sum+=1 控制连续点击 如果不设置指针会从最开始的地方再进行旋转 sum += 1; // 指针旋转角度控制概率后 // 旋转的角度 = 数组随机的值*360度/概率表单的长度+1080(先让指针旋转1080度)*连续点击的次数-随机的角度 box2.style.transform = `rotate(${aa * 360 / boss1_inp.length + 1080 * sum - bb}deg)`; } // 点击后isFlag赋值为false 就不可以连点了 isFlag = false // 这里我使用比较暴力的办法,我直接就看它的间隔时间 2s后isFlag为true // 就可以继续点击了 setTimeout(function () { isFlag = true }, 2000) } }
script> html>

效果图:
请添加图片描述

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

你可能感兴趣的:(javascript,前端,开发语言)