用jQuery实现抽奖程序的方法

这篇文章主要讲解了用jQuery实现抽奖程序的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

目前创新互联已为上1000家的企业提供了网站建设、域名、虚拟主机、网站托管、服务器租用、企业网站设计、铁山网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

1. 主要需求

实现一个抽奖功能。
点击开始按钮后，开始按钮禁用，停止按钮取消禁用，小图片实现快速切换显示。
点击停止按钮后，停止按钮禁用，开始按钮取消禁用，小图片停止切换，将小图片在大图片位置显示。
小图片实现快速切换显示。
点击停止按钮后，淡入淡出选中图。

2. 素材页面

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>抽奖程序</title>
 <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
 
 <style type="text/css">
  #small {
   border: 1px solid blueviolet;
   width: 75px;
   height: 75px;
   margin-bottom: 20px;
  }

  #smallPhoto {
   width: 75px;
   height: 75px;
  }

  #big {
   border: 2px solid orangered;
   width: 500px;
   height: 500px;
   position: absolute;
   left: 300px;
   top: 10px
  }

  #bigPhoto {
   width: 500px;
   height: 500px;
  }

  #btnStart {
   width: 100px;
   height: 100px;
   font-size: 22px;
  }

  #btnStop {
   width: 100px;
   height: 100px;
   font-size: 22px;
  }
 </style> 
</head>

<body>
<!-- 小像框 -->
<div id="small">
 <img id="smallPhoto" src="../img/man00.png"/>
</div>

<!-- 大像框 -->
<div id="big">
 <img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="点击开始"/>
<input id="btnStop" type="button" value="点击停止"/ disabled>
 
<script type="text/javascript">
 
</script>
</body>
</html>

3. 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>抽奖程序</title>
 <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>

 <style type="text/css">
  #small {
   border: 1px solid blueviolet;
   width: 75px;
   height: 75px;
   margin-bottom: 20px;
  }

  #smallPhoto {
   width: 75px;
   height: 75px;
  }

  #big {
   border: 2px solid orangered;
   width: 500px;
   height: 500px;
   position: absolute;
   left: 300px;
   top: 10px
  }

  #bigPhoto {
   width: 500px;
   height: 500px;
  }

  #btnStart {
   width: 100px;
   height: 100px;
   font-size: 22px;
  }

  #btnStop {
   width: 100px;
   height: 100px;
   font-size: 22px;
  }
 </style>
</head>
<body>

<!-- 小像框 -->
<div id="small">
 <img id="smallPhoto" src="../img/man00.jpg"/>
</div>

<!-- 大像框 -->
<div id="big">
 <img id="bigPhoto" src="../img/begin.jpg" />
</div>

<input id="btnStart" type="button" value="开始" onclick="gameStart()">
<input id="btnStop" type="button" value="停止" disabled onclick="gameOver()">

<script type="text/javascript">

 //初始化抽奖的名单（图片地址）
 let imgs = [
  "../img/man00.jpg",
  "../img/man01.jpg",
  "../img/man02.jpg",
  "../img/man03.jpg",
  "../img/man04.jpg",
  "../img/man05.jpg",
  "../img/man06.jpg",
 ];

 //定时器序号
 let counter = null;

 //点击开始
 function gameStart() {
  //开始按钮禁用
  $("#btnStart").prop("disabled",true);
  //停止按钮可用
  $("#btnStop").prop("disabled",false);

  //定义计数变量
  let num = 0;

  //使用定时器实现小图框快速切换图片
  counter = setInterval(function () {
   //通过取余，循环得到数组得到索引
   let index = num%imgs.length;
   //修改小图框中img的src即可
   $("#smallPhoto").attr("src",imgs[index]);
   //计数变量自增
   num++;
  },20);
 }
 
 //点击结束
 function gameOver() {
  //禁用结束按钮
  $("#btnStop").prop("disabled",true);
  //取消开始按钮的禁用
  $("#btnStart").prop("disabled",false);

  //停止小图框的抽奖(停止定时器)
  clearInterval(counter);
  //将计算变量重置为0
  num = 0;

  //获取小图框图片地址
  let imgUrl = $("#smallPhoto").attr("src");

  //将抽奖结果显示在大图框中，并隐藏起来
  $("#bigPhoto").attr("src",imgUrl).hide();

  //将图片进行淡出
  $("#bigPhoto").fadeIn(2000);
 }

</script>
</body>
</html>

示例素材：

用jQuery实现抽奖程序的方法

看完上述内容，是不是对用jQuery实现抽奖程序的方法有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。

文章名称：用jQuery实现抽奖程序的方法
文章路径：https://www.cdcxhl.com/article36/gpcpsg.html

成都网站建设公司_创新互联，为您提供网站导航、App开发、移动网站建设、营销型网站建设、静态网站、网页设计公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容