<!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. .net core api +swagger(一个简单的入门demo 使用codefirst+mysql)

    前言: 自从.net core问世之后,就一直想了解.但是由于比较懒惰只是断断续续了解一点.近段时间工作不是太忙碌,所以偷闲写下自己学习过程.慢慢了解.net core 等这些基础方面学会之后再用.n ...

  2. 策略模式 Strategy 政策Policy 行为型 设计模式（二十五）

    策略模式 Strategy   与策略相关的常见词汇有:营销策略.折扣策略.教学策略.记忆策略.学习策略.... “策略”意味着分情况讨论,而不是一概而论 面对不同年龄段的人,面对不同的商品,必然将会 ...

  3. Yii2设计模式——单例模式

    应用举例 在Yii.php中: require __DIR__ . '/BaseYii.php'; // Yii框架的帮助类,提供框架基本的功能 class Yii extends \yii\Base ...

  4. js调用百度地图接口绘制任意多边形并获取每个点的经纬度等

    来自:https://blog.csdn.net/u013239236/article/details/52213977 侵删 <!DOCTYPE html> <html> & ...

  5. Android为TV端助力:EventBus跨进程发送消息

    单一app内的用法 如果你在单一app内进行多进程开发,那么只需要做以下三步: Step 1 在gradle文件中加入下面的依赖:   dependencies {   compile 'xiaofe ...

  6. 章节十、5-CSS---用CSS 通配符定位元素

    以下演示操作以该网址中的输入框为例:https://learn.letskodeit.com/p/practice 一.css样式中有三种通配符“^.$.*” 语法:tag[attribute< ...

  7. RabbitMQ for Mac OS Install

    使用brew来安装 RabbitMQ brew install rabbitmq 执行看到如下命令: Updating Homebrew... ==> Auto-updated Homebrew ...

  8. mysql8.0绿色版安装及mysqldump备份

    1.下载mysql绿色版压缩包https://dev.mysql.com/downloads/mysql/ 2.解压到安装目录后,在根目录创建data文件夹 3.把mysql下的bin目录添加到环境变 ...

  9. SQLAchemy模块

    老师的博客:http://www.cnblogs.com/wupeiqi/articles/5713330.html 有一篇习详细的博客: http://www.keakon.net/2012/12/ ...

  10. 服务消费者Feign和Ribbon的区别

    1.Ribbon通过注解@EnableEurekaClient/@EnableDiscoveryClient向服务中心注册:    PS:选用的注册中心是eureka,那么就推荐@EnableEure ...