幸运大转盘抽奖（前端）

最新推荐文章于 2023-10-11 09:37:29 发布
最新推荐文章于 2023-10-11 09:37:29 发布
阅读量1.5k 收藏 5
点赞数 1
分类专栏： 抽奖 幸运大转盘 文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43862832/article/details/107228770
版权

采用Lottery.js插件, 无依赖, 简单易用（复制粘贴就能用）
效果图（可自己写算法定义概率，可自己定义奖项数量和名称）
在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<title>大转盘抽奖</title>
<style>
*{
	margin: 0;
	padding: 0;
}

#lottery-wrap{
    position: relative;
	display: block;
	margin: 150px auto;
	width: 300px;
    border: 8px solid #eac34c;
    border-radius: 50%;
    box-shadow: 3px 0 3px #fffdc9, 0px 3px 3px #fffdc9, -3px 0 3px #fffdc9, 0px -3px 3px #fffdc9;
}
canvas{
    display: block;
}

#lottery-handler{
    position: absolute;
    z-index: 2;
    width: 60px;
    height: 74px;
    left: 50%;
    top: 50%;
    margin: -44px 0 0 -30px;
    background: url(./images/handler.png) no-repeat 50%;
    background-size: contain;
}
</style>
</head>
<body style="background-color: darkkhaki;">

<div id="lottery-wrap">
    <div id="lottery-handler"></div>
    <canvas width="300" height="300" id="lottery"></canvas>
</div>

<script src="./Lottery.js"></script>
<script>

/*模拟ajax请求数据返回*/
function _ajax(callback){
	/*jQuery.ajax({
		url: url,
		data: data,
		success: function(response){
			callback && callback(response);
		}
	})*/
	setTimeout(function(){
		var _index   = Math.floor(Math.random()*4);//此处是概率，可自己写算法定义概率
		var response = {id: 1, name: products[_index].name, index: _index};
		callback && callback(response);
	}, 100);
}
//此处是定义的奖项
var products = [
    {
        "imgUrl": "./images/redpacket.png",
        "name": "10元红包"
    },
    {
        "imgUrl": "./images/redpacket.png",
        "name": "20元红包"
    },
    {
        "imgUrl": "./images/redpacket.png",
        "name": "50元红包"
    },
    {
        "imgUrl": "./images/redpacket.png",
        "name": "100元红包"
    }
];

new Lottery(document.getElementById('lottery'), {
	handler: document.getElementById('lottery-handler'),
	handlerCallback: function(_interface){
		/*ajax获取中奖结果*/
		_ajax(function(response){
			console.log(response);
			/*指定停止的位置:索引*/
			_interface.stop(response.index, function(){
				alert('恭喜你中得:' + response.name)
			});
		});
	},
    images: {
        width: 22,
        height: 29,
        y: '88%',
    },
	products: products
});

</script>
</body>
</html>


js

