一款界面十分美观的手机移动端H5响应式转盘抽奖游戏代码,点击转盘抽奖按钮指针,转盘即会转动,中奖会弹出奖品,可以自定义转盘里面奖品图片。搞微信活动时可以用到。
核心js代码
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>
<script>
Vue.component('my-component', {
template: '#my-component',
props: {
gift: Array,
},
});
var vue = new Vue({
el:"#app",
data:{
if_tc:false, //弹窗是否显示
t_type: "", //弹窗类型
gifts:[
{
pic:'gift1',
name:'100M',
angles:''
},
{
pic:'gift2',
name:'200M',
angles:''
},
{
pic:'gift3',
name:'300M',
angles:''
},{
pic:'gift4',
name:'400M',
angles:''
},
{
pic:'gift5',
name:'500M',
angles:''
},{
pic:'gift6',
name:'600M',
angles:''
},
{
pic:'gift7',
name:'700M',
angles:''
},
{
pic:'gift8',
name:'800M',
angles:''
}
], //奖品
result_gift_name:'', //中奖奖品名
result_gift_pic:'', //中奖奖品图片
a_bg:'images/bg.jpg', //背景
a_top:'images/top.png', //顶部图
a_zhuanpan_bg:'images/zhuanpan-bg.png',//转盘背景
a_zhuanpan:'images/zhuanpan.png',//转盘图
a_start:'images/start-btn.png',//开始按钮
a_bottom:'images/bottom.png',//底部图
a_rule:'images/rule-show.png',//活动规则图
a_my:'images/my.png',//我的奖品图
a_gift:'images/gift-bg.png' //奖品弹窗
},
mounted:function () {
this.fangxiang();
},
computed:{
},
methods:{
fangxiang:function () {
var vm = this,
gift_l = vm.gifts.length,
every_angle = Math.floor(360/gift_l);
for(var i = 0;i<gift_l;i++){
vm.gifts[i].angles = every_angle/2 + every_angle*i;
}
},
start:function () {
var vm = this,
gift_l = vm.gifts.length,
every_angle = Math.floor(360/gift_l);
var bRotate = false;
var rotateFn = function (awards, angles, txt){
bRotate = !bRotate;
$('#rotate').stopRotate();
$('#rotate').rotate({
angle:0,
animateTo:angles+1800,
duration:8000,
callback:function (){
vm.result_gift_name = txt;
vm.result_gift_pic = 'images/p'+(awards+1)+'.png';
vm.t_type='gift';
vm.if_tc = true;
bRotate = !bRotate;
}
})
};
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791