本文主要是介绍抽奖转盘HTML5，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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, //奖品IDvar chances = 3; // 可抽奖次数callback && callback([num, chances]);},gotBack: function (data) {alert('恭喜抽中' + data);}}); });
</script>
</body>
</html>
演示地址：： http://qd.andiff.net/guaguale/c.html
这篇关于抽奖转盘HTML5的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
