首页
所有分类
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下过滤数组重复值的代码
Sep 10 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
Vue实现简单的拖拽效果
Aug 25 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
爱尔兰购物网站(30) AE3805(1) 天梯图(1) 香港购物网站(84) 德生G88(1) 美国购物网站(1542) SLi Minor 2020(63) 纸巾盒(1) CPU(2) ICF-F10(1)
You might like
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
php 常用的系统函数
2017/02/07 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
在JavaScript中，为什么要尽可能使用局部变量？
2009/04/06 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
js代码实现轮播图
2020/05/04 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Python读取键盘输入的2种方法
2015/06/16 Python
python搭建微信公众平台
2016/02/09 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
wxPython实现文本框基础组件
2019/11/18 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
百思买美国官网：Best Buy
2016/07/28 全球购物
军训自我鉴定怎么写
2014/02/13 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
费用申请报告范文
2015/05/15 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python