JS动态转盘可手动设置份数与概率(详细介绍)

news2024/11/7 15:33:44

这个案例是我老师布置的一项作业,老师已详细讲解,本人分享给大家,详细为你们介绍如何实现。
我们转盘使用线段来实现

<!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>
    <!-- boss是最大的容器 -->
    <div class="boss">
        <!-- box2是旋转需要用到的指针 -->
        <div class="box2"></div>
    </div>
    <!-- 动态设置转盘的份数 需要用到表单与按钮 -->
    份数:<input type="number" id="inputs" placeholder="请输入份数" />
    <!-- 确定按钮 行内点击事件 -->
    <button type="button" onclick="func()">确定份数</button>
    <!-- 点击开始旋转 行内点击事件-->
    <button type="button" onclick="myFunc()">点击旋转</button>
    <!-- boss1存放设置概率的表单 -->
    <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 = "<div class='box2'></div>";
        // 点击后控制概率的表单也得清空
        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>

效果图:
请添加图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1165017.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023云栖大会:揭示未来科技的璀璨星辰

翻开科技世界的崭新篇章&#xff0c;2023年的云栖大会将在星光璀璨的杭州盛大开启。这一盛会&#xff0c;是科技创新的聚集地&#xff0c;也是前沿科技展示的殿堂。每年&#xff0c;无数优秀的科技人才和业内精英汇聚于此&#xff0c;共同探讨科技的未来趋势和人类发展的无限可…

编写shell脚本,利用mysqldump实现MySQL数据库分库分表备份

查看数据和数据表 mysql -uroot -p123456 -e show databases mysql -uroot -p123456 -e show tables from cb_d 删除头部Database和数据库自带的表 mysql -uroot -p123456 -e show databases -N | egrep -v "information_schema|mysql|performance_schema|sys"编写…

【Java 进阶篇】Java ServletContext详解:在Web应用中获取全局信息

在Java Web开发中&#xff0c;ServletContext是一个重要的概念&#xff0c;它允许我们在整个Web应用程序中共享信息和资源。本篇博客将深入探讨ServletContext的作用、如何获取它&#xff0c;以及如何在Web应用中使用它。无论您是刚刚入门的小白还是有一定经验的开发者&#xf…

QML WebEngineView 调用 JavaScript

作者: 一去、二三里 个人微信号: iwaleon 微信公众号: 高效程序员 在 QML 与 Web 混合开发时,除了使用 WebEngineView 加载网页之外,我们还可以在 QML 层运行 JavaScript 代码,这样就能更灵活地操作浏览器窗口和网页内容,从而实现丰富的交互功能了。例如:获取网页标题、…

【JavaEE初阶】 初识网络原理

文章目录 &#x1f332;网络发展史&#x1f6a9;独立模式&#x1f6a9;网络互连&#x1f4cc;局域网LAN&#x1f388;基于网线直连&#x1f388;基于集线器组建&#x1f388;基于交换机组建&#x1f388;基于交换机和路由器组建 &#x1f4cc;广域网WAN &#x1f340;网络通信基…

人工智能与脑机接口:开启人机融合的新时代

人工智能与脑机接口&#xff1a;开启人机融合的新时代 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;我们正与一个全新的时代相遇——人工智能与脑机接口相融合的时代。这个时代将带来前所未有的变革&#xff0c;让人类与机器的交互方式发生根本性的改变。…

洒洒水阿萨阿萨

1. 多表查询 多表查询(也叫关联查询, 联结查询): 可以用于检索涉及到多个表的数据. 使用关联查询, 可以将两张或多张表中的数据通过某种关系联系在一起, 从而生成需要的结果集.前提条件: 这些一起查询的表之间它们之间一定是有关联关系.# 先熟悉一下三张表: -- 1. 员工表(11个…

微信小程序快速备案的通道揭秘方法

随着国家政策的调整&#xff0c;微信小程序备案已变得刻不容缓。传统备案路径较为繁琐&#xff0c;耗时较长&#xff0c;为解决此痛点&#xff0c;今天我们将揭示一个快速备案的新通道。 步骤1&#xff1a;探索智慧助手 打开微信&#xff0c;探索“智慧商家服务助手”公众号。…

阿里云OS系统Alibaba Cloud Linux 3系统的安全更新命令

给客户部署的服务&#xff0c;进入运维阶段&#xff0c;但是经常被客户监测到服务器漏洞&#xff0c;现在整理一下&#xff0c;服务器漏洞问题更新命令步骤。 服务器系统&#xff1a; 阿里云linux服务器&#xff1a;Alibaba Cloud Linux 3 漏洞类型和描述&#xff1a; #3214…

