当前位置： 首页 > news >正文

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

news 2026/2/8 14:37:43

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

<!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");// 获取存放概率表单的boss1var 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开始循环// 就不需要等于numfor (var i = 0; i < num; i++) {// 创建div 相当于线段var divs = document.createElement("div");// 创建input表单 控制每一份的概率var inp = document.createElement("input");// 我们把事先准备好的box1类名添加给divsdivs.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个1var 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);// 循环添加进arrsfor (var i = 0; i < boss1_inp[j].value; i++) {// j+1 如果是下标为0 且给的概率为50 就是50个1arrs.push(j + 1)}}// 判断nums 不能大于 100if (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>

效果图：
请添加图片描述

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

相关文章：

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

这个案例是我老师布置的一项作业&#xff0c;老师已详细讲解&#xff0c;本人分享给大家&#xff0c;详细为你们介绍如何实现。 我们转盘使用线段来实现 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title></title>&l…...

编程日记 2023/11/2 22:38:32

在k8s中，etcd有什么作用？

在Kubernetes&#xff08;K8s&#xff09;中&#xff0c;etcd 是一个关键的组件&#xff0c;它扮演着集群状态存储的角色&#xff0c;具有以下作用&#xff1a; 分布式键值存储&#xff1a;etcd 是一个分布式键值存储系统&#xff0c;用于存储整个 Kubernetes 集群的配置信息、…...

编程日记 2023/11/2 22:37:30

conda配置虚拟环境相关记录

#教程 创建虚拟环境 创建 conda create --name yourEnv python3.7.5--name&#xff1a;也可以缩写为-n&#xff0c;【yourEnv】是新创建的虚拟环境的名字&#xff0c;创建完&#xff0c;可以装anaconda的目录下找到envs/yourEnv 目录python3.7.5&#xff1a;是python的版本号…...

编程日记 2023/11/2 22:36:29

数据库的本质永远都不会改变基础语句(第二十二课)

JAVA与Mysql._java数据库和mysql_真正的醒悟的博客-CSDN博客...

编程日记 2023/11/2 22:35:28

Object转List＜＞，转List＜Map＜＞＞

这样就不会局限在转换到List<Map<String,Object>>这一种类型上了.可以转换成List<Map<String,V>>上等,进行泛型转换虽然多了一个参数,但是可以重载啊注: 感觉field.get(key) 这里处理的不是很好,如果有更好的办法可以留言 public static <K, V> …...

编程日记 2023/11/2 22:34:25

React使用富文本CKEditor 5，上传图片并可设置大小

上传图片 基础使用&#xff08;标题、粗体、斜体、超链接、缩进段落、有序无序、上传图片&#xff09; 官网查看&#xff1a;https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/react.html 安装依赖 npm install --save ckeditor/ckeditor5-react cked…...

编程日记 2023/11/2 22:33:24

【工具使用】批量修改文件夹的时间操作

一&#xff0c;简介 在工作过程中&#xff0c;有时需要修改文件夹的时间&#xff0c;本文分别介绍如何使用PowerShell修改文件夹的时间为指定时间或者当前时间。 二&#xff0c;操作步骤 请注意&#xff0c;在运行任何更改文件和文件夹时间的命令之前&#xff0c;请确保你有…...

编程日记 2023/11/2 22:32:23

Android Snackbar

1.Snackbar Snackbar是Material Design中的一个控件&#xff0c;用来代替Toast。Snackbar是一个类似Toast的快速弹出消息提示的控件。Snackbar在显示上比Toast丰富&#xff0c;而且提供了用户交互的接口。 ①默认情况下&#xff0c;Snackbar显示在屏幕底部&#xff0c;它出现…...

编程日记 2023/11/2 22:31:22

