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

更新时间：2014年06月03日 09:49:01 作者：

这篇文章主要介绍了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="//img.jbzj.com/file_images/article/201406/20146394819279.png?20145394926" 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;

        window.onload = function () {
            m$('test').onclick = function () {
                m$('test').style.display = "none";
                showMsg();
            }

m$('restart').onclick = function () {
m$('restart').style.display = "none";

                m$('test').style.display = "block";
                i = 0;
            }
        }
    </script>
</body>
</html>

您可能感兴趣的文章:

JS 简单实现滑块验证码
这篇文章主要为大家介绍了使用JS 简单实现滑块验证码示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
详解JS鼠标事件中clientX/screenX/offsetX/pageX属性的区别
在熟悉业务中播放器功能的时候,发现时间轴上绑定了点击和拖动事件,频繁遇到了类似pageX之类的事件属性,所以本文就来和大家详细聊聊clientX/screenX/offsetX/pageX等属性的区别吧
2024-03-03
JavaScript判断微信浏览器实例代码
本文给大家介绍如何判断用户是否是用微信浏览器的实例代码，根据关键字 MicroMessenger 来判断是否是微信内置的浏览器，感兴趣的朋友可以参考下实现代码
2016-06-06
用js来刷新当前页面保留参数的具体实现
本文为大家详细介绍下如何使用js来刷新当前页面保留参数，下面有个不错的实现大家可以看看
2013-12-12
js利用FileReader读取本地文件或者blob方式
这篇文章主要介绍了js利用FileReader读取本地文件或者blob方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-12-12
基于原生JS实现图片裁剪
要进行图片编辑，最重要要能够对图片进行裁剪。主要的实现分成两部分，一部分是前端利用js进行裁剪区域选择，第二部分是利用PHP进行后台处理。现在就跟大家分享一下。
2016-08-08
javascript和jQuery实现网页实时聊天的ajax长轮询
在做网页实时聊天的时候常常需要长轮询，本文由于采用原生的JS及AJAX，所以简单易懂，通过这篇文章就可以建立一个简单的聊天室程序。
2016-07-07
详解js前端代码异常监控
本文主要介绍了js代码异常监控的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
微信小程序uploadFile接口实现文件上传
这篇文章主要介绍了微信小程序uploadFile接口实现文件上传流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
深入理解JS中的微任务和宏任务的执行顺序及应用场景
JavaScript中的任务分为宏任务和微任务，它们的执行顺序会影响代码的执行结果。了解它们的机制可以帮助我们更好地理解事件循环和异步编程，避免出现一些意想不到的错误
2023-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具