首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript圆盘抽奖程序实现原理和完整代码例子

Posted in Javascript onJune 03, 2014

效果预览：

javascript圆盘抽奖程序实现原理和完整代码例子

一、模拟抽奖的实现过程

旋转原理：当支持CSS3属性采用transform: rotate（角度deg）设置,当角度为正数时顺时针旋转，当为负数时逆时针旋转。如果是IE8及其以下，采用采用绝对定位设置top和left，模拟角度旋转。

run方法，参数angle指角度

function run(angle) {
                    if (isIE) {
                        cosDeg = Math.cos(angle * Math.PI / 180);
                        sinDeg = Math.sin(angle * Math.PI / 180);
                        with (target.filters.item(0)) {
                            M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
                        }
                        target.style.top = (orginH - target.offsetHeight) / 2 + "px";
                        target.style.left = (orginW - target.offsetWidth) / 2 + "px";
                    } else if (target.style.MozTransform !== undefined) {
                        target.style.MozTransform = "rotate(" + angle + "deg)";
                    } else if (target.style.OTransform !== undefined) {
                        target.style.OTransform = "rotate(" + angle + "deg)";
                    } else if (target.style.webkitTransform !== undefined) {
                        target.style.webkitTransform = "rotate(" + angle + "deg)";
                    } else {
                        target.style.transform = "rotate(" + angle + "deg)";
                    }
                }

模拟转盘加速，匀速和减速。当角度小于某个数值时，让其处于加速此处采用1.01的系数作为加速度，当大于某个数值时处于高速匀速状态，当角度大于设置的最大数值时，让其减速采用系数为0.99。设置负数作为减速的值（即变量 tmp），随即获取负360中的值（即变量 m），当大于这个值时，转盘停止。
var tmp = -900;
                var m = -parseInt(Math.random() * 360);
                timer = setInterval(function () {
                    if (i > 3000) {
                        tmp = parseInt(tmp * 0.99);
                        if (tmp > m) {
                            tmp = m;
                            clearInterval(timer);
                            msg(m);
                        }
                        run(tmp);
                    }
                    else if (i > 1000) {
                        i = i + 45;
                        run(i);
                    }
                    else {
                        i = parseInt((i + 1) * 1.01);
                        run(i);
                    }
                }, 50);

启动抽奖和重新设置抽奖
<input id="test" type="button" value="抽奖" />
<input id="restart" style="display: none;" type="button" value="再抽一次" />
m$('test').onclick = function () {
                m$('test').style.display = "none";
                showMsg();
            }
            m$('restart').onclick = function () {
                m$('restart').style.display = "none";
                if (isIE) {
                    m$("demo").style.top = "0px";
                    m$("demo").style.left = "0px";
                } else if (m$("demo").style.MozTransform !== undefined) {
                    m$("demo").style.MozTransform = 'rotate(0deg)';
                } else if (m$("demo").style.OTransform !== undefined) {
                    m$("demo").style.OTransform = 'rotate(0deg)';
                } else if (m$("demo").style.webkitTransform !== undefined) {
                    m$("demo").style.webkitTransform = 'rotate(0deg)';
                } else {
                    m$("demo").style.transform = 'rotate(0deg)';
                }
                m$('test').style.display = "block";
                i = 0;
            }

二、完整代码demo: 
<!DOCTYPE html>
<html>
<head>
    <title>抽奖</title>
    <style type="text/css">
        #container{width: 400px;height: 400px;position: relative;margin: 0 auto;}
        #demo{position: absolute;filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
    </style>
