首页
所有分类
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 相关文章推荐
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
vue组件间通信六种方式（总结篇）
May 15 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 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
keeplive_timeout(1) text-shadow(1) RTMP(1) http_stub_status_module(1) zabbix(9) TypeScript(2) location(2) 缓存机制(1) 区块链(2) BufferPool(1)
You might like
《猛禽小队》：DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
深入解析php中的foreach问题
2013/06/30 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
javascript中xml操作实现代码
2011/11/21 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
让python在hadoop上跑起来
2016/01/27 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python cookbook（数据结构与算法）找到最大或最小的N个元素实现方法示例
2018/02/13 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python数据预处理之数据规范化（归一化）示例
2019/01/08 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
亚马逊意大利站点：Amazon.it
2020/12/31 全球购物
小学教师管理制度
2014/01/18 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js