这个是很简易的转盘，只用了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. 搭建Apache Web服务器

    1.下载Apache服务器的安装包 地址:http://httpd.apache.org/download.cgi 从http://archive.apache.org/dist/httpd/bina ...

  2. JS学习：第二周——NO.2正则

    1.[正则] 就是用来操作(匹配和捕获)的一系列规则: 匹配:校验字符串是否符合我们的规则:返回值--布尔值           匹配这里用的是正则的方法:test(),reg.text( ); 捕获 ...

  3. HBase 基本shell命令

  4. 【OpenCV】访问图像中每个像素的值

    http://blog.csdn.net/xiaowei_cqu/article/details/7557063

  5. empty和isset函数详解

    1.empty函数 用途:检测变量是否为空 若变量不存在则返回 TRUE 若变量存在且其值为"".0."0".NULL..FALSE.array().var $ ...

  6. python之路二十

    一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异步通讯的所有功能.也就是说什么情况下我们都可以通过此方法进行异步刷新的操作.但是它的参数较多,有的时候可能会麻 ...

  7. python string模块

    string.ascii_lowercase ='abcdefghijklmnopqrstuvwxyz' string.ascii_uppercase ='ABCDEFGHIJKLMNOPQRSTUV ...

  8. CentOS 6.3下Samba服务器的安装与配置方法(图文详解)

    这篇文章主要介绍了CentOS 6.3下Samba服务器的安装与配置方法(图文详解),需要的朋友可以参考下   一.简介  Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件, ...

  9. git服务器搭建总结

    1.软件选择 服务端软件:由于我对linux还不熟悉,而且公司用的都是windows,于是找到了bonobo,这是一个基于.net framework 4.5和.net mvc4的开源软件,iis7. ...

  10. bootstrap - 响应式标题栏

    先要拆分: .navbar  先变成相对定位 设置最小高度为50px: 设置底部边距为20px 然后设置一个 透明边框! 边框倒角 4px   //@media (min-width:768px) - ...