开发H5项目，有时会遇到一个需求，需要制作抽奖转盘的网页，这个实现步骤，如果拿现成的改来做是容易的，但是想着全靠自己做是不容易的，下面会讲，全靠自己做，能掌握到吗

目录一览

  • 1.设计网页
  • 2. 编写脚本
  • 3. 编写模块
  • 4. 实现方法
    • 1. 绘制转盘
    • 2. 开始抽奖
  • 4.运行效果

1.设计网页

首先创建一个网页文件，例如index.html，制作抽奖转盘页面，源代码如下，通过修改样式<style>里设置好背景色，还有转盘组件的位置，再加一个抽奖按钮，写好大概逻辑，还有需要调用的一些方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Turntable 转盘</title><style>body{background-color: #333;}.box{text-align: center;}.box #box{width: 280px;height: 280px;}.box button{margin-top: 20px;padding: 0.6em 2.5em;font-size: 1em;border-radius: 10px;border-color: rgba(0, 0, 0, 0.4);color: #fff;background: linear-gradient(#eee,#f50);}</style></head><body><div class="box"><div id="box"></div><div><button id="btnStart">抽奖</button></div></div><script type="module">import Turntable from './turntable.js';//引用模块window.onload = () => {//...加载脚本}</script></body>
</html>

2. 编写脚本

接着，写一个加载脚本的处理逻辑，代码如下，使用Turntable对象创建前，需要先引用一个模块

const t = new Turntable({window,elemId: 'box',
});
//TODO: 最多7个
const resouce = [{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '特等奖'},{image: './img/b5ff4601d9679f502f8f9e737bdd7049.jpeg',title: '谢谢惠顾'},{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '一等奖'},{image: './img/b5ff4601d9679f502f8f9e737bdd7049.jpeg',title: '谢谢惠顾'},{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '二等奖'},{image: './img/e7b2e38c8d66613d1dd869b199031d8e.jpeg',title: '三等奖'},{image: './img/b5ff4601d9679f502f8f9e737bdd7049.jpeg',title: '谢谢惠顾'},
];
//加载图片资源可能有延迟，通过异步处理
Promise.all(resouce.map((item)=>{return new Promise((resolve,reject)=>{let img = new Image();img.onload = () => {item.image = img;resolve(item);};img.onerror = reject;img.src = item.image;});
})).then((res)=>{t.draw({// mode:1,goods:res,});
});
//设置按钮点击事件
document.getElementById('btnStart').onclick = () => {t.onStart({// index: 3,//抽奖概率自己写，传入预定奖品的indexsuccess:(res)=>{// console.log('ok', res);const good = res.goods[res.index];if (good.title) {if (good.title.indexOf('奖')>=0) alert(`												


											

【JavaScript】制作一个抽奖转盘页面相关推荐
	

    
								
  1. 优秀课程案例：使用Scratch制作一个抽奖大转盘方法二！
		
    点击上面微信号关注我关注我哟每天坚持早上9:00左右推送文章,争取做到日更,喜欢的可以设置星标,并分享点赞我们的文章,非常感谢大家的支持,您的点击的在看就是我们的动力! 昨天我们分享了一个抽奖大转盘: ...
    
		
    2. 
						
  2. html旋转代码_用CSS实现一个抽奖转盘(附详细代码+思路)
		
    原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上效果 基本是用CSS实现的,没有用图片,加一丢丢JS.不过没有考虑太多兼容性. 首先画一个转盘 & ...
    
		
    3. 
						
  3. 如何用python画转盘_如何用ppt做一个抽奖转盘 看完你学会了么
		
    现在抽奖转盘是很常见的,有时候公司办活动也会有抽奖活动,如果让自己做一个抽奖转盘,应该怎么做? 操作方法 01 打开ppt,把幻灯片版式设置成空白的,然后点击插入,选择图表. 02 选择饼图,用第一种 ...
    
		
    4. 
						
  4. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
		
    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <! ...
    
		
    5. 
						
  5. 用 CSS 实现一个抽奖转盘(附详细代码+思路)
		
    关注公众号 前端开发博客,回复"加群" 加入我们一起学习,天天进步 作者:我不吃饼干呀 https://www.cnblogs.com/wenruo/p/9732704.html  ...
    
		
    6. 
						
  6. 用html实现抽奖大转盘,【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)...
		
    原标题:[项目实战]用CSS实现一个抽奖转盘(附详细代码+思路) 效果 基本是用CSS实现的,没有用图片,加一丢丢JS. 完全没有考虑兼容性. 首先画一个转盘 < htmllang= " ...
    
		
    7. 
						
  7. 用CSS实现一个抽奖转盘(附详细代码+思路)
		
    作者:我不吃饼干呀 https://www.cnblogs.com/wenruo/p/9732704.html 基本是用CSS实现的,没有用图片,加一丢丢JS.完全没有考虑兼容性. 首先画一个转盘 & ...
    
		
    8. 
						
  8. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
		
    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYP ...
    
		
    9. 
						
  9. 抽奖随机滚动_仅需2分钟，使用excel制作一个抽奖小工具，再也不用为抽奖发愁了...
		
    Hello,大家好,今天跟大家分享下我们如何使用excel制作一个抽奖工具,他的制作也非常的简单,我们先来看下效果,按住F9键就能让名字滚动起来,松开F9键后就会停止,如下图 想要实现这样的操作也非常 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 百度为AI开发者打造别样的深度学习快速通关路径
		
    2. 
						
  2. 微软向马斯克的人工智能项目OpenAI投资10亿美元
		
    3. 
						
  3. Spark详解（九）：Spark存储原理分析
		
    4. 
						
  4. 自下而上滚动公告栏（可悬停）
		
    5. 
						
  5. 1-冒泡排序C实现（递增递减的简单转换）
		
    6. 
						
  6. Angular Component TypeScript代码和最后转换生成的JavaScript代码比较
		
    7. 
						
  7. ubuntu ifconfig命令找不到_那些年踩过的坑--无法使用MobaXterm远程登录Ubuntu
		
    8. 
						
  8. window获取历史url_Facebook 开出历史最高赏金，55,000 美元奖励十年漏洞发现者
		
    9. 
						
  9. Windows 10 SSH 下载地址
		
    10. 
						
  10. 【重难点】【RabbitMQ 02】如何避免消息重复投递和消息重复消费、如何防止消息丢失、如何保证消息的顺序性、如何保证消息队列的可用性
		
    11. 
						
  11. 洛谷P1217回文质数（特判筛选，取巧判断顺序）
		
    12. 
						
  12. 【图像分割】基于matlab GUI阙值+边缘检测+区域法图像分割【含Matlab源码 817期】
		
    13. 
						
  13. python递归函数基例_函数和代码复用 --Python
		
    14. 
						
  14. python下载百度文库文档_Python百度文库爬虫之txt文件
		
    15. 
						
  15. Python学习笔记(15) 网络爬虫使用proxy实现自动换IP防封锁
		
    16. 
						
  16. Cocos Creator 使用位图工具BMFont自定义字体 fnt
		
    17. 
						
  17. 深入了解电容器，电容器有哪些主要作用?
		
    18. 
						
  18. Win 7 Office 2007，打开word出错
		
    19. 
						
  19. 怎么做无线路由跟服务器一个网段,一个宽带装两个路由器怎么设置？
		
    20. 
						
  20. 小猿圈python金角大王_小猿圈python学习-基本数据类型
		
    21. 
		

	


热门文章
	

    
									
  1. 【收藏】经典shell十三问
			
    2. 
						
  2. a标签的带参传值和form表单的带参
			
    3. 
						
  3. 支付宝扫码枪流程笔记
			
    4. 
						
  4. SAP甲方历程回顾-01  2017年转到甲方的故事~从乙方离职
			
    5. 
						
  5. onnx转ncnn的一个坑
			
    6. 
						
  6. 植物叶片相对电导率的测定
			
    7. 
						
  7. 原理 拉普拉斯金字塔_图像金字塔分层算法
			
    8. 
						
  8. awk打印除第一列之外的所有列
			
    9. 
						
  9. Android 开放配件协议 1.0
			
    10. 
						
  10. Apipost产品介绍
			
    11.