<!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. JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署

    接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...

  2. [转]Date and String Function in BluePrism

    本文转自:https://www.codeproject.com/Articles/1247389/Date-and-String-Function-in-BluePrism This article ...

  3. .NET垃圾回收机制 GC

    线程栈 stuck:存值类型,和引用类型的引用  先进后出,链表形式,连续摆放 CLR(公共语言运行库(Common Language Runtime))启动进程,main函数为一个线程入口 进程堆h ...

  4. Vmware安装CentOs7+gitlab(一)

    本篇文章主要介绍了VMware安装Centos7超详细过程(图文),具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.软硬件准备 软件:推荐使用VMwear,我用的是VMwear 12 镜像:Ce ...

  5. Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  6. Android视频录制从不入门到入门系列教程(三)————视频方向

    运行Android视频录制从不入门到入门系列教程(二)————显示视频图像中的Demo后,我们应该能发现视频的方向是错误的. 由于Android中,Camera给我们的视频图片的原始方向是下图这个样子 ...

  7. 我们距离AI编程还有多远？

    近几年来,人工智能的信息以不同形式霸占着我们的眼球,我们知道AlphaGo.微软小冰.Sophia,了解过自动驾驶.无人机.智能家居等,深知人工智能是在记忆力.学习力.运算力方面都远超人类的存在,但人 ...

  8. 记一次使用SimpleDateFormat 格式化时间时遇到的问题

    网上的使用方法一大堆,我就不再介绍了,就写一下自己遇到的问题. 先来实现一下获取当前时间: SimpleDateFormat simpleDateFormat =new SimpleDateForma ...

  9. CRC32明文攻击

    明文攻击是一种较为高效的攻击手段,大致原理是当你不知道一个zip的密码,但是你有zip中的一个已知文件(文件大小要大于12Byte)时, 因为同一个zip压缩包里的所有文件都是使用同一个加密密钥来加密 ...

  10. Django ORM 使用原生 SQL

    使用原生sql的 方法 : raw # row方法:(掺杂着原生sql和orm来执行的操作) res = CookBook.objects.raw('select id as nid from epo ...