闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果:

可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域

比如,我选择了"区域2",结果就是这样

具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入)

HTML文件:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            #RotationDiv {

                /*初始化界面,让指针朝上*/

                transform: rotate(180deg);

                -ms-transform: rotate(180deg);

                -moz-transform: rotate(180deg);

                -webkit-transform: rotate(180deg);

                -o-transform: rotate(180deg);

                width: 60px;

                height: 85px;

                /*边框是用来看旋转的地方的*/

                /*border: 1px solid black;*/

            }

        </style>

        <!--引入jq1.8-->

        <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

        <!--引入旋转的js-->

        <script src="js/rotation-index.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            function rotationDiv(num) {

                RotationIndex("RotationDiv", 8, num, 4, 5)

            }

        </script>

    </head>

    <body>

        <div style="height: 85px;">

            <table align="center">

                <tr>

                    <td><input type="button" value="选择区域:1" onclick="rotationDiv(1)" />

                        <input type="button" value="选择区域:2" onclick="rotationDiv(2)" />

                        <input type="button" value="选择区域:3" onclick="rotationDiv(3)" />

                        <input type="button" value="选择区域:4" onclick="rotationDiv(4)" />

                        <input type="button" value="选择区域:5" onclick="rotationDiv(5)" />

                        <input type="button" value="选择区域:6" onclick="rotationDiv(6)" />

                        <input type="button" value="选择区域:7" onclick="rotationDiv(7)" />

                        <input type="button" value="选择区域:8" onclick="rotationDiv(8)" /></td>

                </tr>

            </table>

        </div>

        <table align="center" style="background-image: url(img/revolveBgImage.png); width: 500px;height: 500px;">

            <tr>

                <td colspan="3"></td>

            </tr>

            <tr>

                <td style="width: 220px;">

                </td>

                <td>

                    <div id="RotationDiv"><img src="img/timg.png" width="100%" /></div>

                </td>

                <td style="width: 220px;"></td>

            </tr>

            <tr>

                <td colspan="3"></td>

            </tr>

        </table>

    </body>

</html>

自己写的旋转的JS文件:

/**

 * @param {Object} indexID        想要旋转的控件的id

 * @param {Object} areaNum        区域的块数

 * @param {Object} wantToStop    想要停止的位置(块号)

 * @param {Object} defaultTime    刚开始匀速旋转的时间

 * @param {Object} chageTime    最后减速旋转的时间

 */

function RotationIndex(indexID, areaNum, wantToStop, defaultTime, chageTime) {

    var stopAreaNum = 0; //停在区域的名字数

    var areaArr = new Array(areaNum);

    var angle = 1; //每次旋转角度

//    var randomTime = Math.random() * 1500; //随机时间

    var nowTime = 0; //当前时间,随机起点,让停止来的更加真实

    var disTime = 15; //时间差值,每15毫秒改变一次,基本上类似于60Hz刷新频率

    var disangle = 13; //角度差值

    var angle360 = 0; //用于记录角度数,360°范围的

    var UP = (1 - ((12 / chageTime) * defaultTime)); //定义一个函数uniformizing parameter

    var IPFP = 12 * defaultTime + (12 / chageTime) * defaultTime * defaultTime; //定义一个反比例函数的参数Inverse proportional function parameters

    var myIntervalInRotationIndex = window.setInterval(function() {

        nowTime += disTime;

        //当时间小于默认时间时候

        if((nowTime / 1000) <= defaultTime) {

            //匀速旋转

        } else if((nowTime / 1000) > defaultTime && (nowTime / 1000) < (defaultTime + chageTime)) {

            //当时间大于默认时间,开始减速旋转

            disangle = UP + (IPFP / (nowTime / 1000));

            /**

             * 函数式为:

             * UP+IPFP/t=h

             * 其中t为时间,h为角度

             *

             */

        } else {

            angle360 = angle % 360;

            stopAreaNum = angle360 / (360 / areaNum);

            if(stopAreaNum >= (wantToStop - 1.5)) {

                disangle = 0.3;

            } else if(stopAreaNum >= (wantToStop - 1)) {

                disangle = 0.5;

            } else {

                disangle = 0.8;

            }

            if(stopAreaNum >= (wantToStop - 0.8) && stopAreaNum <= wantToStop) {

                window.clearInterval(myIntervalInRotationIndex);

            }

        }

        angle360 = angle % 360;

        angle += disangle;

        $("#" + indexID).attr("style", "transform:rotate(" + angle + "deg);-ms-transform:rotate(" + angle + "deg);-moz-transform:rotate(" + angle + "deg);-webkit-transform:rotate(" + angle + "deg);-o-transform:rotate(" + angle + "deg);")

    }, disTime)

}

