时间：2023-07-22 00:27:02 | 来源：网站运营
时间：2023-07-22 00:27:02 来源：网站运营
使用javascript、css、jquery和php实现转盘抽奖：本课程由jayki发布在实验楼，详细教程及在线练习地址：PHP - 转盘抽奖
在线咨询
git clone http://git.shiyanlou.com/shiyanlou/zhuanpan进入下载目录：cd zhuanpan<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>zhuanpan</title></head><body> <div> <ul> <li><img src="img1.jpg" /></li> <li><img src="img2.jpg" /></li> <li><img src="img3.jpg" /></li> <li><img src="img4.jpg" /></li> <li><img src="btn.jpg" /></li> <li><img src="img1.jpg" /></li> <li><img src="img2.jpg" /></li> <li><img src="img3.jpg" /></li> <li><img src="img4.jpg" /></li> </ul> </div></body></html>打开浏览器，显示如下：div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框}然后为包含 img 的 li 元素设置样式。首先将 li 元素设置为向左浮动（float:left），长度、宽度设置为图片的长宽大小，另外加上一个黑色边框，设置图片间的间距。li{ width:129px; height:59px; border:3px solid black; float:left; // 向左浮动 margin:8px 0 0 8px; // 设置图片间的间距 list-style:none;}打开浏览器，显示如下：<!--增加class="btn"-->..........<li><img src="img4.jpg" /></li><li class="btn"><img src="btn.jpg" /></li><li><img src="img1.jpg" /></li>..........// 样式文件.btn{ border:3px solid red; // 设置为红色边框 cursor:pointer; // 设置光标类型为指针 }最后我们还要设置一个样式，就是当转盘转到一张图片上时显示的样式。我们可以设置当转盘转到某张图片上时，该包含该图片的 li 元素边框为红色。.cur{ border:3px solid red; // 设置为红色边框}这样我们的 html 代码基本 ok 了，完整代码如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>zhuanpan</title><style type="text/css">div{ margin: 100px auto 0px; width:500px; height:250px; border:3px solid black;}li{ width:129px; height:59px; border:3px solid #000; float:left; margin:8px 0 0 8px; list-style:none;}.btn{ border:3px solid red; cursor:pointer;}.cur{ border:3px solid red;}</style></head><body> <div> <ul> <li><img src="img1.jpg" /></li> <li><img src="img2.jpg" /></li> <li><img src="img3.jpg" /></li> <li><img src="img4.jpg" /></li> <li class="btn"><img src="btn.jpg" /></li> <li><img src="img1.jpg" /></li> <li><img src="img2.jpg" /></li> <li><img src="img3.jpg" /></li> <li><img src="img4.jpg" /></li> </ul> </div></body></html>setTimeout(code,millisec)code：要调用的函数后要执行的 JavaScript 代码串。millisec：在执行代码前需等待的毫秒数。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，并且只执行一次。 ...... <ul> <li id="c1"><img src="img1.jpg" /></li> <li id="c2"><img src="img2.jpg" /></li> <li id="c3"><img src="img3.jpg" /></li> <li id="c8"><img src="img4.jpg" /></li> <li class="btn"><img src="btn.jpg" /></li> <li id="c4"><img src="img1.jpg" /></li> <li id="c7"><img src="img2.jpg" /></li> <li id="c6"><img src="img3.jpg" /></li> <li id="c5"><img src="img4.jpg" /></li> </ul> ......我们为每个 li 元素增加了字符 c 加上数字序号的 id，但 id 并不是按照元素从上到下的顺序来的，这是因为是按照转动顺序来的。$('#c1').addClass('cur');当然，转动过程不光要为该 li 元素增加 cur 类，还需要删除它前面一步 li 元素的 cur 类。<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">// 整个转动过程所需的步骤var step = [['c1',0], // 第一个元素特殊设置['c1', 500],['c2', 400],['c3', 300],['c4', 200],['c5', 200],['c6', 200],['c7', 200],['c8', 200],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 200],['c3', 300],['c4', 300],['c5', 300],['c6', 300],['c7', 300],['c8', 300],['c1', 400],['c2', 400],['c3', 400],['c4', 400],['c5', 400],['c6', 400],['c7', 400],['c8', 400]];// 记录当前步数，即step数组的下标var current = 1;// 设置样式和重新设置定时器function run(){ // 删除之前设置的cur类 $('#'+step[current-1][0]).removeClass('cur'); // 为当前元素设置cur类 $('#'+step[current][0]).addClass('cur'); // 判断step数组所有步骤是否已经走完 if(current == step.length - 1){ alert("over"); window.location.reload(); }else{ // 重新设置定时器 setTimeout('run()', step[current][1]); current++; }}</script>下面我们来看看效果怎么样。首先将上面的 js 代码添加到 index.html文件中 </div> 的后面，并且为中间的按钮添加一个单击事件。<li class="btn"><img src="btn.jpg" onclick="run();"/></li>打开浏览器，点击按钮，转盘已经开始转动，转盘效果已经实现了。 // 判断step数组所有步骤是否已经走完 if(current == step.length - 1){ alert("over"); window.location.reload(); }我们是通过上面的代码来判断是否结束的，那么我们可以通过修改上面的代码实现让转盘停止到指定的图片上。 // 判断是否结束 if(step.length - current - 1 + 2 == 8){ alert("over"); window.location.reload(); }其中 8 表示总共图片数量（不包括按钮）。打开浏览器，点击按钮发现停在了第二张图片上了。 var data = 1; // 指定需要停在图片的序号 var total = 8; // 图片总量（不包括按钮） .................. // 判断是否结束 if(step.length - current - 1 + data == total){ alert("over"); window.location.reload(); }至此，转动效果已经完成了。$category = 3; // 奖品种类数$lucknum = 0; // 幸运数字// 每个奖品依次中奖的概率$probability = array( 10, // 三等奖 20, // 二等奖 30, // 一等奖);// 奖品名称$prizename = array( 'third prize', 'second prize', 'first prize',);// 随机选择对哪个奖品种类进行抽奖$caterandom = mt_rand(0, $category - 1); // 对之前随机选择的奖品种类进行抽奖$random = mt_rand(0, $probability[$caterandom]);$probability 数组元素与 $prizename 数组元素是对应的。<?php$category = 3; // 奖品种类数$lucknum = 0; // 幸运数字// 每个奖品依次中奖的概率$probability = array( 10, // 三等奖 20, // 二等奖 30, // 一等奖);// 奖品名称$prizename = array( 'third prize', 'second prize', 'first prize',);// 奖品图片在页面上的序号,返回给前端需要$prizecode = array( 3, // 三等奖图片，也可以是6 2, // 二等奖图片，也可以是7 1, // 一等奖图片，也可以是4);// 随机选择对哪个奖品种类进行抽奖$caterandom = mt_rand(0, $category - 1); // 对之前随机选择的奖品种类进行抽奖$random = mt_rand(0, $probability[$caterandom]); if($random == $lucknum){ // 如果抽中，返回奖品名称和奖品图片在页面上的序号 $data = array( $prizename[$caterandom], $prizecode[$caterandom], );// 以json格式返回给前端js echo json_encode($data);}else{ // 未抽中，返回谢谢参与文字和图片的序号 $data = array( 'Thank you!', 5, ); echo json_encode($data);}?>$.ajax({ url: url , type: 'GET', data: data , dataType: dataType, success: success });其中 url 参数是必需的，规定把请求发送到哪个 url。function start(){ $.ajax({ url: "http://127.0.0.1/index.php", type:"GET", dataType: "json", success: function(d){ msg = d[0]; // 设置转盘结束时弹窗显示的文字 data = d[1]; // 设置需要停在图片的序号 run(); } });}并将按钮的 onclick 事件处理函数更改为 start()。<li class="btn"><img src="btn.jpg" onclick="start();"/></li>包含 js 的完整 html(index.html) 代码如下所示：<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>zhuanpan</title><style type="text/css">div{margin: 100px auto 0px;width:500px;height:250px;border:3px solid black;}li{width:129px; height:59px; border:3px solid #000; float:left; margin:8px 0 0 8px; list-style:none;}.btn{ border:3px solid red;cursor:pointer}.cur{ border:3px solid red;}</style></head><body> <div> <ul> <li id="c1"><img src="img1.jpg" /></li> <li id="c2"><img src="img2.jpg" /></li> <li id="c3"><img src="img3.jpg" /></li> <li id="c8"><img src="img4.jpg" /></li> <li class="btn"><img src="btn.jpg" onclick="start();"/></li> <li id="c4"><img src="img1.jpg" /></li> <li id="c7"><img src="img2.jpg" /></li> <li id="c6"><img src="img3.jpg" /></li> <li id="c5"><img src="img4.jpg" /></li> </ul> </div><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">// 整个转动过程所需的步骤var step = [['c1',0], // 第一个元素特殊设置['c1', 500],['c2', 400],['c3', 300],['c4', 200],['c5', 200],['c6', 200],['c7', 200],['c8', 200],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 100],['c3', 100],['c4', 100],['c5', 100],['c6', 100],['c7', 100],['c8', 100],['c1', 100],['c2', 200],['c3', 300],['c4', 400],['c5', 400],['c6', 400],['c7', 400],['c8', 400],['c1', 400],['c2', 400],['c3', 400],['c4', 400],['c5', 400],['c6', 400],['c7', 400],['c8', 400]];// 记录当前步数，即step数组的下标var current = 1;// 指定需要停在图片的序号var data = 5; // 图片总量（不包括按钮）var total = 8;// 转盘结束时弹窗显示的文字 var msg = '';// 设置样式和重新设置定时器function run(){ // 删除之前设置的cur类 $('#'+step[current-1][0]).removeClass('cur'); // 为当前元素设置cur类 $('#'+step[current][0]).addClass('cur'); // 判断step数组所有步骤是否已经走完 if(step.length - current - 1 + data == total){ alert(msg); window.location.reload(); }else{ // 重新设置定时器 setTimeout('run()', step[current][1]); current++; }}function start(){ $.ajax({ url: "http://127.0.0.1/index.php", type:"GET", dataType: "json", success: function(d){ msg = d[0]; // 转盘结束时弹窗显示的文字 data = d[1]; // 指定需要停在图片的序号 run(); } });}</script></body></html>sudo apt-get install nginx执行下面的命令安装 php：sudo apt-get updatesudo apt-get install php5-fpm接下来修改 nginx 的配置文件，文件为 /etc/nginx/sites-available/default：使用vim编辑器sudo vim /etc/nginx/sites-available/default或使用gedit编辑器sudo gedit /etc/nginx/sites-available/default定位到 24 行，修改为 root /home/shiyanlou/zhuanpan。sudo service nginx startsudo service php5-fpm start进入 /home/shiyanlou/zhuanpan 目录，将上面完整的 html 代码写入 index.html 文件，完整的 php 代码写入 index.php 文件。由于实验楼环境不支持汉字输入，上面的文字可以拼音或英文代替。关键词：实现,转盘,使用