(function(){
/**

 * 
 * [Lottery 大转盘抽奖js插件, 无依赖, 简单易用]
 * @param  {[Dom Object]} oCanvas [canvas对象]
 * @param  {[Object]}     options [配置参数, 请参考底部的_setOptions方法中的config对象]
 */
function Lottery(){
    return this._init.apply(this, arguments);
}
Lottery.prototype = {
    _init: function(oCanvas, options){
        if(!oCanvas)return false;
        this.oCanvas  = oCanvas;
        this.options  = this._setOptions(options);
        this.size     = (this.options.products || []).length;
        this.angle    = 2 * Math.PI / this.size;
        this.sAngle   = 1.5*Math.PI - this.angle/2;
        this.ctx      = oCanvas.getContext("2d");

        this.rotate   = 0;
        /*存储图片元素*/
        this.oImages  = [];
        /*存储图片链接*/
        this.imgUrl   = [];
        this.isOver   = true;

        this._setLayout();
        this._fixOptions();

        this._draw();
        this._start();
    },
    /*修正options参数*/
    _fixOptions: function(){
        this.outerRadius   = parseInt(this.options.outerRadius) || this.radius;
        this.innerRadius   = parseInt(this.options.innerRadius) * this.options.scale || 0;
        this.options.speed = Math.min(Math.max(1, this.options.speed), 30);

        if(String(this.options.font.y).indexOf('%') > 0){
            this.options.font.y = this.outerRadius * parseInt(this.options.font.y)/100;
        }
        
        if(String(this.options.images.y).indexOf('%') > 0){
            this.options.images.y = this.outerRadius * parseInt(this.options.images.y)/100;
        }
    },
    /*重置canvas尺寸*/
    _setLayout: function(){
        var oCanvas  = this.oCanvas;
        var diameter = oCanvas.offsetWidth || oCanvas.clientWidth || oCanvas.width;

        oCanvas.style.height = diameter + 'px';
        oCanvas.style.width = diameter + 'px';

        diameter = diameter * this.options.scale;

        this.diameter = oCanvas.width = oCanvas.height = diameter;
        this.radius   = diameter/2;
    },
    /*获取文字的样式*/
    _getFontStyle: function(){
        var scale = this.options.scale;
        var fontStyle = this.options.font;
        return '{{style}} {{weight}} {{size}}/{{lineHeight}} {{family}}'.replace(/\{\{([^}]*)\}\}/g, function(a, b){
            return b == 'size' ? parseInt(fontStyle[b]) * scale + 'px' : fontStyle[b];
        })
    },
    /*画扇形*/
    _drawArc: function(){
        this.ctx.save();
        var fillStyle = this.options.fillStyle;
        if(!fillStyle)return;
      
        for(var i = 0; i < this.size; i++){
            var sAngle = this.sAngle + this.angle*i;
            this.ctx.beginPath();
            this.ctx.fillStyle = fillStyle[i%fillStyle.length];
            this.ctx.arc(this.radius, this.radius, this.innerRadius, sAngle, sAngle + this.angle, false);
            this.ctx.arc(this.radius, this.radius, this.outerRadius, sAngle + this.angle, sAngle, true);
            this.ctx.closePath();
            this.ctx.fill();
        }
        this.ctx.restore();
    },
    isArray: function(arr){
        return arr && Object.prototype.toString.call(arr) == '[object Array]';
    },
    /*画扇形上的文字*/
    _drawText: function(){
        var fonts = this.options.font;
        var scale = this.options.scale;
        for(var i = 0; i < this.size; i++){
            var textArr  = this._cleverBreak(this.options.products[i].name);
            this.ctx.save();
            this.ctx.translate(this.radius, this.radius);
            this.ctx.rotate(this.angle * i);
            this.ctx.fillStyle = this.isArray(fonts.color) ? fonts.color[i%fonts.color.length] : fonts.color;
            this.ctx.font = this._getFontStyle();
            this.ctx.fillText(textArr[0], -this.ctx.measureText(textArr[0]).width/2, - fonts.y);

            if(textArr[1]){
                var y = -(fonts.y-(parseInt(fonts.size)*scale*this.options.font.lineHeight));
                this.ctx.fillText(textArr[1], -this.ctx.measureText(textArr[1]).width/2, y);
            }
            this.ctx.restore();

            this.options.products[i].imgUrl && this.imgUrl.push(this.options.products[i].imgUrl);
        }
    },
    /*文字断行*/
    _cleverBreak: function(str){
        var res, keys = this.options.breakText;
        if(!str){return res}
        for(var i = 0; i < keys.length; i++){
            var idx = str.indexOf(keys[i]);
            if(idx > -1){
                res = [str.substr(0, idx), str.substr(idx)];
                break;
            }
        }
        return res || [str];
    },
    /*绘制图片*/
    _drawImg: function(){
        var self   = this, 
            width  = this.options.images.width,
            height = this.options.images.height;

        this._loadImg(this.imgUrl, function(img){
            var scale = self.options.scale;
            for(var i = 0; i < img.length; i++){
                var ret = img[i], 
                    w   = (width || ret.width) *  scale,
                    h   = (height || ret.height) * scale;

                self.ctx.save();
                self.ctx.translate(self.radius, self.radius);
                self.ctx.rotate(self.angle * i);
                self.ctx.drawImage(ret, -w/2 , -self.options.images.y, w, h);
                self.ctx.restore();
            };
        });
    },
    /*绘制画布*/
    _draw: function(){
        var options  = this.options,
            products = options.products,
            cx = this.cx, imgArr = [];

        this.ctx.clearRect(0, 0, this.diameter, this.diameter);
        this._drawArc();
        this._drawText();
        this._drawImg();
    },
    /*加载要绘制的图片*/
    _loadImg: function(srcArr, callback){
        var img  = document.createElement('img');
        var cur  = cur || 0;
        var self = this;

        if(!self.cur){
            self.cur = 0;
            self.oImages = [];
        }

        var src = srcArr[self.cur++];
        img.src = src + '?' + self.cur;

        img.onload = function(){
            self.oImages.push(this);
            if(self.cur < srcArr.length){
                self._loadImg(srcArr, callback);
            }else{
                self.cur = false;
                callback(self.oImages);
            }
            this.onload = false;
        };

        img.onerror = function(){
            //console.log(this.src);
        }
    },
    /*开始旋转转盘*/
    _beginRotate: function(){
        var self = this, cSpeed = 0, is = 0,
            iSpeed = this.options.speed;

        self.cSpeed = 0;
        self.isOver = false;
        clearInterval(self.timer);

        self.timer = setInterval(function(){
            is = (iSpeed-cSpeed)/iSpeed;
            is = is > 0 ? Math.ceil(is) : Math.floor(is);
            cSpeed += is;
            if(cSpeed>iSpeed){
                is = iSpeed;
            }
            self.cSpeed = cSpeed;
            self.rotate += cSpeed;
            self.setRotateStyle(self.rotate);
        }, 30);
    },
    /*开始抽奖*/
    _start: function(){
        var self = this;
        if(!this.options.handler)return;
        this._fastClick(this.options.handler, function(ev){
            if(self.hasClass(this, 'disabled'))return;
            if(self.isOver){
                self.sTime = self.now();
                self._beginRotate();
                typeof self.options.handlerCallback === 'function' && self.options.handlerCallback.call(this, self);
            }
        });
    },
    _off: function(elemet, eventType, callback){
        elemet.removeEventListener(eventType, callback, false);
    },
    _fastClick: function(elemet, callback){
        if('ontouchstart' in document){
            elemet.addEventListener('touchstart', callback, false);
        }else{
            elemet.addEventListener('click', callback, false);
        }
    },
    /*简单的继承*/
    extend: function(source, distance){
        for(var attr in distance){
            if(distance[attr] !== undefined){
                source[attr] = distance[attr];
            }
        }
        return source;
    },
    /*设置旋转*/
    setRotateStyle: function(rotate){
        this.prefix('transform', 'rotate(' + rotate + 'deg)');
    },
    prefix: function(attr, val){
        if(!val)return;
        var _fix = ['moz', 'o', 'webkit'], self = this;
        _fix.map(function(item){
            self.oCanvas.style[item + self.capitalize(attr)] = val;
        });
        self.oCanvas.style[attr] = val;
    },
    capitalize: function(str){
        return str.substr(0, 1).toUpperCase() + str.substr(1);
    },
    /*判断指定className是否存在*/
    hasClass: function(elemet, className){
        var cls = elemet.className;
        return !!cls.match(new RegExp('\\b' + className + '\\b'));
    },
    /*停止转动, idx为指定停止的位置*/
    stop: function(idx, callback){
        var iTime = Math.max(0, this.options.duration - this.now() + this.sTime);
        var self  = this, durTimer = null;
        durTimer = setTimeout(function(){
            if(self.options.interval > 0){
                self._stop(idx, function(_interface){
                    _interface.isOver = false;
                    _interface.intervalTimer = setTimeout(function(){
                        _interface.isOver = true;
                        clearTimeout(_interface.intervalTimer);
                        callback && callback(_interface);
                    }, _interface.options.interval)
                });
            }else{
                self._stop.apply(self, arguments);
            }
            clearTimeout(durTimer);
        }, iTime);

    },
    _stop: function(idx, callback){
        var stopTimer = null, self = this, iAngle = 360/self.size;
        var iTarget   = self.rotate + 360*4 + (self.size - idx - self.rotate%360/iAngle) * iAngle;
        var iSpeed    = this.options.speed;

        this.timer && clearInterval(this.timer);
        function move(){
            var cSpeed = (iTarget - self.rotate)/iSpeed;
                cSpeed = cSpeed > 0 ? Math.ceil(cSpeed) : Math.floor(cSpeed);

            if(cSpeed > self.cSpeed){
                cSpeed = self.cSpeed;
            }
            self.rotate += cSpeed;
            self.rotate >= iTarget && (self.rotate = iTarget, self.isOver = true);
            self.setRotateStyle(self.rotate);
            if(self.isOver){clearInterval(stopTimer); callback && callback(self);}
        }
        stopTimer = setInterval(move, 30);
    },
    now: function(){
        return new Date() - 0;
    },
    ua: {
        isIos: /iphone|ipad/i.test(navigator.userAgent),
        isAndroid: /android/i.test(navigator.userAgent)
    },
    /*设置配置项*/
    _setOptions: function(options){
        /*默认配置项*/
        var config = {
            /*点击抽奖元素*/
            handler: '',
            /*点击抽奖的回调*/
            handlerCallback: function(_interface){},
            outerRadius: '',
            innerRadius: 0,
            /*循环填充数组颜色*/
            fillStyle: ['#ffdf8a', '#fffdc9'],
            /*重复触发的间距时间*/
            interval: 1000,
            /*速度越大越快*/
            speed: 12,
            /*运动最少持续时间*/
            duration: 3000,
            /*字体位置与样式*/
            /*画布显示缩放比例,值为1 安卓模糊*/
            scale: this.ua.isIos ? 2 : 2,
            /*字体样式,浅拷贝 需整个font对象传入*/
            font: {
                y: '50%',
                color: '#ee6500',
                /*循环填充字体颜色*/
                //color: ['#f00', '#ee6500'],
                style: 'normal',
                weight: 500,
                size: '10px',
                lineHeight: 1,
                family: 'Arail'
            },
            /*图片位置与尺寸*/
            images: {
                y: '88%',
                width: 32,
                height: 32
            },
            /*打断文字换行*/
            breakText: ['金币', '红包'],
            /*礼物*/
            products: [
                /*{
                    imgUrl: 'http://',
                    text: '苹果手机',
                }*/
            ]
        };
        return this.extend(config, options);
    }
};

window.Lottery = Lottery;
}());
如果牛仔没有枪
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带跑马灯效果的大转盘抽奖 前端js 代码
04-12
带跑马灯效果的大转盘抽奖 前端js 代码；带跑马灯效果的大转盘抽奖 前端js 代码；
前端Vue简单编写一个幸运大转盘抽奖游戏
系咩的个人收藏博客
03-20 6583
最近公司有一个需求要做一个抽奖类的大转盘游戏配合运营推广，先看看大概的界面ui图吧 使用rotate计算每一个奖项的角度进行奖项的布局 <ul class="gift-container"> <li v-for="(item, index) in prizeList" :key="index" :style="{'tran...
幸运大转盘抽奖（前端uniapp）
青春，待续的代名词。
06-25 4282
幸运大转盘抽奖(前端) 无依赖, 简单易用(复制粘贴就能用) 效果图如下
html+css+js实现带有转盘的抽奖小程序
jakelihua
01-20 4259
html+css+js实现带有转盘的抽奖小程序。
九宫格抽奖停止位置的设置
脚步不停，信念不息！
05-31 5529
控制九宫格抽奖停止         网上有很多文章介绍九宫格抽奖，最近在做一个活动，正好用到了九宫格抽奖。网上的文章中都提供了比较完整的js和html，只需要将js、html复制下来，添加需要的jQuery的引用（下载很简单），放到环境中，几乎都能跑起来。          但在开发中，发现一个问题，网上的js提供了九宫格旋转的控制代码，同时也有一个随机数的生产，来达到随机抽奖的效果。而真
九宫格大转盘抽奖
zengZeng的博客
09-03 1452
页面效果如下： <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <title>九宫格转盘</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width...
ASP.NET实现大转盘抽奖源码
11-29
通过webform做框架，简单的实现了大转盘抽奖。这里没有用ashx后台处理程序来解析后台数据，而是用了一个aspx的页面来实现。前端通过ajax异步调用获取json的值来进行抽奖。后台可根据需要自己修改概率，或直接修改...
微信小程序-仿幸运转盘抽奖源码
06-09
微信小程序-仿幸运转盘抽奖源码
幸运转盘抽奖-JS实现
07-11
适用浏览器：FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。
JAVA抽奖活动大转盘（含前后端源码、数据库脚本, 抽奖算法）支持一键运行
06-23
1、采用Java语言开发，集成SpringBoot，Redis、Mybatis，SpringEvent、Maven，项目 2、包含前端、后端源码，数据库设计、SQL脚本，抽奖算法如果没有实现思路，这是一个很好的入门案例。
java 9宫格抽奖_九宫格抽奖
weixin_34188576的博客
02-26 412
九宫格抽奖1.jQuery九宫格大转盘抽奖#lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}#lottery table{background-color:yellow;}#lottery table td{position:relative;width:190px;height:170px;te...
vue实现抽奖大转盘
shyyyl的博客
08-03 2900
1. 实现原理 实际解决用户需求：当用户点击抽奖时，会请求接口获取中奖的奖品信息，前端根据中奖编号进行修改css样式，让转盘旋转，调整角度对应后端返回的奖品。如果抽奖有多次机会的话，每次需要抽奖结束后需要重置角度 2.html 代码 .wheel img.turntable( src='@/assets/img/second-anniversary/turntable.png' :style="{transform:'rotate('+rotateAngle+'deg)',tra
uniapp：幸运大转盘demo
最新发布
sunluyi的博客
10-11 896
幸运大转盘demo
【案例篇5】HTML+CSS+JS实现九宫格转盘抽奖（源码）
风中追风
02-17 2432
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的九宫格转盘抽奖，赶紧学起来吧，直接拿到直接自己系统中抽奖使用，简单又实用。
【前端小实战】转盘随机抽奖功能
qq_53569667的博客
01-22 1095
使用JS实现随机抽奖功能
uniapp实现抽奖功能
qq_45729353的博客
10-13 2747
效果 代码 <template> <view class="almost-lottery"> <view class="almost-lottery__wrap" :style="{ width: lotterySize + 'rpx', height: lotterySize + 'rpx' }"> <view class="lottery-action" :style="{ width: actionSize + 'rpx', he
在Vue/JS里面怎么做前端抽奖转盘，并且调整中奖概率?
weixin_46683455的博客
10-20 6517
一、受前端广大网友的启发，编写在Vue里面做抽奖转盘的程序，同时可以调整中奖概率； 1、效果图 2、附素材原图，可自行下载练习(名称顺序为pointer.png turntable.png turntable-bg.jpg) 3、演示视频 Vue/JS里做前端抽奖转盘 二、实现原理：CSS的transitions：rotate属性，传入度数即可旋转；调整中奖概率各有各的做法
前端入门篇（四十九）JS应用4转盘抽奖活动记录
安之ccy的博客
02-21 616
1.简易抽奖页面 定义一个5行5列的表格，填上1-16，和中间的”开始“，再给一些简单的样式 css文件： td { background-color: #666; width: 150px; height: 100px; font-size: 50px; text-align: center; } .select { background-color: #f60; } .start { background-color: #f60; curs
前端小练习：抽奖转盘
illion booked
04-01 620
抽奖小转盘 效果图： HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
输出一段转盘抽奖的前端代码
03-29
下面是一个简单的转盘抽奖的前端代码示例： HTML部分： ```html <div class="container"> <div class="wheel"></div> <button class="spin-btn">SPIN</button> </div> ``` CSS部分： ```css .container { position: relative; } .wheel { width: 300px; height: 300px; border-radius: 50%; background-color: #fc0; } .spin-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 20px; font-size: 24px; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; } ``` JavaScript部分： ```javascript const wheel = document.querySelector('.wheel'); const spinBtn = document.querySelector('.spin-btn'); let deg = 0; spinBtn.addEventListener('click', () => { // 随机生成一个旋转的角度 const randomDeg = Math.floor(Math.random() * 360 + 3600); // 计算总的旋转角度 deg += randomDeg; // 添加过渡效果 wheel.style.transition = 'transform 3s ease-out'; // 旋转转盘 wheel.style.transform = `rotate(${deg}deg)`; // 监听过渡结束事件，重置过渡效果和角度 wheel.addEventListener('transitionend', () => { wheel.style.transition = ''; deg %= 360; }); }); ``` 以上代码实现了一个简单的转盘抽奖，点击SPIN按钮可以随机旋转转盘，旋转结束后会显示抽奖结果。当然，这只是一个简单的示例，实际的转盘抽奖还需要更多的功能和处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值