基于javascript的可以自定义设置圆几等份的抽奖示例

基于javascript的可以自定义设置圆几等份的抽奖示例

    • 效果示例图
    • 代码示例
    • 使用class

效果示例图

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {padding: 0px;margin: 0px;box-sizing: border-box;}.cricle-wrap {border: 1px solid red;border-radius: 50%;width: 400px;height: 400px;margin: 50px auto;position: relative;}.min-cricle {border-radius: 50%;width: 10px;height: 10px;background-color: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.cricle-line {width: 50%;height: 1px;background-color: red;position: absolute;top: 50%;left: 50%;/** 默认情况下，元素的动作参考点为元素盒子的中心 * 使用transform-origin改变元素原点位置* :center center (正中)它以我的线的中间为圆点，进行旋转* :left center (靠左居中) 它以我的线的左边为圆点，进行旋转，即我的线的最左点是固定的，来旋转* :right center (靠右居中) 它以我的线的左右边为圆点，进行旋转，即我的线的最右点是固定的，来旋转*/transform-origin: left center;}.cricle-angle {width: 50%;height: 0;position: absolute;top: 50%;left: 50%;transform-origin: left center;}.cricle-angle-children {width: 100%;height: 100%;position: relative;}.grandson {border: 1px solid red;width: 50px;height: 30px;position: absolute;top: 50%;transform: translateY(-50%) rotate(90deg);text-align: center;line-height: 30px;font-size: 12px;}.arrow {border: 1px solid red;border-radius: 50%;width: 60px;height: 60px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(0deg);line-height: 60px;text-align: center;z-index: 1;background-color: #fff;background-image: url("img/arrow.png");background-position: center;background-repeat: no-repeat;background-size: 100% 100%;}.add-transition {transition: all 3s ease-in-out;}#draw {display: block;width: 100px;height: 40px;margin: 12px auto;}</style></head><body><div class="cricle-wrap" id="cricle"><!-- 圆点 --><div class="min-cricle"></div><!-- 箭头 --><div class="arrow"></div></div><button id="draw">抽检</button></body><script type="text/javascript">const options = {cricleBox: document.querySelector("#cricle"), //获取当前圆count: 9, //圆被均等分成n份radius: 200, //圆的半径prizeDisc: 10, //奖品所在位置0-50,值越小，距离圆心越远}turntable();function turntable() {//每一块的弧度const angle = 360 / options.count;for (let i = 0; i < options.count; i++) {let rotateAngle = i * angle;const scaleMark = createScaleMark(rotateAngle)options.cricleBox.appendChild(scaleMark);const prize = createPrize(rotateAngle, angle, i);options.cricleBox.appendChild(prize);}/*** 创建刻度线* **/function createScaleMark(rotateAngle) {const divs = document.createElement("div");divs.classList.add("cricle-line");divs.style.transform = `rotate(${rotateAngle-90}deg)`return divs}/*** 创建奖品块* **/function createPrize(rotateAngle, skewAngle, i) {const prizes = document.createElement("div");prizes.classList.add("cricle-angle");const childrenDIvs = document.createElement("div");childrenDIvs.classList.add("cricle-angle-children");const grandson = document.createElement("div");grandson.classList.add("grandson");grandson.style.right = `${options.prizeDisc}%`grandson.innerText = (i + 1) + '等奖';childrenDIvs.appendChild(grandson)prizes.appendChild(childrenDIvs)prizes.style.transform = `rotate(${rotateAngle-90+(skewAngle/2)}deg)`return prizes}}//中奖号码let winningNumber = 0;//箭头旋转的角度let rotate = 0;//点击抽奖按钮const arrow = document.querySelector(".arrow");document.querySelector("#draw").addEventListener("click", () => {winningNumber = Math.floor(Math.random() * options.count) + 1;rotateTurntable(winningNumber);})function rotateTurntable(n) {//每一块的弧度const angle = 360 / options.count;const skewAngle = angle / 2;rotate += n * angle - skewAngle + 360 * 10 + (360 - rotate % 360);arrow.classList.add("add-transition");arrow.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`;}//监听动画是否结束arrow.addEventListener("transitionend", () => {console.log("[动画结束]")console.log("[中奖号码]", winningNumber)arrow.classList.remove("add-transition");arrow.style.transform = `translate(-50%, -50%) rotate(${rotate}deg)`;})</script>
</html>

使用class

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {padding: 0px;margin: 0px;box-sizing: border-box;}.cricle-wrap {border: 1px solid red;border-radius: 50%;width: 400px;height: 400px;margin: 50px auto;position: relative;}.min-cricle {border-radius: 50%;width: 10px;height: 10px;background-color: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.cricle-line {width: 50%;height: 1px;background-color: red;position: absolute;top: 50%;left: 50%;/** 默认情况下，元素的动作参考点为元素盒子的中心 * 使用transform-origin改变元素原点位置* :center center (正中)它以我的线的中间为圆点，进行旋转* :left center (靠左居中) 它以我的线的左边为圆点，进行旋转，即我的线的最左点是固定的，来旋转* :right center (靠右居中) 它以我的线的左右边为圆点，进行旋转，即我的线的最右点是固定的，来旋转*/transform-origin: left center;}.cricle-angle {width: 50%;height: 0;position: absolute;top: 50%;left: 50%;transform-origin: left center;}.cricle-angle-children {width: 100%;height: 100%;position: relative;}.grandson {border: 1px solid red;width: 50px;height: 30px;position: absolute;top: 50%;transform: translateY(-50%) rotate(90deg);text-align: center;line-height: 30px;font-size: 12px;}.arrow {border: 1px solid red;border-radius: 50%;width: 60px;height: 60px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(0deg);line-height: 60px;text-align: center;z-index: 1;background-color: #fff;background-image: url("img/arrow.png");background-position: center;background-repeat: no-repeat;background-size: 100% 100%;}.add-transition {transition: all 3s ease-in-out;}#draw {display: block;width: 100px;height: 40px;margin: 12px auto;}</style></head><body><div class="cricle-wrap" id="cricle"><!-- 圆点 --><div class="min-cricle"></div><!-- 箭头 --><div class="arrow"></div></div><button id="draw">抽检</button></body><script type="text/javascript">class Turntable {//中奖号码winningNumber = 0;//箭头旋转的角度rotate = 0;static OPTIONS = {cricleBox: document.querySelector("#cricle"), //获取当前圆arrow: document.querySelector(".arrow"), //箭头的按钮prizeBtn: document.querySelector("#draw"), //抽奖按钮count: 5, //圆被均等分成n份radius: 200, //圆的半径prizeDisc: 10, //奖品所在位置0-50,值越小，距离圆心越远success: null}constructor(options) {this.options = Object.assign({}, Turntable.OPTIONS, options);this.init();}init() {//每一块的弧度const angle = 360 / this.options.count;for (let i = 0; i < this.options.count; i++) {let rotateAngle = i * angle;const scaleMark = this.createScaleMark(rotateAngle)this.options.cricleBox.appendChild(scaleMark);const prize = this.createPrize(rotateAngle, angle, i);this.options.cricleBox.appendChild(prize);}this.clickEvent();}/*** 创建刻度线* rotateAngle :旋转的角度* **/createScaleMark(rotateAngle) {const divs = document.createElement("div");divs.classList.add("cricle-line");divs.style.transform = `rotate(${rotateAngle-90}deg)`return divs}/*** 创建奖品块* rotateAngle :旋转的角度* skewAngle:偏移量的角度* **/createPrize(rotateAngle, skewAngle, i) {const prizes = document.createElement("div");prizes.classList.add("cricle-angle");const childrenDIvs = document.createElement("div");childrenDIvs.classList.add("cricle-angle-children");const grandson = document.createElement("div");grandson.classList.add("grandson");grandson.style.right = `${this.options.prizeDisc}%`grandson.innerText = (i + 1) + '等奖';childrenDIvs.appendChild(grandson)prizes.appendChild(childrenDIvs)prizes.style.transform = `rotate(${rotateAngle-90+(skewAngle/2)}deg)`return prizes}/*** 点击抽奖，事件处理* **/clickEvent() {this.options.prizeBtn.addEventListener("click", () => {this.winningNumber = Math.floor(Math.random() * this.options.count) + 1;this.rotateTurntable(this.winningNumber);})//监听动画是否结束this.options.arrow.addEventListener("transitionend", () => {console.log("[动画结束]")this.options.arrow.classList.remove("add-transition");this.options.arrow.style.transform = `translate(-50%, -50%) rotate(${this.rotate}deg)`;this.options.success && this.options.success(this.winningNumber)})}/*** 转动箭头到指定奖品* **/rotateTurntable(n) {//每一块的弧度const angle = 360 / this.options.count;const skewAngle = angle / 2;this.rotate += n * angle - skewAngle + 360 * 10 + (360 - this.rotate % 360);this.options.arrow.classList.add("add-transition");this.options.arrow.style.transform = `translate(-50%, -50%) rotate(${this.rotate}deg)`;}}new Turntable({cricleBox: document.querySelector("#cricle"), //获取当前圆arrow: document.querySelector(".arrow"), //箭头的按钮prizeBtn: document.querySelector("#draw"), //抽奖按钮count: 9, //圆被均等分成n份radius: 200, //圆的半径prizeDisc: 10, //奖品所在位置0-50,值越小，距离圆心越远success: (response) => {console.log(`${response}等奖`)}});</script>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

60题学会动态规划系列：动态规划算法第五讲

60题学会动态规划系列：动态规划算法第五讲

子数组系列题目 文章目录 1.最大子数组和2.环形子数组的最大和3.乘积最大数组4.乘积为正数的最长子数组长度5.等差数列划分6.最长湍流子数组7.单词拆分8.环绕字符串中唯一的子字符串 1.最⼤⼦数组和 力扣链接&#xff1a;力扣 给你一个整数数组 nums &#xff0c;请你找出一个…
阅读更多...
数据库开发和数据库管理有什么区别？

数据库开发和数据库管理有什么区别？

数据库开发&#xff08;Database Development&#xff09;和数据库管理&#xff08;Database Administration&#xff09;是数据库领域中的两个关键角色和职责。 我这里刚好有嵌入式、单片机、plc的资料需要可以私我或在评论区扣个6 数据库开发人员专注于以下方面&#xff1a…
阅读更多...
[RocketMQ] Broker 消息刷盘服务源码解析 (十二)

[RocketMQ] Broker 消息刷盘服务源码解析 (十二)

同步刷盘: 在消息真正持久化至磁盘后RocketMQ的Broker端才会真正返回给Producer端一个成功的ACK响应。异常刷盘: 能够充分利用OS的PageCache的优势, 只要消息写入PageCache即可将成功的ACK返回给Producer端。消息刷盘采用后台异步线程提交的方式进行, 降低了读写延迟和提高了MQ…
阅读更多...
chatglm 130B：两个主要的稳定训练方法

chatglm 130B：两个主要的稳定训练方法

解决方案&#xff1a;Qk转置的时候先用单精度来算&#xff0c;softmax的时候再转成FP16 第二个&#xff1a;embeddding 层梯度存在 emdedding层的梯度跟其它层的梯度表示范围相差的非常大&#xff0c;然后会导致这个对损失函数的这个缩放有一定的影响&#xff0c;为了解决这…
阅读更多...
MATLAB 基于NDT的点云配准实验（不同参数效果） （25）

MATLAB 基于NDT的点云配准实验（不同参数效果） （25）

MATLAB 基于NDT的点云配准实验（不同参数效果） （25） 一、算法简介二、具体使用1.代码（注释详细）2.结果（不同参数 与ICP比较）一、算法简介 NDT点云配准与ICP一样，都是经典的点云配准算法，这里使用MATLAB进行ndt点云配准，对配准结果进行显示，并尝试不同参数，得到较好…
阅读更多...
Spring学习笔记---SpringBoot快速入门

Spring学习笔记---SpringBoot快速入门

Spring学习笔记---SpringBoot快速入门 Spring学习笔记---SpringBoot1 SpringBoot简介1.1 SpringBoot快速入门1.1.1 开发步骤1.1.1.1 创建新模块1.1.1.2 创建 Controller1.1.1.3 启动服务器1.1.1.4 进行测试 1.1.2 对比1.1.3 官网构建工程1.1.3.1 进入SpringBoot官网1.1.3.2 选择…
阅读更多...
MachineLearningWu_13_AGI

MachineLearningWu_13_AGI

AGI的全称是artificial general intelligence&#xff0c;通用人工智能&#xff0c;而我们现在做的关于医学影像的分析&#xff0c;可以说完全是ANI。 而我们使用MLP对于大脑中神经网络的模拟更是完全不同于人类大脑的行为。
阅读更多...
Css:高级技巧

Css:高级技巧

1.精灵图使用 用ps的切片功能测量图片大小和位置 2.字体图标 3.CSS三角形 4.元素显示隐藏 5.鼠标样式 6.输入框input 轮廓线 7.防止文本域拖拽 8 vertical-align实现行内块和文字垂直居中对齐 9.单行文字溢出省略号显示 10.多行文字溢出省略号显示 11.布局技巧 1.相对定位会压…
阅读更多...
(SVN+SSH)搭建SVN并使用SSH进行免密拉取推送代码

(SVN+SSH)搭建SVN并使用SSH进行免密拉取推送代码

【SVNSSH】搭建SVN并使用SSH进行免密拉取推送代码 一、安装svn、openssh-server服务二、开启svn服务&#xff0c;创建测试仓库&#xff0c;并能通过账号密码拉取定义svn仓库文件位置创建仓库:acc_repo配置拉取仓库的账号密码通过账号密码拉取代码 三、创建测试仓库&#xff0c;…
阅读更多...
Docker笔记 Dockerfile镜像原理以及制作镜像

Docker笔记 Dockerfile镜像原理以及制作镜像

1. Docker 镜像原理 思考&#xff1a; Docker镜像本质是什么&#xff1f; 答&#xff1a;是一个分层的文件系统。Docker中一个centos镜像为什么只有200MB&#xff0c;而一个centos操作系统的iso文件要几个G&#xff1f; 答&#xff1a;Centos的iso镜像包含bootfs和rootfs&…
阅读更多...
【网络】IP协议

【网络】IP协议

目录 感性理解 IP协议报头 解包分用 分片与组装 网段划分 为什么要进行网段划分 感性理解网段划分 特殊IP地址IP地址的数量限制 私有IP地址和公网IP地址 路由 感性理解 1.在之前的文章中介绍了TCP协议&#xff0c;TCP提供了可靠传输的一系列策略&#xff08;如&#…
阅读更多...
分布式锁【数据库乐观锁实现的分布式锁、Zookeeper分布式锁原理、Redis实现的分布式锁】(三)-全面详解（学习总结---从入门到深化）

分布式锁【数据库乐观锁实现的分布式锁、Zookeeper分布式锁原理、Redis实现的分布式锁】(三)-全面详解（学习总结---从入门到深化）

目录 分布式锁解决方案_数据库乐观锁实现的分布式锁 分布式锁解决方案_Redis实现的分布式锁原理 分布式锁解决方案_Redis实现的分布式锁 分布式锁解决方案_Redis分布式锁误删除问题 分布式锁解决方案_Redis分布式锁不可重入问题 分布式锁解决方案_基于Redisson实现的分布式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023