[ASP]校无忧在线考试系统 v3.7

校无忧在线考试系统采用互联网技术,快速搭建在线考试系统平台,全面实现了考试工作的网络化、无纸化、自动化。系统操作简单,题型丰富,广泛用于企事业单位,学校教育培训机构等在线考试,网络考试,在线考核…… 系统主要功能&#xff1a; 1、设置基本考试系统信息(开通/关闭考试等…

听GPT 讲Rust源代码--library/std(12)

题图来自 Decoding Rust: Everything You Need to Know About the Programming Language[1] File: rust/library/std/src/os/watchos/mod.rs 该文件&#xff08;rust/library/std/src/os/watchos/mod.rs&#xff09;的作用是为Rust标准库提供支持WatchOS操作系统的特定功能。 W…

【JVM经典面试题(五十二道)】

文章目录 JVM经典面试题&#xff08;五十二道&#xff09;引言1.什么是JVM 内存管理2.能说一下JVM的内存区域吗&#xff1f;3.说一下JDK1.6、1.7、1.8内存区域的变化&#xff1f;4.为什么使用元空间替代永久代作为方法区的实现&#xff1f;5.对象创建的过程了解吗&#xff1f;6…

这两天公司面了一个字节来的要求月薪23K,明显感觉他背了很多面试题...

最近有朋友去字节面试&#xff0c;面试前后进行了20天左右&#xff0c;包含4轮电话面试、1轮笔试、1轮主管视频面试、1轮hr视频面试。 据他所说&#xff0c;80%的人都会栽在第一轮面试&#xff0c;要不是他面试前做足准备&#xff0c;估计都坚持不完后面几轮面试。 其实&…

k8s-服务网格实战-入门Istio

istio-01.png 背景 终于进入大家都比较感兴趣的服务网格系列了&#xff0c;在前面已经讲解了&#xff1a; 如何部署应用到 kubernetes服务之间如何调用如何通过域名访问我们的服务如何使用 kubernetes 自带的配置 ConfigMap 基本上已经够我们开发一般规模的 web 应用了&#xf…

【克隆方法+深浅拷贝】

文章目录 前言Clonable 接口克隆方法代码的实现 浅拷贝深拷贝总结 前言 Clonable 接口 克隆方法代码的实现 //1.当类要调用克隆方法时&#xff0c;这个类要实现一个Cloneable接口 class Student implements Cloneable{public String name;public int age;public Student(Str…

软件测试/测试开发丨ChatGPT能否成为PPT最佳伴侣

点此获取更多相关资料 简介 PPT 已经渗透到我们的日常工作中&#xff0c;无论是工作汇报、商务报告、学术演讲、培训材料都常常要求编写一个正式的 PPT&#xff0c;协助完成一次汇报或一次演讲。PPT相比于传统文本的就是有布局、图片、动画效果等&#xff0c;可以给到观众更好…

使用IDEA生成JavaDoc文档(IDEA2023)

1、Tool-->Generate JavaDoc 2、配置生成JavaDoc文档 1、选择生成范围&#xff0c;可以根据需要选择单独一个文件或者包&#xff0c;也可以是整个项目 2、输出目录&#xff0c;要把JavaDoc文档生成在哪个文件中&#xff0c;最好新建一个文件夹结束 3、Local&#xff1a;…

云计算的思想、突破、产业实践

文章目录 &#x1f4d5;我是廖志伟&#xff0c;一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、清华大学出版社签约作者、产品软文创造者、技术文章评审老师、问卷调查设计师、个人社区创始人、开源项目贡献者。&#x1f30e;跑过十五…

解决爬虫在重定向(Redirect)情况下,URL没有变化的方法

重定向是一种网络服务&#xff0c;它可以实现从一个网页跳转到另一个网页的功能。它把用户请求的网页重定向到一个新的位置&#xff0c;而这个位置可以是更新的网页&#xff0c;或最初请求的网页的不同版本。另外&#xff0c;它还可以用来改变用户流量&#xff0c;当用户请求某…

SpringCloud Alibaba 【四】Openfeign

Openfeign配置与使用 前言介绍openfeign使用openfeign导入依赖启动类正式使用测试结果 前言 在springcloud中消费者项目需要调用提供者项目的接口&#xff0c;一开始用的是RestTemplate中的方法。但是RestTemplate进行远程调用时&#xff0c;直接调用controller层的接口&#…