这个是很简易的转盘，只用了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. cookie （储存在用户本地终端上的数据）

    Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密).定义于 RFC2109 和 2965 中的都已废弃 ...

  2. sublime3的安装和插件之类的

    1.http://www.sublimetext.com/3 选择适合自己电脑的下载 2.下载完之后打开,help -> enter lisence 谷了下注册码如下,粘贴过去,万一不行请自由飞 ...

  3. mac 下设置jdk 路径，设置hadoop 路径

    1. touch ~/.bash_profile  创建一个文件 2.vim ~/.bash_profile JAVA_HOME=/Library/Java/JavaVirtualMachines/j ...

  4. iOS10 权限崩溃问题

    iOS10 权限崩溃问题 原文: http://blog.csdn.net/runleelrg/article/details/51673025 今天 手机升级了 iOS10 Beta,然后用正在开发 ...

  5. react+redux官方实例TODO从最简单的入门（5）-- 查

    上一篇文章<改>实现了,最后一个功能--<查>! 这个查是稍微要复杂一点的功能,官方实现的就是一个过滤数组的效果,然后展示出来,这里有3个状态,all,completed,ac ...

  6. html5 canvas 实现倒计时 功能

    function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...

  7. 在Ubuntu 14.04安装和使用Docker

    Docker是一个开源软件,它可以把一个Linux应用和它所依赖的一切(比如配置文件)都封装到一个容器.然而,Docker与虚拟机不同,它使用了沙箱机制,Docker容器不运行操作系统,它共享主机上的 ...

  8. Spring MVC 中 HandlerInterceptorAdapter的使用

    一般情况下,对来自浏览器的请求的拦截,是利用Filter实现的,这种方式可以实现Bean预处理.后处理. Spring MVC的拦截器不仅可实现Filter的所有功能,还可以更精确的控制拦截精度. s ...

  9. JS截取，删除，替换字符串常用方法详细

    删除和替换是一样的,开始用的是,如果是删除就直接替换为空 arr="abc001abc002abc003" arr.replace('abc','123') 结果发现只能替换第一个 ...

  10. 20. Valid Parentheses

    1.题目: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if th ...