抽奖转盘HTML5

最新推荐文章于 2024-05-16 11:44:55 发布
最新推荐文章于 2024-05-16 11:44:55 发布
阅读量1w 收藏 33
点赞数 2
文章标签： H5  大转盘抽奖
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010261924/article/details/89886899
版权

html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>转盘抽奖H5</title>
  <script type="text/javascript" src="https://qd.andiff.net/script/jquery.js"></script>
  <link rel="stylesheet" href="css/typo/typo.css">
  <link rel="stylesheet" href="css/GB-canvas-turntable1.css">
  <style>
  	body{    background-image: url(images/bg.jpg);}
    .gb-turntable a.gb-turntable-btn {
      border: none;
    }
	.cc{ position:relative; left:0; right:0; margin:0 auto; top:28%; text-align:center;}
	.cc>img{ width:23rem;}
	.gb-turntable{ position:static;}
	.gb-turntable-container{ vertical-align:middle; top:2.3rem;}
	.gb-turntable-btn{ left:0; right:0; top:40%; margin:0 auto;}
  </style>
</head>
<body>
<div class="cc">
	<img src="images/11.png">
	<section id="turntable" class="gb-turntable">
			<div class="gb-turntable-container">
				<canvas class="gb-turntable-canvas" width="300" height="300px">抱歉！浏览器不支持。</canvas>
			</div>
			<a class="gb-turntable-btn" href="javascript:;">抽奖</a>
	</section> 
</div>
<script type="text/javascript" src="js/GB-canvas-turntable.js"></script>
<script type="text/javascript" defer="defer">
var prizes = [
	{text: '1元红包',img: 'images/redpacket.png'}, 
	{text: '2元红包'}, 
	{text: '3元红包'}, 
	{text: '显示器',img: 'images/display.png'}, 
	{text: '5元红宝'}, 
	{text: '6元红宝'}, 
	{text: '大彩电'}
];
	$(document).ready(function(){
		gbTurntable.init({
        id: 'turntable',
        config: function (callback) {
          // 获取奖品信息
          // callback && callback(['11元红包','2元红包','3元红包','4元红包','5元红包','6元红包']);
          callback && callback(prizes);
        },
        getPrize: function (callback) {
          // 获取中奖信息
          var num = Math.random() * prizes.length >>> 0, //奖品ID
          var chances = 3; // 可抽奖次数
          callback && callback([num, chances]);
        },
        gotBack: function (data) {
          alert('恭喜抽中' + data);
        }
      });	
	});
</script>
</body>
</html>

演示地址：：  http://qd.andiff.net/guaguale/c.html

