这个是很简易的转盘，只用了html，css，js

通过css产生一个转盘上的指针，用js动态改变css中的transparent改变指针的角度。再添加一个背景图片类似于奖项的转盘

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dial</title>

    <link rel="stylesheet" type="text/css" href="dial.css">

    <script type="text/javascript" src="dial.js"></script>

</head>

<body>

<div id="sum">

    <div id="content">

    <div id="tri">

    </div>

    <div id="center"><h1>抽奖</h1></div></div></div>

</body>

</html>

背景图片放在sum中，tri是指针上的三角形，center是指针上的圆，三角形和圆都在content中以便一起运动。

*{

    margin: 0px;

    padding:0px;

}

#sum{

    height: 550px;

    width: 700px;

    background-image: url(dial.jpg);

    position: relative;

}

#content{

    padding: 0px;

    height: 140px;

    width: 140px;

    left: 289px;

    top: 109px;

    margin: 120px auto 0px;

    transform:rotate(0deg);

    position: absolute;

}

#center{

    height: 140px;

    width: 140px;

    border-radius: 140px;

    background-color: #EE4F10;

    color: white;

    line-height: 140px;

    font-weight: bold;

    font-size: 30px;

    text-align: center;

    z-index: ;

    position:relative;

}

#tri{

    height: 0px;

    width: 0px;

    top: -27px;

    left: 26px;

    border-left: 45px solid transparent;

    border-right:45px solid transparent;

    border-bottom: 45px solid #EE4F10;

    z-index: -;

    position: absolute;

}
window.onload=function(){

    var data=[,,,,,];

    var content=document.getElementById("content");

    var center=document.getElementById("center");

    center.onclick=play;

    var timer=null;

    var count=;

    var degv=;

    var random=;

    function play(){

    count=;

    random=Math.floor(Math.random()*);

    clearInterval(timer);

    timer=setInterval(function(){

    roll();

    },);

    }

    function roll(){

    degv=count++;

    degv=degv*;

    if(degv==data[random])

    {

        clearInterval(timer);}

    content.style.webkitTransform="rotate("+degv+"deg)";

    content.style.msTransform="rotate("+degv+"deg)";

    content.style.MozTransform="rotate("+degv+"deg)";

    content.style.OTransform="rotate("+degv+"deg)";

    content.style.transform="rotate("+degv+"deg)";

    }

}

设置一个定时器不断的调用roll方法不断的加指针旋转的角度，直到等于数组中随机选中的角度就会停下来。

js转盘抽奖的更多相关文章

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

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

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

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

  3. 简单JS旋转实现转盘抽奖效果

    闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...

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

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

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

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

  6. js实现转盘抽奖

    大转盘抽奖,主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现. 通常,抽奖的过程需要渐进的效果,所以直接通过旋转属性写比较繁琐. 这 ...

  7. js转盘大抽奖 自定义概率

    公司项目搞优惠活动,让做一个转盘抽奖的活动,转盘抽奖让他转起来 按照概率停止其实都麻烦,但是概率如果设置在前端就会很大的安全漏洞,所以无论为了安全性还是后期的维护问题都要把概率写到后台配置里然后读取配 ...

  8. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

  9. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

随机推荐

  1. 2 column数据构成主键的表转化为1 column为主键的表

    问题:假设有张学生成绩表(tb)如下:姓名 课程 分数张三 语文 74张三 数学 83张三 物理 93张三 德语 null李四 语文 74李四 数学 84李四 物理 94李四 英语 80想变成(得到如 ...

  2. 我的C语言进化史

    Hello, world! 这三年就看看我的C语言还有JAVAscript进化史吧.更厉害的sunmarvell,我等你

  3. jquery 中jsonp的实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...

  4. 大端字节序&小端字节序（网络字节序&主机字节序）

    大端字节序:整数的高位字节存储在内存的低地址处,低字节存储在内存的高地址处. 小端字节序:整数的高位字节存储在内存的高地址处,低字节存储在内存的低地址处. 一般pc大多采用小端字节序,也称为主机字节序 ...

  5. java中 IndexOf()、lastIndexOf()、substring()的用法

    public int indexof(String str)返回字符串中出现str的第一个位置 public int indexof(String str,int fromIndex)返回字符串中从f ...

  6. BZOJ 4668: 冷战

    Description 在一个图上,在两个点间连一条边,问这两个点最早在什么时候联通. Sol 并查集+启发式合并. 按秩合并的并查集...我也不知道什么是按秩合并,反正就跟启发式合并差不多,合并的时 ...

  7. 在Web Api中集成protobuf

    安装WebApiContrib.Formatting.ProtoBuf Install-Package WebApiContrib.Formatting.ProtoBuf 注册ProtoBufForm ...

  8. SQL SERVER中如何在声明游标的语句中,用变量做表名

    -- 因为定义游标所用的表名是变量,所以采用EXEC(定义语句) 的方式来声明游标set @StrSql='DECLARE Ba_Cursor CURSOR FOR (SELECT a.PhoneId ...

  9. Jmeter发送Java请求

    1.创建一个Java工程 2.把Jmeter的lib\ext目录下的ApacheJMeter_java.jar.ApacheJMeter_core.jar文件添加进该项目的Build Path 3.创 ...

  10. UML大战需求分析——阅读笔记03

    读<UML大战需求分析>有感03 状态机图和活动图在样子比较相似,但状态机图是用来为对象的状态及造成状态改变的事件建模.我们大二学习UML统一建模语言状态机图模块时了解到,UML的状态机图 ...