这个是很简易的转盘，只用了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. 基于SSH框架的网上商城的质量属性

    常见质量属性 1.性能 性能就是一个东西有多快,通常指响应时间或延迟. 响应时间:从发出请求到收到响应所用的时间,比如用户点击网页中的超链接或桌面应用程序中的按钮 延迟:消息从A点到B点,通过你的系统 ...

  2. Linux中检索文件

    1 , Use locate command It is a fast way to find the files location, but if a file just created ,it w ...

  3. synchronized使用说明

    好久没有更新博客了,今天试着用简单的语言把synchronized的使用说清楚. synchronized是什么? synchronized是用来保证在多线程环境下代码同步执行的可重入的互斥锁.所谓互 ...

  4. OSI7层模型详解

    首先我们借用百度百科上的图片来基本了解一下OSI7层模型的名称以及结构.下面我将从最底层一层一层往上介绍. 物理层:基于Bit传输,是属于物理信道,最基本的机械.电子.定时接口通信信道. 数据链路层: ...

  5. Repeater、地址栏传值、Response--2016年12月30日

    Repeater  Repeater支持以下5种模板       ● ItemTemplate : 对每一个数据项进行格式设置 [Formats each item from the data sou ...

  6. MySql: 常见错误

    1.  No query specified 出现此错误是sql不合法原因:比如: mysql> select * from t\G;*************************** 1. ...

  7. selenium 下载百度音乐并验证

    package baidu; import java.io.File; import java.io.IOException; import java.util.List; import org.ap ...

  8. linux c/c++

    string 字符串操作 操作数的都是 ( char * )型,操作数必须是指向字符串的指针("a"),不能是字符('a'),操作时不考虑末尾的'\0'. size_t strle ...

  9. 配置VMware虚拟机用绕过校园网达到无线上网配置方法

    因为平时要用到Vmware这样的工具上虚拟机上网, 但是本人是学生狗,学生狗在学校就要面对大学毒瘤软件--锐捷,而锐捷是不允许有虚拟网卡的存在的,所以上网只能用wifi上.之前试了很久,反正是怎么开都 ...

  10. git常用的命令集合

    Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势. Git常用操作命令: 1) 远程仓库相关命令 检出仓库:$ git clone g ...