范多伦
关注
  • 2
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
css3抽奖转盘html5,HTML5抽奖转盘-CSS3超简单版本
weixin_32721919的博客
06-23 584
网上有很多关于抽奖转盘的代码和实例，有使用JavaScript控制动画的，有使用Canvas实现的，它们思路各不相同，本文将介绍一种采用CSS3的方式来实现转盘动画效果，非常简单，只需几行代码即可实现。效果演示demo地址核心思路采用CSS3的transition(过渡效果)，给定需要旋转的元素设置transform的rotate属性的结束角度，同时添加transition-timing-func...
html5 在线抽奖,HTML5大转盘抽奖特效代码
weixin_34145350的博客
05-31 1402
var turnplate={restaraunts:[],//大转盘奖品名称colors:[],//大转盘奖品区块对应背景颜色outsideRadius:192,//大转盘外圆的半径textRadius:155,//大转盘奖品位置距离圆心的距离insideRadius:68,//大转盘内圆的半径startAngle:0,//开始角度bRotate:false//false:停止;ture:旋转}...
js实现抽奖大转盘 自定义抽奖转盘
MeverikC的博客
05-16 617
自定义抽奖转盘,解决选择困难症
超级大转盘！(html+less+js)（结尾附代码）
NanChen的博客
05-08 642
有个会议需要用到转盘抽奖，有机会赢得不同奖品。html+less和 js实现 先上效果： 旋转动画的话其实就是中的 transform 属性，改变转盘旋转的速度以及动画结束时间 JS 部分 因为数据肯定是活的，所以我们这里要把数据单独拎出来 圈里的图片可以自己查找替换 定义变量 把奖品放入这个函数中 抽奖部分 转盘转动角度 完整代码： 结尾 当然中什么可以自己根据id控制中什么（我中不了奖就是有黑幕！）
html5 音乐转盘,抽奖转盘HTML5
weixin_36204727的博客
06-03 213
转盘抽奖H5body{ background-image: url(images/bg.jpg);}.gb-turntable a.gb-turntable-btn {border: none;}.cc{ position:relative; left:0; right:0; margin:0 auto; top:28%; text-align:center;}.cc>img{ wid...
css3抽奖转盘html5,HTML5 抽奖转盘 - CSS3 超简单版本
weixin_28895791的博客
06-23 152
HTML5 抽奖转盘 - CSS3 超简单版本核心思路采用 CSS3 的 transition(过渡效果), 给定需要旋转的元素设置 transform 的 rotate 属性的结束角度, 同时添加 transition-timing-function 来控制旋转的速率包括起始速率和结束速率, 代码如下 (浏览器前缀可自行添加):#pointer {transition:transform6.5s...
html5画抽奖转盘,HTML5抽奖转盘-CSS3超简单版本
weixin_39992665的博客
06-15 264
核心思路采用CSS3的transition(过渡效果)，给定需要旋转的元素设置transform的rotate属性的结束角度，同时添加transition-timing-function来控制旋转的速率包括起始速率和结束速率，代码如下(浏览器前缀可自行添加)：#pointer {transition: transform 6.5s;transition-timing-function: ease-...
html 转盘抽奖开发,html 大转盘抽奖
weixin_42415491的博客
06-09 882
【实例简介】一共4套html抽奖源码一共4套html抽奖源码js九空格抽奖代码大转盘抽奖注解一共4套html抽奖源码一共4套html抽奖源码【实例截图】【核心代码】抽奖源码└── 抽奖源码├── choujiang│ ├── 22.html│ ├── choujiang.html│ ├── choujiang.png│ ├── img│ │ └── choujiang│...
如何绘制抽奖转盘html,利用canvas实现抽奖转盘
weixin_34536193的博客
06-19 774
之前做过的项目中，有需要抽奖转盘功能的。项目已经完工一段时间了，也没出现什么严重的bug，所以现在拎出来分享给大家。功能需求 转盘要美观，转动效果流畅。 转盘上需要显示奖品图片，并且奖品是后台读取的照片和名字。 转动动画完成后要有相应提示。 获取的奖品具体算法在数据库里操作，前端只提供最后的效果展示。 知识要点 引用了一个jq插件：awardRotate，用来实现更智能化的转动(插件下载：ht...
简单的转盘抽奖html,HTML5抽奖转盘-CSS3超简单版本
weixin_42176827的博客
06-07 1370
网上有很多关于抽奖转盘的代码和实例，有使用JavaScript控制动画的，有使用Canvas实现的，它们思路各不相同，本文将介绍一种采用CSS3的方式来实现转盘动画效果，非常简单，只需几行代码即可实现。效果演示核心思路采用CSS3的transition(过渡效果)，给定需要旋转的元素设置transform的rotate属性的结束角度，同时添加transition-timing-function来控...
html5转盘抽奖特效代码
03-20
在这个抽奖转盘的例子中，我们可能会创建一个圆形的转盘，用不同的颜色或图案表示不同的奖项，并在中心设置一个指针。 接下来，我们来看转盘抽奖的实现过程： 1. **初始化画布**：在JavaScript中，首先获取到`...
html5转盘抽奖代码
05-01
HTML5转盘抽奖代码是一种利用HTML5的Canvas技术构建的互动抽奖应用。Canvas是HTML5的一个重要特性，它允许开发者在网页上绘制图形，提供了丰富的动态图像和交互性功能。在这个实例中，转盘抽奖代码主要用于创建一个...
html5大转盘小游戏，抽奖转盘游戏
05-27
html5大转盘小游戏，抽奖转盘游戏html5大转盘小游戏，抽奖转盘游戏html5大转盘小游戏，抽奖转盘游戏html5大转盘小游戏，抽奖转盘游戏html5大转盘小游戏，抽奖转盘游戏html5大转盘小游戏，抽奖转盘游戏html5大转盘小...
html5 转盘抽奖源码
06-21
在这个"html5 转盘抽奖源码"项目中，开发者利用HTML5的特性，结合jQuery库，构建了一个互动式的转盘抽奖功能，适用于手机端，为用户带来独特的参与体验。 首先，让我们了解一下HTML5在其中发挥的作用。HTML5引入了...
html5 抽奖转盘
10-14
这个"html5 抽奖转盘"项目是利用HTML5的特性来创建一个互动的抽奖转盘，非常适合新手学习和参考。在HTML5中，我们可以使用Canvas元素来实现动态的、图形丰富的界面，抽奖转盘就是这样一个典型的例子。 Canvas是...
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
最新发布
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值