首页
所有分类
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设置IFRAME的SRC值的代码
Nov 30 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
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
Debian(1) 华为(1) win7(2) 蓝牙耳机(1) RustDesk(1) 鸿蒙(2) 鸿蒙3.0(1) HarmonyOS(1) 虚拟键盘(1) 蓝牙(1)
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python中reader的next用法
2018/07/24 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
keras topN显示,自编写代码案例
2020/07/03 Python
韩国女装NO.1网店：STYLENANDA
2016/09/16 全球购物
GMP办公室主任岗位职责
2014/03/14 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
顶岗实习计划书
2015/01/16 职场文书
实习协议书
2015/01/27 职场文书
2015年植树节活动总结
2015/02/06 职场文书
行政处罚决定书
2015/06/24 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书