设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 749|回复: 0

小猿圈web前端之jQuery抽奖系统

[复制链接]
小猿圈002
累计签到：3 天
连续签到：3 天
发表于 2019-5-10 16:21:17 | 显示全部楼层 |阅读模式
你有没有想过有一天可以成为千万富翁呢？你是通过自己的努力和奋斗还是其他手段获得的呢？前端程序员是通过jQuery获得的，他自己写了一个抽奖系统，下面就小猿圈前端讲师分享给大家。
效果图：



<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽奖</title>
    <style>
        .lottery {
            position: relative;
            display: inline-block;
        }
        .lottery img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -76px;
            margin-top: -82px;
            cursor: pointer;
        }
        #message {
            position: absolute;
            top: 0px;
            left: 10%;
        }
    </style>
    <!--[if lte IE 8]>
        <style>
            .lottery img{
                display: none;
            }
        </style>
    <![endif]-->
</head>
<body>
    <div>
        <canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
            当前浏览器版本过低，请使用其他浏览器尝试
        </canvas>
        <p id="message"></p>
        <img src="./images/start.png" id="start">
    </div>
    <script src="这里引入jquery.js"></script>
    <script>
    (function ($) {
        /**
        * @param {Object} options
        * @param {Array}  options.list  存储奖品的的列表，example [{1:{name:'谢谢参与',image:'1.jpg'}}]
        * @param {Object} options.outerCircle {color:'#df1e15'} 外圈颜色，默认红色
        * @param {Object} options.innerCircle {color:'#f4ad26'} 里圈颜色，默认黄色
        * @param {Array}  options.dots ['#fbf0a9', '#fbb936'] 装饰点颜色 ，默认深黄浅黄交替
        * @param {Array}  options.disk ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'] 中心奖盘的颜色，默认7彩
        * @param {Object} options.title {color:'#5c1e08',font:'19px Arial'} 奖品标题颜色
        */
        $.fn.WheelSurf = function (options) {
            var _default = {
                outerCircle: {
                    color: '#df1e15'
                },
                innerCircle: {
                    color: '#f4ad26'
                },
                dots: ['#fbf0a9', '#fbb936'],
                disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'],
                title: {
                    color: '#5c1e08',
                    font: '19px Arial'
                }
            }
            $.extend(_default,options)
            // 画布中心移动到canvas中心
            var _this = this[0],
                width = _this.width,
                height = _this.height,
                ctx = _this.getContext("2d"),
                imgs = [],
                awardTitle = [],
                awardPic = []
            for (var item in _default.list) {
                awardTitle.push(_default.list[item].name)
                imgs.push(_default.list[item].image)
            }
            var num = imgs.length
            // 圆心
            var x = width / 2
            var y = height / 2
            ctx.translate(x, y)
            return {
                init: function (angelTo) {
                    angelTo = angelTo || 0;
                    ctx.clearRect(-this.width, -this.height, this.width, this.height);
                    // 平分角度
                    var angel = (2 * Math.PI / 360) * (360 / num);
                    var startAngel = 2 * Math.PI / 360 * (-90)
                    var endAngel = 2 * Math.PI / 360 * (-90) + angel
                    // 旋转画布
                    ctx.save()
                    ctx.rotate(angelTo * Math.PI / 180);
                    // 画外圆
                    ctx.beginPath();
                    ctx.lineWidth = 25;
                    ctx.strokeStyle = _default.outerCircle.color;
                    ctx.arc(0, 0, 243, 0, 2 * Math.PI)
                    ctx.stroke();
                    // 画里圆
                    ctx.beginPath();
                    ctx.lineWidth = 23;
                    ctx.strokeStyle = _default.innerCircle.color;
                    ctx.arc(0, 0, 218, 0, 2 * Math.PI)
                    ctx.stroke();
                    // 装饰点
                    var dotColor = _default.dots
                    for (var i = 0; i < 12; i++) {
                        // 装饰点 圆心 坐标计算
                        ctx.beginPath();
                        var radius = 230;
                        var xr = radius * Math.cos(startAngel)
                        var yr = radius * Math.sin(startAngel)
                        ctx.fillStyle = dotColor[i % dotColor.length]
                        ctx.arc(xr, yr, 11, 0, 2 * Math.PI)
                        ctx.fill()
                        startAngel += (2 * Math.PI / 360) * (360 / 12);
                    }
                    // 画里转盘               
                    var colors = _default.disk
                    for (var i = 0; i < num; i++) {
                        ctx.beginPath();
                        ctx.lineWidth = 208;
                        ctx.strokeStyle = colors[i % colors.length]
                        ctx.arc(0, 0, 104, startAngel, endAngel)
                        ctx.stroke();
                        startAngel = endAngel
                        endAngel += angel
                    }
                    // 添加奖品
                    function loadImg() {
                        var dtd = $.Deferred()
                        var countImg = 0
                        if (awardPic.length) {
                            return dtd.resolve(awardPic);
                        }
                        for (var i = 0; i < num; i++) {
                            var img = new Image()
                            awardPic.push(img)
                            img.src = imgs
                            img.onload = function () {
                                countImg++
                                if (countImg == num) {
                                    dtd.resolve(awardPic);
                                }
                            }
                        }
                        return dtd.promise()
                    }
                    $.when(loadImg()).done(function (awardPic) {
                        startAngel = angel / 2
                        for (var i = 0; i < num; i++) {
                            ctx.save();
                            ctx.rotate(startAngel)
                            ctx.drawImage(awardPic, -48, -48 - 130);
                            ctx.font = _default.title.font;
                            ctx.fillStyle = _default.title.color
                            ctx.textAlign = "center";
                            ctx.fillText(awardTitle, 0, -170);
                            startAngel += angel
                            ctx.restore();
                        }
                    })
                    ctx.restore();
                },
                /**
                * @param angel 旋转角度
                * @param callback 转完后的回调函数
                */
                lottery: function (angel, callback) {
                    angel = angel || 0
                    angel = 360-angel
                    angel += 720
                    // 基值（减速）
                    var baseStep = 30
                    // 起始滚动速度
                    var baseSpeed = 0.3
                    // 步长
                    var count = 1;
                    var _this = this
                    var timer = setInterval(function () {
                        _this.init(count)
                        if (count == angel) {
                            clearInterval(timer)
                            if (typeof callback == "function") {
                                callback()
                            }
                        }
                        count = count + baseStep * (((angel - count) / angel) > baseSpeed ? baseSpeed : ((angel - count) / angel))
                        if (angel - count < 0.5) {
                            count = angel
                        }
                    }, 25)
                }
            }
        }
    }(jQuery))
    </script>
    <script>
        var wheelSurf
        // 初始化装盘数据 正常情况下应该由后台返回
        var initData = {
            "success": true,
            "list": [{
                    "id": 100,
                    "name": "5000元京东卡",
                    "image": "./images/1.png",
                    "rank":1,
                    "percent":3
                },
                {
                    "id": 101,
                    "name": "1000元京东卡",
                    "image": "./images/2.png",
                    "rank":2,
                    "percent":5
                },
                {
                    "id": 102,
                    "name": "100个比特币",
                    "image": "./images/3.png",
                    "rank":3,
                    "percent":2
                },
                {
                    "id": 103,
                    "name": "50元话费",
                    "image": "./images/4.png",
                    "rank":4,
                    "percent":49
                },
                {
                    "id": 104,
                    "name": "100元话费",
                    "image": "./images/5.png",
                    "rank":5,
                    "percent":30
                },
                {
                    "id": 105,
                    "name": "500个比特币",
                    "image": "./images/6.png",
                    "rank":6,
                    "percent":1
                },
                {
                    "id": 106,
                    "name": "500元京东卡",
                    "image": "./images/7.png",
                    "rank":7,
                    "percent":10
                }
            ]
        }
        // 计算分配获奖概率(前提所有奖品概率相加100%)
        function getGift(){
            var percent = Math.random()*100
            var totalPercent = 0
            for(var i = 0 ,l = initData.list.length;i<l;i++){
                totalPercent += initData.list.percent
                if(percent<=totalPercent){
                    return initData.list
                }
            }         
        }
        var list = {}

        var angel = 360 / initData.list.length
        // 格式化成插件需要的奖品列表格式
        for (var i = 0, l = initData.list.length; i < l; i++) {
            list[initData.list.rank] = {
                id:initData.list.id,
                name: initData.list.name,
                image: initData.list.image
            }
        }
        // 查看奖品列表格式

        // 定义转盘奖品
        wheelSurf = $('#myCanvas').WheelSurf({
            list: list, // 奖品 列表，(必填)
            outerCircle: {
                color: '#df1e15' // 外圈颜色(可选)
            },
            innerCircle: {
                color: '#f4ad26' // 里圈颜色(可选)
            },
            dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
            disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色，默认7彩(可选)
            title: {
                color: '#5c1e08',
                font: '19px Arial'
            } // 奖品标题样式(可选)
        })
        // 初始化转盘
        wheelSurf.init()
        // 抽奖
        var throttle = true;
        $("#start").on('click', function () {
            var winData = getGift() // 正常情况下获奖信息应该由后台返回
            $("#message").html('')
            if(!throttle){
                return false;
            }
            throttle = false;
            var count = 0
            // 计算奖品角度
            for (const key in list) {
                if (list.hasOwnProperty(key)) {                  
                    if (winData.id == list[key].id) {
                        break;
                    }
                    count++   
                }
            }

            // 转盘抽奖，
            wheelSurf.lottery((count * angel + angel / 2), function () {
                $("#message").html(winData.name)
                throttle = true;
            })
        })
    </script>
</body>
</html>
以上就是小猿圈web前端讲师给大家分享的jQuery抽奖系统，希望对你成为百万富翁有一定的帮助吧仅供娱乐，如果遇到技术上的问题可以到小猿圈寻找你需要的答案，里面有最全最新的技术等你去学习。


运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-841427-1-1.html 上篇帖子： BGP线路带宽玩游戏就是不卡 下篇帖子： 小猿圈web前端开发面试需要注意哪些？
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表