详解API接口如何安全的传输数据(内附商品详情API接口接入方式）

概述 API接口的安全传输是确保数据在API请求和响应之间的传输过程中不被截获、篡改或泄露的重要步骤。以下是一些用于增强API接口安全传输的常见技术和最佳实践&#xff1a; 使用HTTPS&#xff1a;使用HTTPS协议而不是HTTP&#xff0c;以确保数据在传输过程中的安全性。HTTPS使…...

编程日记 2023/11/2 22:30:21

网工内推 | 大专以上，福利待遇好，IE认证优先（云厂商）

01 主动脉科技有限公司 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1.负责云计算&#xff0c;IDC&#xff0c;BGP网络&#xff0c;通过团队协作&#xff0c;构建云业务后台技术支持服务体系。 2.通过工单、其他通讯工具等线上方式完成对客户的实施售后支持&#x…...

编程日记 2023/11/2 22:29:20

Python time strptime()和strftime()

1 strptime()方法 根据指定的格式把一个时间字符串解析为时间元组 重要的时间日期格式化符号 %y 两位数的年份表示&#xff08;00-99&#xff09; %Y 四位数的年份表示&#xff08;000-9999&#xff09; %m 月份&#xff08;01-12&#xff09; %d 月内中的一天&#xff08;0-…...

编程日记 2023/11/2 22:28:19

是谁家班主任还不知道 怎么发布期中成绩啊。

你知道吗&#xff1f;居然还有班主任不知道怎么发布期中成绩&#xff01; 发布成绩并不是一件难事&#xff0c;只需几个步骤&#xff0c;就能轻松搞定&#xff01; 给大家讲一下成绩查询是什么。成绩查询是指学生通过一定的方式&#xff0c;如输入学号、姓名等&#xff0c;在指…...

编程日记 2023/11/2 22:27:18

损失函数(Loss Function)一文详解-聚类问题常见损失函数Python代码实现+计算原理解析

损失函数(Loss Function)一文详解-聚类问题常见损失函数Python代码实现计算原理解析 前言 损失函数无疑是机器学习和深度学习效果验证的核心检验功能&#xff0c;用于评估模型预测值与实际值之间的差异。我们学习机器学习和深度学习或多或少都接触到了损失函数&#xff0c;但…...

编程日记 2023/11/2 22:26:17

测试用例设计方法 —— 场景法详解

场景法是通过运用场景来对系统的功能点或业务流程的描述&#xff0c;从而提高测试效果的一种方法。 场景法一般包含基本流和备用流&#xff0c;从一个流程开始&#xff0c;通过描述经过的路径来确定的过程&#xff0c;经过遍历所有的基本流和备用流来完成整个场景。 场景主要…...

编程日记 2023/11/2 22:25:16

el-table表格设置——动态修改表头

(1) 首先是form表单写表单设置按钮&#xff1a; &#xff08;1.1&#xff09;使用el-popover&#xff0c;你需要修改的是this.colOptions&#xff0c;colSelect: <el-popover id"popover" popper-class"planProver" placement"bottom" width&…...

编程日记 2023/11/2 22:24:15

京东数据分析：2023年9月京东洗地机行业品牌销售排行榜

鲸参谋监测的京东平台9月份洗地机市场销售数据已出炉&#xff01; 9月份&#xff0c;洗地机市场的销售额增长。根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;9月京东平台上洗地机的销量为9.2万&#xff0c;销售额将近2.2亿&#xff0c;同比增长约9%。从价格上看&#…...

编程日记 2023/11/2 22:23:14

使用 TensorFlow SSD 网络进行对象检测

使用 TensorFlow SSD 网络进行对象检测 目录 描述这个示例是如何工作的&#xff1f; 处理输入图准备数据sampleUffSSD 插件验证输出TensorRT API 层和操作 先决条件运行示例 示例 --help 选项 附加资源许可证更改日志已知问题 描述 该示例 sampleUffSSD 预处理 TensorFlow …...

编程日记 2023/11/2 22:22:13

（2）STM32单片机上位机

使用VX小程序开发上位机&#xff0c; 样式如何创建&#xff1f; 在你所在页面 开辟空间 使用 view 在view 中 输入class 就是样式&#xff0c;在编辑样式的时候&#xff0c;如何寻找哪一块的样式 就是通过这个class寻找的 按钮使用switch...

编程日记 2023/11/2 22:21:12

从InnoDB索引的数据结构，去理解索引

从InnoDB索引的数据结构&#xff0c;去理解索引 1、InnoDB 中的 BTree1.1、BTree 的组成1.2、BTree中的数据页 2、聚簇索引2.1、聚簇索引的特点2.2、聚簇索引的结构示例2.3、聚簇索引的优缺点 3、非聚簇索引3.1、非聚簇索引结构示例3.2、关于回表3.3、聚簇索引和非聚簇索引的区…...

编程日记 2023/11/2 22:20:11

Nacos：动态服务发现与配置管理的终极解决方案

今天我想和大家分享一下Nacos&#xff0c;这是一个由阿里巴巴开源的动态服务发现、配置和服务管理平台。我将详细介绍Nacos的主要特性&#xff0c;并通过实例来演示如何使用它。同时&#xff0c;我还会指出Nacos的优点&#xff0c;希望这篇文章能够帮助大家更好地理解和使用Nac…...

编程日记 2023/11/2 22:19:10

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2026/2/6 22:13:44

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2026/2/6 2:13:58