jQuery实现幸运大转盘(php抽奖程序)抽奖程序

HTML5 herman 1482浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

抽奖程序有各式各样的形式,其中幸运大转盘最为常见。线上线下都有很多的使用场景。

本文结合我自己的php网站,是实现一个php抽奖程序。

下图是该抽奖程序的截图:

php抽奖程序

一般的抽奖程序主要是算法程序,界面效果并不重要。算法一般都是后台实现的,前台毕竟是不安全的。

前台只需要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片。根据后台的数据进行效果展示即可。

下面是全部实现代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>幸运大转盘-jQuery+PHP实现的抽奖程序</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:417px; height:417px; position:relative; margin:50px auto}
#disk{width:417px; height:417px; background:url(disk.jpg) no-repeat}
#start{width:163px; height:320px; position:absolute; top:46px; left:130px;}
#start img{cursor:pointer}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#startbtn").rotate({
		bind:{
			click:function(){
				var a = Math.floor(Math.random() * 360);
				 $(this).rotate({
					 	duration:3000,
					 	angle: 0, 
            			animateTo:1440+a,
						easing: $.easing.easeOutSine,
						callback: function(){
							alert('中奖了!');
						}
				 });
			}
		}
	});
});
</script>
</head>
<body>
<div id="main">
   <h2 class="top_title">业余草,www.xttblog.com</h2>
   <div class="msg"></div>
   <div class="demo">
        <div id="disk"></div>
        <div id="start"><img src="start.png" id="startbtn"></div>
   </div>
</div>
</body>
</html>

本实例中借助了jQueryRotatejquery.easing两个插件。相关源代码已上传到我的github:https://github.com/xmt1139057136/lottery

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » jQuery实现幸运大转盘(php抽奖程序)抽奖程序