javascript+css3实现抽奖大转盘

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
*{margin:0;padding:0;}
#dp-box{width:531px;height:531px;margin:0 auto;background:url(turntable-bg2.png) center no-repeat;position:relative;}
#zp-box{width:448px;height:448px;float:left;margin:37px 40px;-moz-transition:all 6s ease-in-out;
-o-transition:all 6s ease-in-out;transition:all 6s ease-in-out;
-webkit-transition:all 6s ease-in-out;}
#zj-box{witdh:174px;height:228px;position:absolute;left:170.5px;top:151.5px;z-index:1;
}
</style>
<script src="ajax.js"></script>
<script>
window.onload=function(){
var oZpbox=document.getElementById(‘zp-box‘);
var oZjbox=document.getElementById(‘zj-box‘);
var timer=null;
var json=[{‘chi‘:0,‘zj‘:‘差一点没中哦,加油再来一次‘},{‘chi‘:1,‘zj‘:‘恭喜你中奖了一等奖‘},{‘chi‘:2,‘zj‘:‘恭喜你中奖了二等奖‘},{‘chi‘:3,‘zj‘:‘恭喜你中奖了三等奖‘},{‘chi‘:4,‘zj‘:‘恭喜你中奖了四等奖‘},{‘chi‘:5,‘zj‘:‘恭喜你中奖了五等奖‘},{‘chi‘:6,‘zj‘:‘恭喜你中奖了六等奖‘}];
var arr=eval(json);
var a=1;
var zp = function(){
clearInterval(timer);
var len=arr.length;
var n = Math.floor(Math.random() * arr.length - 1)+1;
var d=0;
var Deg=0;
switch (n){
case 0:
d=331;
break;
case 1:
d=25;
break;
case 2:
d=76;
break;
case 3:
d=127;
break;
case 4:
d=178;
break;
case 5:
d=229;
break;
case 6:
d=280;
break;
};
Deg=‘rotate‘+‘(‘+((3600*a)+d)+‘deg‘+‘)‘;
oZpbox.style.webkitTransform=Deg;
oZpbox.style.MozTransform=Deg;
oZpbox.style.msTransform=Deg;
oZjbox.removeEventListener("click",zp,false);
timer=setInterval(function(){
alert(arr[n].zj);
clearInterval(timer);
return oZjbox.addEventListener("click",zp,false);
},6100);
a++;
}
oZjbox.addEventListener("click",zp,false);
};

</script>
<body>
<div id="dp-box">
<div id="zp-box">
<img src="turntable2.png">
</div>
<div id="zj-box"><img src="pointer.png"></div>
</div>
</body>
</html>

时间: 2024-07-30 02:27:02

javascript+css3实现抽奖大转盘的相关文章

在线抽奖大转盘和概率计算

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>抽奖效果演示</title> <style> .rotary { position: relative; width: 854px; height: 504px; margin: 0 auto; background: #d71f2e ur

纯CSS3大转盘抽奖(响应式、可配置)

源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘图的绚丽,但也总算完成了一个抽奖的 Demo,详见:https://github.com/givebest/wechat-turntalbe-canvas. 事后想起,CSS3 实现也并不是无有益处,比如简单.快捷.调试方便.渲染想来也是要比 Canvas 要高效的,更重要的一点是支持媒体查询,大转

大转盘抽奖css3+js(简单书写)

今天花了一段时间简单写了下抽奖大转盘,这里写的只是自己想到的简单的写了下(也希望收获其他想法),后续,再写的话会更新. 大体思路:页面加载完成后,通过监听开始按钮的点击事件.然后会根据产生的随机数,通过控制旋转针对象的transform属性,然后进行旋转,最后在结束后获取存储来数组中对应的抽奖内容最后弹出. 知识点:transform, translation,js数组,Math等等 先看下效果,没有素材,只是用css简单的布了下局.不要喷我比较简陋,嘿嘿. 接下来是基本代码结构: 1 <div

PHP新写的大转盘抽奖源码

中奖概率 抽奖大转盘演示:http://www.sucaihuo.com/php/3301.html function getRand($proArr, $proCount) { $result = ''; $proSum = 0; foreach ($proCount as $key => $val) { if ($val <= 0) { continue; } else { $proSum = $proSum + $proArr[$key]; } } foreach ($proArr as

js幸运大转盘开发

最终效果实例下载:http://www.oschina.net/code/snippet_2352644_54997 一.大转盘准备工作 网上的一个抽奖大转盘实例http://www.jq22.com/yanshi2252 这就是我们要开发的效果,不过我们是让指针转,我们先分析这个效果: 结构有2部分,上面是指针背景图,下面是奖项图 点击指针元素开始抽奖,会转动一定圈数停下来 停下来的位置指针指使那个奖项,就会弹出获奖信息提示 这是参考效果,我们分析自己的大概实现: 同样上下2部分 点击指针转动

jquery——九宫格大转盘抽奖

一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery九宫格大转盘抽奖</title> <style> #lottery{width:570px;height:510p

大转盘抽奖

这周做了2个大转盘抽奖,一个使用了jQueryRotate.2.2.js插件,兼容到IE6,另外一个利用css3自己尝试写的 1.插件jQueryRotate.2.2.js(兼容基本浏览器,兼容到IE6) 效果查看: 此插件必须事先引入jquery插件,PC端推荐 JS插件代码: // VERSION: 2.2 LAST UPDATE: 13.03.2012 /* * Licensed under the MIT license: http://www.opensource.org/licens

jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

原型导航应用于大转盘抽奖客户端显示页面实例

<html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>大转盘客户端</title> <meta name="keyw