JS旋转实现转盘抽奖效果

2024-08-05 23:24:43

本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码，供大家参考，具体内容如下

闲来没事,做了一个模拟转盘抽奖的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" οnclick="rotationDiv(1)" />
                        <input type="button" value="选择区域:2" οnclick="rotationDiv(2)" />
                        <input type="button" value="选择区域:3" οnclick="rotationDiv(3)" />
                        <input type="button" value="选择区域:4" οnclick="rotationDiv(4)" />
                        <input type="button" value="选择区域:5" οnclick="rotationDiv(5)" />
                        <input type="button" value="选择区域:6" οnclick="rotationDiv(6)" />
                        <input type="button" value="选择区域:7" οnclick="rotationDiv(7)" />
                        <input type="button" value="选择区域:8" οnclick="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)

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

javascript+HTML5 Canvas绘制转盘抽奖

之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

需求: 最多可以抽奖5次,而且,每次只会中"2000元理财金"或者"谢谢参与",其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已拥有<span class="play
利用Javascript实现简单的转盘抽奖

首先来看看接口说明: var _rotate = new iRotate('#div',{ start : 0, //开始角度,可不写,默认0 end :45, //结束角度 time :5000, //持续时间,可不写,默认1000 easing : 'easeOut', //动画形式,目前只有'linear'和'easeOut'两种,可不写,默认'easeOut' callback : function(){ //回调函数 //this为当前对象 } }); _rotate.stop(fu
js实现转盘抽奖功能

本文实例为大家分享了js实现转盘抽奖功能的具体代码,供大家参考,具体内容如下效果:点击抽奖按钮,转盘开始旋转数圈后停止示例: 抽奖html代码: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q
js HTML5 Canvas绘制转盘抽奖

本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果 2.主要的内容 •html5中canvas标签的使用 •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas" wi
js实现大转盘抽奖游戏实例

本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
Vue.js实现大转盘抽奖总结及实现思路

大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放大转盘动画并给用户弹出中奖提示. 中奖结果弹窗,为抽奖组件服务. 实现步骤如下: 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息. api: export default { getPrizeList () { let priz
JS旋转实现转盘抽奖效果

本文实例为大家分享了JS旋转实现转盘抽奖效果的具体代码,供大家参考,具体内容如下闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域比如,我选择了"区域2",结果就是这样具体可以见下面的源码:(注意,这里JQ文档没有贴出来,需要自行引入) HTML文件: <!DOCTYPE html> <html> <head> <meta charset=
python实现大转盘抽奖效果

本文实例为大家分享了python实现大转盘抽奖的具体代码,供大家参考,具体内容如下选择转盘中的某一个方框,来进行抽奖 import tkinter #导入线程模块 import threading import time #导入代码的sleep 代码休眠 root = tkinter.Tk() root.title('大转盘') root.minsize(300,300) #摆放按钮 btn1 = tkinter.Button(root,text = '樱桃',bg = 'red') btn1
JS实现简单的抽奖转盘效果示例

本文实例讲述了JS实现简单的抽奖转盘效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS抽奖转盘</title> <style> *{ margin:0; padding:0; list-style: none; } .big{
用jQuery旋转插件jqueryrotate制作转盘抽奖

本文实例为大家分享了jQuery旋转插件jqueryrotate制作转盘抽奖的具体代码,供大家参考,具体内容如下原文链接:js HTML5 Canvas绘制转盘抽奖下载地址:jqueryrotate <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"/> <meta name="viewport" content=&q
js+canvas实现转盘效果（两个版本）

本文实例为大家分享了js+canvas实现转盘效果的具体代码,供大家参考,具体内容如下用到了canvas的绘制,旋转,重绘操作,定时器,文本,平移,线条,圆,清理画布等等: 版本一不可以点击,刷新旋转 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>转盘抽奖</title> <style type="text/css&quo

JS旋转实现转盘抽奖效果

相关推荐

随机推荐