转盘背景用的是500px*500px的,指针的地方需要注意的是,div框的大小应当是需要旋转的中心部位,而不能用div把指针全部包入.

简单JS旋转实现转盘抽奖效果的更多相关文章

  1. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  2. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  3. js实现游戏转盘抽奖

    <!DOCTYPE html> <html> <head> <title>js抽奖</title> <meta charset=&qu ...

  4. js实现大转盘抽奖游戏实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 原生js实现跑马灯抽奖效果

    目前好多的微信活动都有一些抽奖活动,其中就有跑马灯. <!DOCTYPE html> <html> <head> <title>跑马灯效果</ti ...

  6. 原生js轮盘抽奖实例分析（幸运大转盘抽奖）

    效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...

  7. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  8. web：转盘抽奖

    移动web:转盘抽奖(幸运大转盘)   为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转 ...

  9. 移动web：转盘抽奖(幸运大转盘)

    为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...

随机推荐

  1. SVN 安装后报不是内部或外部命令

    SVN安装后报不是内部或外部命令,也不是可运行的程序 解决方法:windows安装svn的时候默认是不安装 svn command line这个东西的,重新打开svn的安装exe,选择modify,将 ...

  2. 为什么 Windows API 使用 stdcall 调用约定？

    作者:知乎用户链接:https://www.zhihu.com/question/31453641/answer/52001143来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  3. Dubbo源代码实现三：注册中心Registry

    我们知道,对于服务治理框架来说,服务通信(RPC)和服务管理两部分必不可少,而服务管理又分为服务注册.服务发现和服务人工介入,我们来看看Dubbo框架的结构图(来源网络): 图中可以看出,服务提供者P ...

  4. 一款基于jQuery的图片下滑切换焦点图插件

    之前为大家分享了好多款jquery插件,今天我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件.焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的 ...

  5. 《高性能MySQL》读书笔记(1)

    慢查询 当一个资源变得效率低下的时候,应该了解一下为什么会这样.有如下可能原因:1.资源被过度使用,余量已经不足以正常工作.2.资源没有被正确配置3.资源已经损坏或者失灵 因为慢查询,太多查询的实践过 ...

  6. 实现cell显示一个删除button

    假设想实现滑动cell时,cell右边就能显示一个删除button,则要实现tableview 下边方法: - (void)tableView:(UITableView *)tableView com ...

  7. HTML5关于上传API的一些使用（中）

    上一次写了关于HTML的上传API,XMLHttpRequest2.0的上传方式,以及HTML5中上传之前本地的预览,包括对于图片以及部分信息的预 览.这次我们就讲下HTML5中关于上传的一些各种个性 ...

  8. spark 系列文章汇总

    源码导读 spark 源码导读1 从spark启动脚本开始 spark 源码导读2 进一步窥探Master.Worker启动及通信机制 spark 源码导读3 进一步理解脚本调用关系 spark 源码 ...

  9. 浅谈AutoResetEvent的用法

    using System;using System.Threading; namespace AutoResetEvent_Examples{    class MyMainClass    {    ...

  10. IOC和AOP的一些基本概念

    IOC和AOP的一些基本概念介绍 IOC 介绍 IOC 一.什么是IOC IoC就是Inversion of Control,控制反转.在Java开发中,IoC意味着将你设计好的类交给系统去控制,而不 ...