<!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. H5 可堆叠的圆环进度条，支持任意数量子进度条

    by Conmajia SN: S22-W1M 由来 看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ...

  3. Unity 3D游戏开发学习路线（方法篇）

    Unity 3D本来是由德国的一些苹果粉丝开发的一款游戏引擎,一直只能用于Mac平台,所以一直不被业外人士所知晓.但是后来也推出了2.5版,同时发布了PC版本,并将其发布方向拓展到手持移动设备.Uni ...

  4. MVC,EF 小小封装

    1.项目中经常要用到 EF,有时候大多数的增删改查都是重复性的东西,本次封装就是为了快速开发,期间没有考虑到架构上的各种思想,就感觉到欠缺点什么东西所以这次将这些拉出来,有存在问题的话还请各位多多指导 ...

  5. Netty中的Channel之数据冲刷与线程安全（writeAndFlush）

    本文首发于本博客,如需转载,请申明出处. GitHub项目地址 InChat 一个轻量级.高效率的支持多端(应用与硬件Iot)的异步网络应用通讯框架 前言 本文预设读者已经了解了一定的Netty基础知 ...

  6. js 百度地图定位

    //百度 layer.msg('正在定位,请稍后'); var geolocation = new BMap.Geolocation({ enableHighAccuracy: true, //是否使 ...

  7. 生鲜配送管理系统_升鲜宝V2.0 供应商协同系统设计思想及设计效果展现（一）

    生鲜配送管理系统[升鲜宝]V2.0 供应商协同系统小程序设计思想及操作说明(一)     生鲜供应链企业,最重要的二个方面,其中一个是客户服务(销售订单)    另外一个就是供应商的管控,只有做好了这 ...

  8. 正则表达式匹配html标签里面的内容

    假如html标签里面有一句:String a = "<style type=\"text/css\"> div \n" + "{ marg ...

  9. Vue源码实现

    链接1:https://www.cnblogs.com/tiedaweishao/p/8933153.html 链接2:https://www.cnblogs.com/erbingbing/p/647 ...

  10. MyDAL - .UpdateAsync() 之 .Set() 使用

    索引: 目录索引 一.API 列表 1.Set<M, F>(Expression<Func<M, F>> propertyFunc, F newVal) 如: .S ...