H5+CSS3+JS制作抽奖转盘

前端开发 新技术
web前端开发技术展望
前端开发技术年度总结

这个主要是练习CANVAS绘图。随便做了一个抽奖的效果。
已知有一个小BUG,当指针指在两个扇形之间的线上时,会有一点判断不准确。{:1_502:}

【我只是一个自学中的小菜鸟,未经系统性的正规学习,本作品为本人练之作,如有不规范之处或奇怪的BUG,还请前辈们指点!】
代码片段 1

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>抽奖转盘</title>
        <script
            type=”text/javascript”
            src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js
        ></script>
        <style>
            #wrap {
                height: 100%;
                width: 500px;
                position: relative;
            }
            #center_but {
                width: 50px;
                height: 50px;
                border-radius: 25px;
                background: #000000;
                position: absolute;
                top: 225px;
                left: 225px;
                z-index: 200;
            }
            #pointer_box {
                width: 300px;
                height: 300px;
                border-radius: 150px;
                border: 1px solid white;
                position: absolute;
                top: 100px;
                left: 100px;
                transition: all 3s ease-in-out;
                -webkit-transition: all 3s ease-in-out;
                -moz-transition: all 3s ease-in-out;
            }
            #start {
                width: 100px;
                height: 50px;
                background: black;
                font-family: ‘微软雅黑’;
                font-size: 15px;
                line-height: 50px;
                text-align: center;
                color: white;
                cursor: pointer;
            }
            #prize_box {
                width: 100%;
                height: 1%;
                background: rgba(229, 216, 216, 0.6);
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 999;
                display: none;
                transition: all 1s;
                -webkit-transition: all 2s;
                -moz-transition: all 2s;
            }
            #prize_wrap {
                width: 300px;
                height: 200px;
                background: salmon;
                border: 5px saddlebrown solid;
                border-radius: 10px;
                margin: 150px auto;
            }
            #text {
                width: 100%;
                height: 140px;
                display: block;
                font-family: ‘微软雅黑’;
                font-size: 20px;
                line-height: 140px;
                color: white;
                text-align: center;
            }
            #text b {
                font-weight: bolder;
                font-size: 25px;
                color: seagreen;
            }
            #close_but {
                width: 80px;
                height: 50px;
                background: skyblue;
                border: 3px saddlebrown solid;
                border-radius: 10px;
                margin: 0 auto;
                font-family: ‘微软雅黑’;
                font-size: 15px;
                font-weight: bold;
                line-height: 50px;
                text-align: center;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id=”wrap”>
            <div id=”center_but”></div>
            <div id=”pointer_box”>
                <canvas id=”myPointer” width=”300px” height=”300px”></canvas>
            </div>
            <canvas id=”myCanvas” width=”500px” height=”500px”></canvas>
            <div id=”prize_box”>
                <div id=”prize_wrap”>
                    <span id=”text”>恭喜您获得了<b>二等奖</b></span>
                    <div id=”close_but”>关闭</div>
                </div>
            </div>
        </div>
        <div id=”start”>开始</div>
    </body>
    <script>
        var color = [
            ‘#993333’,
            ‘#CC9966’,
            ‘#003300’,
            ‘#FF0033’,
            ‘#333399’,
            ‘#CCCC00’,
            ‘#CC0033’,
            ‘#003399’,
            ‘#999933’,
            ‘#99CC00’,
        ]
        var c = document.getElementById(‘myCanvas’)
        var cxt = c.getContext(‘2d’)
        for (var i = 0; i < 10; i++) {
            var ii = (i * 0.2).toFixed(1)
            var iii = (i + 1) * (0.2).toFixed(1)
            cxt.beginPath()
            cxt.arc(250, 250, 250, Math.PI * ii, Math.PI * iii)
            cxt.lineTo(250, 250)
            cxt.closePath()
            cxt.fillStyle = color[i]
            cxt.fill()
        }
        var p = document.getElementById(‘myPointer’)
        var p_cxt = p.getContext(‘2d’)
        p_cxt.beginPath()
        p_cxt.moveTo(150, 130)
        p_cxt.lineTo(300, 150)
        p_cxt.lineTo(150, 170)
        p_cxt.closePath()
        p_cxt.fill()
        $(document).ready(function() {
            var s = 0
            var a = 0
            $(‘#start’).click(function() {
                s += parseInt(Math.random() * (360 – 100 + 1) + 100)
                a = s + s * 15
                $(‘#pointer_box’).css(‘transform’, ‘rotate(‘ + a + ‘deg)’)
                setTimeout(prize, 3000)
            })
            e = [
                ‘0’,
                ‘0.1’,
                ‘0.2’,
                ‘0.3’,
                ‘0.4’,
                ‘0.5’,
                ‘0.6’,
                ‘0.7’,
                ‘0.8’,
                ‘0.9’,
                ‘1’,
            ]
            h = [
                ‘特等奖’,
                ‘二等奖’,
                ‘三等奖’,
                ‘四等奖’,
                ‘五等奖’,
                ‘六等奖’,
                ‘七等奖’,
                ‘八等奖’,
                ‘九等奖’,
                ‘安慰奖’,
            ]
            var j = 0
            function prize() {
                var b = a / 360
                var c = b – parseInt(a / 360)
                for (var f = 0; f < 11; f++) {
                    var g = e[f]
                    if (c < g) {
                        j = f – 1
                        open_prize()
                        break
                    }
                }
            }
            function open_prize() {
                $(‘#prize_box’).css({ display: ‘block’, height: ‘100%’ })
                $(‘#text b’).html(h[j])
            }
            $(‘#close_but’).click(function() {
                $(‘#prize_box’).css({ display: ‘none’, height: ‘0%’ })
            })
        })
    </script>
</html>
前端技术开发的汽车比赛小游戏
web前端开发技术聂常红
目前前端开发用到的技术
» 本文来自:前端开发者 » 《H5+CSS3+JS制作抽奖转盘》
» 本文链接地址:https://www.rokub.com/7512.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!