</head>
<body style="height: 1000px;">
    <div id="container">
        <div id="demo">
            <img alt="" src="//f.3water.com/f/6amI1aMS5ueZXQu/ca833e5d4d9bbfca1fb002242b78dcb5.png" width="400" height="400" />
        </div>
    </div>
    <input id="test" type="button" value="抽奖" />
    <input id="restart" style="display: none;" type="button" value="再抽一次" />
    <div id="msg">
    </div>
    <script type="text/javascript">
        var m$ = function (id) { return document.getElementById(id); }
        var ua = navigator.userAgent;
        var isIE = /msie/i.test(ua) && !window.opera;
        var i = 1, sinDeg = 0, cosDeg = 0, timer = null;
        var mRotate = function () {
            var rotate = function (target, msg) {
                target = m$(target);
                var orginW = target.clientWidth, orginH = target.clientHeight;
                clearInterval(timer);
                function run(angle) {
                    if (isIE) {
                        cosDeg = Math.cos(angle * Math.PI / 180);
                        sinDeg = Math.sin(angle * Math.PI / 180);
                        with (target.filters.item(0)) {
                            M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
                        }
                        target.style.top = (orginH - target.offsetHeight) / 2 + "px";
                        target.style.left = (orginW - target.offsetWidth) / 2 + "px";
                    } else if (target.style.MozTransform !== undefined) {
                        target.style.MozTransform = "rotate(" + angle + "deg)";
                    } else if (target.style.OTransform !== undefined) {
                        target.style.OTransform = "rotate(" + angle + "deg)";
                    } else if (target.style.webkitTransform !== undefined) {
                        target.style.webkitTransform = "rotate(" + angle + "deg)";
                    } else {
                        target.style.transform = "rotate(" + angle + "deg)";
                    }
                }
                var tmp = -900;
                var m = -parseInt(Math.random() * 360);
                timer = setInterval(function () {
                    if (i > 3000) {
                        tmp = parseInt(tmp * 0.99);
                        if (tmp > m) {
                            tmp = m;
                            clearInterval(timer);
                            msg(m);
                        }
                        run(tmp);
                    }
                    else if (i > 1000) {
                        i = i + 45;
                        run(i);
                    }
                    else {
                        i = parseInt((i + 1) * 1.01);
                        run(i);
                    }
                }, 50);
            }
            return { rotate: rotate }
        } ();
        function showMsg() {
            mRotate.rotate("demo", function msg(m) {
                if (m > -90 && m < -30) {
                    m$("msg").innerHTML += "22222222";
                }
                else if (m > -150 && m < -90) {
                    m$("msg").innerHTML += "333333333";
                }
                else if (m > -210 && m < -150) {
                    m$("msg").innerHTML += "444444";
                }
                else if (m > -270 && m < -210) {
                    m$("msg").innerHTML += "5555555";
                }
                else if (m > -330 && m < -270) {
                    m$("msg").innerHTML += "6666666";
                } else {
                    m$("msg").innerHTML += "111111111";
                }
                m$('restart').style.display = "block";
            });
        }
        window.onload = function () {
            m$('test').onclick = function () {
                m$('test').style.display = "none";
                showMsg();
            }
            m$('restart').onclick = function () {
                m$('restart').style.display = "none";
                if (isIE) {
                    m$("demo").style.top = "0px";
                    m$("demo").style.left = "0px";
                } else if (m$("demo").style.MozTransform !== undefined) {
                    m$("demo").style.MozTransform = 'rotate(0deg)';
                } else if (m$("demo").style.OTransform !== undefined) {
                    m$("demo").style.OTransform = 'rotate(0deg)';
                } else if (m$("demo").style.webkitTransform !== undefined) {
                    m$("demo").style.webkitTransform = 'rotate(0deg)';
                } else {
                    m$("demo").style.transform = 'rotate(0deg)';
                }
                m$('test').style.display = "block";
                i = 0;
            }
        }
    </script>
</body>
</html>

javascript圆盘抽奖程序实现原理和完整代码例子

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JScript的条件编译
May 29 Javascript
javascript 文档的编码问题解决
Mar 01 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
简单易懂的天气插件（代码分享）
Feb 04 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
Ant Design的Table组件去除
Oct 24 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 #Javascript
jquery动态改变form属性提交表单
Jun 03 #Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 #Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 #Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 #Javascript
jQuery学习笔记之总体架构
Jun 03 #Javascript
jquery控制select的text/value值为选中状态
Jun 03 #Javascript
self(1) css3 (2) uniapp(4) SpringBoot(22) tabBar(1) Normal From(1) JSON(10) element-china-area-data(1) capture(1) MybatisPlus(2)
You might like
《心理测量者3》剧场版动画预告
2020/03/02 日漫
用php来检测proxy
2006/10/09 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
javascript开发中因空格引发的错误
2010/11/08 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
loading动画特效小结
2017/01/22 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python getopt详解及简单实例
2016/12/30 Python
python3个性签名设计实现代码
2018/06/19 Python
django admin组件使用方法详解
2019/07/19 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
python/golang 删除链表中的元素
2020/09/14 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
洛杉矶健身中心女性专用运动服饰品牌：Marika
2018/05/09 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
领导干部考察材料
2014/02/08 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2014年双拥工作总结
2014/11/21 职场文书
中班下学期个人总结
2015/02/12 职场文书
发票退票证明
2015/06/24 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL