实例介绍
网页版
html5网页抽奖代码
<!DOCTYPE html>
<!-- saved from url=(0074)http://www.apiwx.com/index.php?ac=alw&c=o7MB9ji5fQRsE0ZoVAMU7SlnRyMI&tid=5 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="乐享微信">
<title>幸运大转盘抽奖</title>
<link href="./幸运大转盘抽奖_files/activity-style.css" rel="stylesheet" type="text/css">
</head>
<body class="activity-lottery-winning">
<div class="main">
<script type="text/javascript">
var loadingObj = new loading(document.getElementById('loading'),{radius:20,circleLineWidth:8});
loadingObj.show();
</script>
<div id="outercont">
<div id="outer-cont">
<div id="outer"><img src="./幸运大转盘抽奖_files/activity-lottery-1.png" width="310px"></div>
</div>
<div id="inner-cont">
<div id="inner"><img src="./幸运大转盘抽奖_files/activity-lottery-2.png"></div>
</div>
</div>
<div class="content">
<div class="boxcontent boxyellow" id="result" style="display:none">
<div class="box">
<div class="title-orange"><span>恭喜你中奖了</span></div>
<div class="Detail">
<a class="ui-link" href="http://www.weixinjia.net/mobile/showresult.html" id="opendialog" style="display: none;" data-rel="dialog"></a>
<p>你中了：<span class="red" id="prizetype">一等奖</span></p>
<p>你的兑奖SN码：<span class="red" id="sncode"></span></p>
<p class="red">本次兑奖码已经关联你的微信号，你可向公众号发送 兑奖 进行查询!</p>
<p>
<input name="" class="px" id="tel" type="text" placeholder="输入您的手机号码">
</p>
<p>
<input class="pxbtn" id="save-btn" name="提 交" type="button" value="提 交">
</p>
</div>
</div>
</div>
<div class="boxcontent boxyellow">
<div class="box">
<div class="title-green"><span>奖项设置：</span></div>
<div class="Detail">
<p>一等奖：网时奖励200小时 。奖品数量：3 </p>
<p>二等奖：网时奖励100小时 。奖品数量：5 </p>
<p>三等奖：广播台免费点首歌 。奖品数量：10 </p>
</div>
</div>
</div>
<div class="boxcontent boxyellow">
<div class="box">
<div class="title-green">活动说明：</div>
<div class="Detail">
<p>本次活动每人可以转 3 次 </p>
<p> 我们的中奖率高达33.3%！！ </p>
</div>
</div>
</div>
</div>
</div>
<script src="./幸运大转盘抽奖_files/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){window.requestAnimFrame=(function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60)}})();var totalDeg=360*3 0;var steps=[];var lostDeg=[36,66,96,156,186,216,276,306,336];var prizeDeg=[6,126,246];var prize,sncode;var count=0;var now=0;var a=0.01;var outter,inner,timer,running=false;function countSteps(){var t=Math.sqrt(2*totalDeg/a);var v=a*t;for(var i=0;i<t;i ){steps.push((2*v*i-a*i*i)/2)}steps.push(totalDeg)}function step(){outter.style.webkitTransform='rotate(' steps[now ] 'deg)';outter.style.MozTransform='rotate(' steps[now ] 'deg)';if(now<steps.length){requestAnimFrame(step)}else{running=false;setTimeout(function(){if(prize!=null){$("#sncode").text(sncode);var type="";if(prize==1){type="一等奖"}else if(prize==2){type="二等奖"}else if(prize==3){type="三等奖"}$("#prizetype").text(type);$("#result").slideToggle(500);$("#outercont").slideUp(500)}else{alert("谢谢您的参与，下次再接再厉")}},200)}}function start(deg){deg=deg||lostDeg[parseInt(lostDeg.length*Math.random())];running=true;clearInterval(timer);totalDeg=360*5 deg;steps=[];now=0;countSteps();requestAnimFrame(step)}window.start=start;outter=document.getElementById('outer');inner=document.getElementById('inner');i=10;$("#inner").click(function(){if(running)return;if(count>=3){alert("您已经抽了 3 次奖。");return}if(prize!=null){alert("亲，你不能再参加本次活动了喔！下次再来吧~");return}$.ajax({url:"index.php",dataType:"json",data:{token:"o7MB9ji5fQRsE0ZoVAMU7SlnRyMI",ac:"activityuser",tid:"5",t:Math.random()},beforeSend:function(){running=true;timer=setInterval(function(){i =5;outter.style.webkitTransform='rotate(' i 'deg)';outter.style.MozTransform='rotate(' i 'deg)'},1)},success:function(data){if(data.error=="invalid"){alert("您已经抽了 3 次奖。");count=3;clearInterval(timer);return}if(data.error=="getsn"){alert('本次活动你已经中过奖，本次只显示你上次抽奖结果!兑奖SN码为:' data.sn);count=3;clearInterval(timer);prize=data.prizetype;sncode=data.sn;start(prizeDeg[data.prizetype-1]);return}if(data.success){prize=data.prizetype;sncode=data.sn;start(prizeDeg[data.prizetype-1])}else{prize=null;start()}running=false;count },error:function(){prize=null;start();running=false;count },timeout:4000})})});$("#save-btn").bind("click",function(){var btn=$(this);var tel=$("#tel").val();if(tel==''){alert("请输入手机号码");return}var regu=/^[1][0-9]{10}$/;var re=new RegExp(regu);if(!re.test(tel)){alert("请输入正确手机号码");return}var submitData={tid:5,code:$("#sncode").text(),tel:tel,action:"setTel"};$.post('index.php?ac=activityuser',submitData,function(data){if(data.success==true){alert("提交成功，谢谢您的参与");return}else{}},"json")});
</script>
</body></html>
标签： 抽奖
好例子网口号：伸出你的我的手 — 分享！
相关软件
网友评论
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)