<!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. [特别公告]RDIFramework.NET微信公众号迁移通知

    亲爱的伙伴们: 非常感谢您们一直以来对RDIFramework.NET开发框架的关注和支持! 为了进一步完善各项功能,能给大家提供更专业.更官方准确的框架资讯,提供更优质的框架合作服务,我们的微信公众 ...

  2. SpringBoot基础系列-SpringCache使用

    原创文章,转载请标注出处:<SpringBoot基础系列-SpringCache使用> 一.概述 SpringCache本身是一个缓存体系的抽象实现,并没有具体的缓存能力,要使用Sprin ...

  3. 我爱Java系列之《JavaEE面试宝典》---【IO流面试总结】

    1.什么是比特(Bit),什么是字节(Byte),什么是字符(Char),它们长度是多少,各有什么区别 答案 Bit最小的二进制单位 ,是计算机的操作部分 取值0或者1 Byte是计算机操作数据的最小 ...

  4. JavaScript 是如何工作的:JavaScript 的内存模型

    摘要: 从内存角度理解 let 和 const 的意义. 原文:JavaScript 是如何工作的:JavaScript 的内存模型 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...

  5. phpstorm 代码注释后,撤销某段代码的注释的,快捷键是什么?

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

  6. Django常见问题

    1.什么是中间件? 中间件是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出. 中间件一般做认证或批量请求处理,django中的中间 ...

  7. lock了mutex的线程退出了却没有unlock时会怎么样?

    https://stackoverflow.com/questions/4424193/what-happens-to-mutex-when-the-thread-which-acquired-it- ...

  8. 学习安卓开发[5] - HTTP、后台任务以及与UI线程的交互

    在上一篇学习安卓开发[4] - 使用隐式Intent启动短信.联系人.相机应用中了解了在调用其它应用的功能时隐式Intent的使用,本次基于一个图片浏览APP的开发,记录使用AsyncTask在后台执 ...

  9. Fragment嵌套Fragment时候。子类fragment调用父容器Fragment方法

    业务场景:有的时候我们的页面可能是Activity 嵌套多个Fragment ..其中某个Fragment 又嵌套多个Fragment. 其中某个子Fragment  定义为  NewsFragmen ...

  10. lua_local变量在new时不会被清空

    前言 我的运行环境 Lua5.3 按照我们以往的Java或C#编程经验,如果一个class被new,那么这个class中所有成员变量的值都是默值或是构造函数中赋的值,但在Lua中的local变量却并不 ...