这个是很简易的转盘，只用了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. 8. vim编辑器高级应用

    1. vim主要模式介绍 命令模式.命令行模式.编辑模式 字符操作:i 当前插入, I行首插入, a当前字符之后插入,A行首插入, ESC退出当前模式 2. vim命令模式 3. vim插入模式 4. ...

  2. MySQL 查询所有子级函数

    BEGIN DECLARE sChildList VARCHAR(4000); DECLARE sChildTemp VARCHAR(4000); SET sChildTemp =cast(rootI ...

  3. win7系统下 自带的定时关机

    进入cmd下,输入shutdown -s -t 600 以上例子代表的是10分钟后自动关机 -s代表定时关机 -t代表着定时,时间以秒为单位一分钟60s 输入完后按enter 定时关机设置完成 当想取 ...

  4. Linux kernel4.4.12 添加make menuconfig 可选项

    Linux kernel 源码添加可选项 闲来无事,顺便记录一篇在Linux kernel make menuconfig 内添加一个可选项. 说不定将来就要用到这个东西呢. linux kernel ...

  5. try catch里面try catch嵌套

    try catch里能否内嵌try catch?答案是肯定的.但是等内层try catch出异常之后是个什么执行顺序呢?看下面代码 static void Main(string[] args) { ...

  6. Linux中fork()函数详解

    一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程, 也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两个进程也可以做不同 ...

  7. DispatcherServlet 和 ContextLoaderListener 的关系，到底用哪个？

    我们先看下这两个东东的配置方法: 对于contextConfigLocation参数,有2个地方可以配置: 1)context-param 是全局性配置 2)servlet下的init-param 是 ...

  8. ModelMapper 中高级使用 java

    ModelMapper 是一个java对象自动映射的第三方架包,用起来很方便,配合阿里的frstjson可以极大简化后台代码. 但是ModelMapper 中文使用说明很少,官网http://mode ...

  9. QuartZ2D __ 简单用法 1

    一. 简单做一个画板 1. 建立一个UIView类 2. 在.m里建立一个延展 3. 分别定义一个起点, 一个终点的结构体属性 . 在建立一个存储路径的数组 @interface DrawView ( ...

  10. 【leetcode】Remove Duplicates from Sorted List

    题目简述 Given a sorted linked list, delete all duplicates such that each element appear only once. For ...