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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>dial</title>
  6.     <link rel="stylesheet" type="text/css" href="dial.css">
  7.     <script type="text/javascript" src="dial.js"></script>
  8. </head>
  9. <body>
  10. <div id="sum">
  11.     <div id="content">
  12.     <div id="tri">
  13.     </div>
  14.     <div id="center"><h1>抽奖</h1></div></div></div>
  15. </body>
  16. </html>

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

  1. *{
  2.     margin: 0px;
  3.     padding:0px;
  4. }
  5. #sum{
  6.     height: 550px;
  7.     width: 700px;
  8.     background-image: url(dial.jpg);
  9.  
  10.     position: relative;
  11.  
  12. }
  13. #content{
  14.     padding: 0px;
  15.     height: 140px;
  16.     width: 140px;
  17.     left: 289px;
  18.     top: 109px;
  19.     margin: 120px auto 0px;
  20.     transform:rotate(0deg);
  21.     position: absolute;
  22. }
  23. #center{
  24.     height: 140px;
  25.     width: 140px;
  26.     border-radius: 140px;
  27.     background-color: #EE4F10;
  28.     color: white;
  29.     line-height: 140px;
  30.     font-weight: bold;
  31.     font-size: 30px;
  32.     text-align: center;
  33.     z-index: ;
  34.     position:relative;
  35.  
  36. }
  37. #tri{
  38.     height: 0px;
  39.     width: 0px;
  40.     top: -27px;
  41.     left: 26px;
  42.     border-left: 45px solid transparent;
  43.     border-right:45px solid transparent;
  44.     border-bottom: 45px solid #EE4F10;
  45.     z-index: -;
  46.     position: absolute;
  47. }
  1. window.onload=function(){
  2.     var data=[,,,,,];
  3.     var content=document.getElementById("content");
  4.     var center=document.getElementById("center");
  5.     center.onclick=play;
  6.     var timer=null;
  7.     var count=;
  8.     var degv=;
  9.     var random=;
  10.     function play(){
  11.     count=;
  12.     random=Math.floor(Math.random()*);
  13.     clearInterval(timer);
  14.     timer=setInterval(function(){
  15.     roll();
  16.     },);
  17.     }
  18.     function roll(){
  19.     degv=count++;
  20.     degv=degv*;
  21.     if(degv==data[random])
  22.     {
  23.         clearInterval(timer);}
  24.     content.style.webkitTransform="rotate("+degv+"deg)";
  25.     content.style.msTransform="rotate("+degv+"deg)";
  26.     content.style.MozTransform="rotate("+degv+"deg)";
  27.     content.style.OTransform="rotate("+degv+"deg)";
  28.     content.style.transform="rotate("+degv+"deg)";
  29.     }
  30.  
  31. }

设置一个定时器不断的调用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. GridLayout 使用

    上次做了一个小键盘,请见:PopupWindow 使用. 效果是这样的: 可以看到,上面的按键是不一样大小的.因为是用LinearLayout布局,用的Button样式也是默认的.数字键和文字键的大小 ...

  2. ObjC运行时部分概念解析(二)

    上篇文章简单的说明了两个关键字究竟是什么,这里主要讲讲ObjC中各种基本内存模型 Method typedef struct objc_method *Method; struct objc_meth ...

  3. JS利用取余实现toggle多函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js中Window 对象及其的方法

    window.location 对象 window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面.window.location 对象在编写时可不使用 wind ...

  5. 渐进式框架、自底向上增量开发的vue

    官网对vue.js的介绍是这样的: 一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. 那么到底什么是渐进式框架.自底向上增量开发又是什么呢? 其实我觉得这 ...

  6. mysql的enum和set数据类型

    定义一个ENUM或者SET类型,可以约束存入的数值. ENUM中的值必须是定义过数值列中的一个,比如ENUM('a','b','c'),存入的只能是'a'或者'b'或者'c',如果存入'','d'或者 ...

  7. 数据库（Database）

    一.定义 1. 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,简单来说是本身可视为电子化的件柜--存储电子文件的处所,用户可以对文件中的数据进行新增.截取.更新.删除等操作.数 ...

  8. ScriptedSandbox64.exe 在写Winform程序Debug时不停提交数据

    抓包时发现不停的在提交数据,导致抓包内容看不到. 取消方式:Tools -> Options -> Debugging -> General -> Enable Diagnos ...

  9. Oracle基础知识（一）、简介与安装

    文章提纲 Oracle简介与发展历程 安装实例(面向普通开发者) 一.Oracle简介与发展历程 中文名称甲骨文公司,全称为甲骨文股份有限公司(甲骨文软件系统有限公司).甲骨文已超越 IBM ,成为继 ...

  10. Eclipce结合Ant进行编译、打包、传输、运行

    注意: 用Ant构建时,build path只能是单级的,如默认的src,如果是类似basePath/jsr253这样的话,运行Ant build时会报错,说找不到jsr253. (此文讲述的是以an ...