<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>抽奖大转盘</title>

  <style type="text/css">

	div{width:650px;height:600px;margin:50px auto;background:url(images/38/turntable-bg.jpg) no-repeat 0 0;position:relative;}

	div #turntable{position:absolute;left:117px;top:59px;transform:rotate(0deg);transition:all 2s ease 0s;}

	div #pointer{position:absolute;left:255px;top:154px;}

  </style>

	<script type="text/javascript">

	window.onload = function(){

		//获取所需元素

		var turntable = document.getElementById('turntable');

		var pointer = document.getElementById('pointer');

		var click_content = 0;

		var timer = 0;

		//操作事件

		pointer.onclick = function(){

			if (click_content>=3){

				alert("您没有机会了");

			} else{

					click_content++;

					var gifts = ['未中奖','免单4999元','免单50元','免单10元','免单5元','免分期服务费','提高白条额度']

					//度数索引值和gifts值相对应

					var degrees = [0,56,103,162,208,260,310]

					//从0~6之间抽取一个值作为与gifts相对应的值,对应的就是应该得到的奖品

					var gifts_index = Math.floor(Math.random()*7);

					var degrees_index = gifts_index

					//要转到的度数就是度数的索引值

					turntable.style.transform = "rotate("+(3*360*click_content+degrees[degrees_index])+"deg)";

					//click_content 表示点击次数

					clearTimeout(timer);

					var timer = setTimeout (function(){

						alert(gifts[gifts_index]);

					},3000)

				}

			}

	}

	</script>

 </head>

 <body>

	<div><img id="turntable" src="data:images/38/turntable.png" alt="" /><img id="pointer" src="data:images/38/pointer.png" alt="" /></div>

 </body>

</html>

　　

抽奖大转盘 js代码的更多相关文章

  1. 微信小程序独家秘笈之抽奖大转盘

    代码地址如下:http://www.demodashi.com/demo/14209.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  2. canvas实现抽奖大转盘

    这里不给用JS,下面地址有效果以及详细代码 效果地址:http://sandbox.runjs.cn/show/d2et4rys

  3. js 大转盘,老虎 机

     http://www.helloweba.com/view-blog-215.htmlhttp://www.ui3g.com/demos/show/1408/http://www.js-css.cn ...

  4. 大转盘抽奖css3+js(简单书写)

    今天花了一段时间简单写了下抽奖大转盘,这里写的只是自己想到的简单的写了下(也希望收获其他想法),后续,再写的话会更新. 大体思路:页面加载完成后,通过监听开始按钮的点击事件.然后会根据产生的随机数,通 ...

  5. php大转盘抽奖

    抽奖大转盘演示:http://www.sucaihuo.com/php/3301.html function getRand($proArr, $proCount) { $result = ''; $ ...

  6. PHP新写的大转盘抽奖源码

    中奖概率 抽奖大转盘演示:http://www.sucaihuo.com/php/3301.html function getRand($proArr, $proCount) { $result = ...

  7. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  8. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  9. 原生js轮盘抽奖实例分析（幸运大转盘抽奖）

    效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...

随机推荐

  1. SLAM+语音机器人DIY系列：（四）差分底盘设计——1.stm32主控硬件设计

    摘要 运动底盘是移动机器人的重要组成部分,不像激光雷达.IMU.麦克风.音响.摄像头这些通用部件可以直接买到,很难买到通用的底盘.一方面是因为底盘的尺寸结构和参数是要与具体机器人匹配的:另一方面是因为 ...

  2. Lumen框架-错误&日志

    介绍 当你开始一个新的Lumen项目的时候,错误和异常功能,已经在框架中注入了.此外,Lumen还集成了Monolog日志函数,支持和提供多种强大的日志处理功能. 配置 错误详情 大量的错误信息在你的 ...

  3. 卷积神经网络CNN

    卷积神经网络,在图像识别和自然语言处理中有很大的作用,讲cnn的中文博客也不少,但是个人感觉说的脉络清晰清晰易懂的不多. 无意中看到这篇博客,写的很好,图文并茂.建议英文好的直接去看原文.英文不好的就 ...

  4. MySQL 笔记整理（13） --为什么数据表删掉一半，表文件大小不变？

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 13) --为什么数据表删掉一半,表文件大小不变? 我们还是以MySQL ...

  5. QT5.6.0 VS2013 Win764位系统QT环境搭建过程

    QT5.6.0 VS2013 Win764位系统QT环境搭建过程 没用过QT自己跟同事要了安装包,按照同事指导方法操作安装部署开发环境结果遇到好多问题,错误网上搜遍了所有帖子也没有找到合适的解决方案. ...

  6. 为什么单线程的Redis这么快？

    一. Redis简介 Redis是一个开源的内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列(hashes), 列表(li ...

  7. Tomcat的常用内置对象

    Tomcat的常用内置对象 1.request内置对象 所谓内置对象就是容器已经创建好了的对象,如果收到一个用户的请求就会自动创建一个对象来处理客户端发送的一些信息,这个内置对象就是request.类 ...

  8. phpstorm 代码注释后，撤销某段代码的注释的，快捷键是什么？

    phpstorm 的代码注释有两种风格,一种是双斜杠,另一种是 /* ...  */风格,两者的快捷键都是开关式(即按第一次为注释,再按一次为撤销注释),快捷键如下: 1.双斜杠注释   Ctrl + ...

  9. Golang学习笔记（一）

    这个系列学习文章是对ASTAXIE大神的GoWeb编程的读书笔记. 1. 关于GOPATH $GOPATH 是系统中重要的环境变量,他不是Go的安装目录. 假如我们将GOPATH设置在这里: /hom ...

  10. ocelot 自定义认证和授权

    ocelot 自定义认证和授权 Intro 最近又重新启动了网关项目,服务越来越多,每个服务都有一个地址,这无论是对于前端还是后端开发调试都是比较麻烦的,前端需要定义很多 baseUrl,而后端需要没 ...