首页
所有分类
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 相关文章推荐
javascript编程起步（第四课）
Jan 10 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
ExpressJS入门实例
Jan 14 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 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
黑屏(2) appdata(1) OOP(1) tree shaking(1) minio(1) Outlook(1) SeaTable(1) Mysql8(2) celery(1) MutationObserver(1)
You might like
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
Python中的推导式使用详解
2015/06/03 Python
python对json的相关操作实例详解
2017/01/04 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python虚拟环境项目实例
2017/11/20 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
Django的Modelforms用法简介
2019/07/27 Python
Python3 列表，数组，矩阵的相互转换的方法示例
2019/08/05 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
全球游戏Keys和卡片市场：GamesDeal
2018/03/28 全球购物
来自圣地亚哥的实惠太阳镜：Knockaround
2018/08/27 全球购物
博朗(Braun)俄罗斯官方商店：德国小家电品牌
2019/09/24 全球购物
Parfumdreams芬兰：购买香水和化妆品
2021/02/13 全球购物
男女朋友协议书
2014/04/23 职场文书
第一军规观后感
2015/06/12 职场文书
母亲去世追悼词
2015/06/23 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
如何写好闭幕词
2019/04/02 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书