抽奖转盘HTML5

最新推荐文章于 2024-05-08 15:40:33 发布
最新推荐文章于 2024-05-08 15:40:33 发布
阅读量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
    评论
如何用html5制作抽奖游戏,html5实现九宫格抽奖可固定抽中某项奖品
weixin_30210749的博客
05-30 849
原生js写的一个九宫格抽奖程序 (周末在家闲着也是闲着)我写的这个抽奖是拿来整蛊我女朋友， 因为每次抽奖的结果都是同一个。。哈哈哈哈哈哈哈哈哈哈哈哈哈我会附上正常抽奖的的代码和固定只能抽到某一个的代码；HTML代码如下 ⤵️抽奖* {padding: 0;margin: 0;box-sizing: border-box;}html,body,.modal-cover {width: 100%;he...
html5转盘抽奖特效代码
03-20
在这个抽奖转盘的例子中，我们可能会创建一个圆形的转盘，用不同的颜色或图案表示不同的奖项，并在中心设置一个指针。 接下来，我们来看转盘抽奖的实现过程： 1. **初始化画布**：在JavaScript中，首先获取到`...
js+php+大转盘,JS实现简单的抽奖转盘效果示例
weixin_32242475的博客
03-21 226
本文实例讲述了JS实现简单的抽奖转盘效果。分享给大家供大家参考，具体如下：www.jb51.net JS抽奖转盘*{margin:0;padding:0;list-style: none;}.big{width: 318px;height: 318px;margin:100px auto;}.big>div{width: 100px;height: 100px;background: pin...
超级大转盘！(html+less+js)（结尾附代码）
NanChen的博客
05-08 611
有个会议需要用到转盘抽奖，有机会赢得不同奖品。html+less和 js实现 先上效果： 旋转动画的话其实就是中的 transform 属性，改变转盘旋转的速度以及动画结束时间 JS 部分 因为数据肯定是活的，所以我们这里要把数据单独拎出来 圈里的图片可以自己查找替换 定义变量 把奖品放入这个函数中 抽奖部分 转盘转动角度 完整代码： 结尾 当然中什么可以自己根据id控制中什么（我中不了奖就是有黑幕！）
纯CSS3大转盘抽奖（响应式、可配置）
weixin_30436891的博客
01-08 126
源于前段时候微信小程序最初火爆公测时段，把以前用 Canvas 实现的大转盘抽奖移植成微信小程序，无奈当时小程序对 Canvas 支持不够完善，只好降低用 CSS3 实现。虽然比不上 Canvas 绘图的绚丽，但也总算完成了一个抽奖的 Demo，详见：https://github.com/givebest/wechat-turntalbe-canvas。 事后想起，CSS3 实现也并不是...
年度技术盘点：50个最佳轻量级JavaScript框架和库
晨曦雨露的博客
12-30 4455
回顾今年已发布的JS框架和库，我们针对地筛选了一些能够提供直接和具体功能的免费JavaScript插件和库，与大家分享。它们可不是臃肿的一站式框架，而是一些轻量级，并能够帮助你更快、更容易地进行网页设计与开发的实用型框架。 正如你期望的，文中的一些插件可用来创建滑块、图片库、响应式菜单、弹出式窗口以及许多其他常见的组件。同时，你也可以发现一些能够提供独特功能的插件，像旁注工具、GIF预览、动
canvas之转盘抽奖
RedXx
07-23 1642
                                           canvas之转盘抽奖           1.    整理      大概思路  初始化各种参数 =&gt; 绘制外层(图片) =&gt; 绘制餐品背景加内容 =&gt; 点击按钮 =&gt; click事件 =&gt; 回调函数(旋转结束后执行)      初始化参数:  function ini...
jQuery实现简单抽奖大转盘
weixin_53141315的博客
03-16 668
jQuery实现简单抽奖大转盘
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大转盘抽奖特效代码
01-16
HTML5微抽奖大转盘JS特效代码，其实效果主要是用到图片旋转插件jQueryRotate.js，可动态读取奖品 效果还是非常流畅的，经常用于活动营销以及微信营销，可以参考使用。
HTML5微抽奖大转盘JS特效代码.zip
07-11
实现效果： HTML5微抽奖大转盘JS特效代码，其实效果主要是用到图片旋转插件jQueryRotate.js，可动态读取奖品效果还是非常流畅的，经常用于活动营销以及微信营销，可以参考使用。
js转盘抽奖特效
10-16
// 代码整理：懒人之家 lanrenzhijia.com /* * 删除左右两端的空格 */ function Trim(str){ return str.replace(/(^\s*)|(\s*$)/g, ""); } /* * 定义数组 */ function GetSide(m,n){ //初始化数组 var arr = []; for(var i=0;i<m;i++){ arr.push([]); for(var j=0;j<n;j++){ arr[i][j]=i*n+j; } } //获取数组最外圈 var resultArr=[]; var tempX=0, tempY=0, direction="Along", count=0; while(tempX>=0 && tempX<n && tempY>=0 && tempY<m && count<m*n) { count++; resultArr.push([tempY,tempX]); if(direction=="Along"){ if(tempX==n-1) tempY++; else tempX++; if(tempX==n-1&&tempY==m-1) direction="Inverse" } else{ if(tempX==0) tempY--; else tempX--; if(tempX==0&&tempY==0) break; } } return resultArr; } var index=0, //当前亮区位置 prevIndex=0, //前一位置 Speed=300, //初始速度 Time, //定义对象 arr = GetSide(5,5), //初始化数组 EndIndex=0, //决定在哪一格变慢 tb = document.getElementById("tb"), //获取tb对象 cycle=0, //转动圈数 EndCycle=0, //计算圈数 flag=false, //结束转动标志 quick=0; //加速 btn = document.getElementById("btn1") function StartGame(){ clearInterval(Time); cycle=0; flag=false; EndIndex=Math.floor(Math.random()*16); //EndCycle=Math.floor(Math.random()*4); EndCycle=1; Time = setInterval(Star,Speed); } function Star(num){ //跑马灯变速 if(flag==false){ //走五格开始加速 if(quick==5){ clearInterval(Time); Speed=50; Time=setInterval(Star,Speed); } //跑N圈减速 if(cycle==EndCycle+1 && index==parseInt(EndIndex)){ clearInterval(Time); Speed=300; flag=true; //触发结束 Time=setInterval(Star,Speed); } } if(index>=arr.length){ index=0; cycle++; } //结束转动并选中号码 //trim里改成数字就可以减速，变成Endindex的话就没有减速效果了 if(flag==true && index==parseInt(Trim('5'))-1){ quick=0; clearInterval(Time); } tb.rows[arr[index][0]].cells[arr[index][1]].className="playcurr"; if(index>0) prevIndex=index-1; else{ prevIndex=arr.length-1; } tb.rows[arr[prevIndex][0]].cells[arr[prevIndex][1]].className="playnormal"; index++; quick++; }
HTML5抽奖程序
09-12
html5编写的抽奖程序(3个版本)，包括抽奖的数据统计，使用了canvas,localStorage等html5技术，不需要服务器端在浏览器直接查看运行
前端抽奖转盘
02-08
使用canvas实现了前端抽奖转盘，在抽奖项目中可直接使用
html5 抽奖转盘
10-14
这个"html5 抽奖转盘"项目是利用HTML5的特性来创建一个互动的抽奖转盘，非常适合新手学习和参考。在HTML5中，我们可以使用Canvas元素来实现动态的、图形丰富的界面，抽奖转盘就是这样一个典型的例子。 Canvas是...
jQuery实现转盘抽奖效果
Jack, what else can you do besides holding your little darling?
12-06 1036
jQuery实现转盘抽奖效果

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值