html5 音乐转盘,抽奖转盘HTML5

转盘抽奖H5

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;}

抱歉！浏览器不支持。

抽奖

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);

}

});

html5 音乐转盘,抽奖转盘HTML5相关推荐

简单的转盘抽奖html,HTML5抽奖转盘-CSS3超简单版本
网上有很多关于抽奖转盘的代码和实例,有使用JavaScript控制动画的,有使用Canvas实现的,它们思路各不相同,本文将介绍一种采用CSS3的方式来实现转盘动画效果,非常简单,只需几行代码即可实现 ...
基于vue+html5实现九宫格抽奖转盘原理及源码
先说下动态跑马灯九宫格抽奖转盘应用场景,基于很多活动页面都常用,积分抽奖兑换等.九宫格html+css排版样式这里就不多说了. 实现原理: 跑马灯:用2个Png背景图片做css3帧切换动画. 中奖数组 ...
html5音乐和歌词同步,HTML5实现歌词同步
开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签. audio标签实现一 ...
html5音乐播放时间监测,html5 video如何实现实时监测当前播放时间（代码）
这篇文章给大家介绍的内容是关于html5 video如何实现实时监测当前播放时间(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. html:Your browser does ...
html5 手机随机抽奖,利用HTML5的devicemotion事件实现手机摇一摇抽奖，年会抽奖
1 2 3 4 5 6 摇一摇抽奖 7 8 html,body{width:100%;height:100%;background-color:#000;margin:0;overflow:hidde ...
实现html5音乐的自动播放,html5中audio实现播放列表和自动播放
var count = 43; //一共多少MP3文件 var index = '18.mp3'; // 初始化播放那个文件 window.onload = function(){ var audio ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
Web 年会抽奖系统(转盘抽奖、图片抽奖)可设置
1.转盘抽奖转盘的实现: 参考:点我设置界面: 2.图片抽奖设置界面: 照片跑马灯实现:参考https://github.com/Topthinking/Jslottery 整个项目源码地址:h ...
h5php大转盘抽奖,html5的非常简单圆形转盘抽奖代码
html5的非常简单圆形转盘抽奖代码非常简单的html5 canvas实现的圆形转盘抽奖代码,无需jQuery就可以实现的抽奖转盘特效. var fillStyle = ['rgb(255,154, ...
手机抽奖页面代码html,html5大转盘抽奖支持手机转盘抽奖代码
特效描述:html5 大转盘抽奖支持手机转盘抽奖代码.html5转盘,html5抽奖,手机转盘,手机抽奖,手机转盘抽奖,可配置奖品抽奖. 代码结构 1. 引入CSS 2. 引入JS 3. HTML ...

html5 音乐转盘,抽奖转盘HTML5

html5 音乐转盘,抽奖转盘HTML5相关推荐

最新文章

热门文章