<!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. [转]Blue Prism Interview Questions and Answers

    本文转自:https://www.rpatraining.co.in/blue-prism-interview-questions/ What is a Visual Business Object? ...

  2. C# 合并、拆分PPT幻灯片

    概述 通过合并.拆分的功能,将不同的文档中的幻灯片进行组合形成新的的文档,同时也可以将一个多页的PPT文档按页拆分成多个不同的文档.此功能也丰富了编程人员对PPT幻灯片的操作的选择.下面将分别从以下几 ...

  3. 简述Servlet的基本概念

    Servlet的基本概念 Servlet的概念 http协议作用于客户端-服务端.由客户端发送请求(Request),服务器端接收到数据之后,向客户端发送响应(Response),这就是请求-响应模式 ...

  4. Java高阶语法---static

    背景:听说static Java高阶语法是挺进BAT必经之路. static: 静态static,很多时候会令我望文生义,但是get到了static最重要的一点,其他的理解都还ok. static最重 ...

  5. 可达用户投资额的计算（Java）

    有话要说: 前阵子遇到了一个计算可达用户投资额的问题,觉得非常有趣,故把它记录下来. 问题描述: 某产品可被投资,注册后才可以投资,其注册可以被邀请(并不是每个人都是被邀请的).邀请人可以邀请多个人注 ...

  6. Python 经典面试题汇总之数据库篇

    数据库和缓存 1.列举常见的关系型数据库和非关系型都有那些? 关系型数据库(需要有表结构) mysql.oracle.splserver.postgresql.db2.sybase 非关系型数据库(是 ...

  7. Github入门详情教程

    前言 之前我写了一篇文章<一篇文章了解Github和Git教程>还延伸了几篇阅读,对大部分小白很有用,那么我继续普及下Github页面及其概念. 定义 GitHub 是一个网站,一个面向开 ...

  8. Delphi IfThen语句

    function IfThen(AValue: Boolean; const ATrue: string; AFalse: string = ''): string; overload; $[StrU ...

  9. mongodb复制+分片集原理

    ----------------------------------------复制集---------------------------------------- 一.复制集概述: Mongodb ...

  10. 设置MYSQL数据库编码为UTF-8

    设置MYSQL数据库编码为UTF-8   1.  编辑MySql的配置文件 MySql的配置文件Windows下一般在系统目录下或者在MySql的安装目录下名字叫my.ini,可以搜索,Linux下一 ...