用jQuery实现抽奖程序

更新时间：2020年04月12日 11:28:31 作者：Regino

这篇文章主要为大家详细介绍了用jQuery实现抽奖程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现抽奖程序的具体代码，供大家参考，具体内容如下

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的浮动DIV显示提示信息并自动隐藏
浮动DIV定时显示提示信息,如操作成功, 失败等,需要的朋友可以参考下。
2011-02-02
jquery 页面全选框实践代码
页面中经常遇到与全选相关的操作，利用jquery集成了一下，主要为了方便使用吧～
2010-04-04
jQuery计算文本框字数及限制文本框字数的方法
一个中文算两个，一个符号或数字，英文，算一个。（如果是规定140个字，乘以2，那么就是280个）。需要用到Math.ceil方法，因为最后还是要除以2来还原显示给用户的字数;
2016-03-03
jQuery插件EnPlaceholder实现输入框提示文字
EnPlaceholder插件支持密码框哦！实际对比同类的placeholder插件在ie等浏览器下效果要好很多！下面我们来具体探讨下此插件的使用方法吧。
2015-06-06
Javascript jquery css 写的简单进度条控件
很多的时候用户需要等待你“臃肿”的 Javascript 代码处理完成（Web 2.0 的特色）。期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂，无非就是获得总的处理条目，然后获得一个百分比，再显示输出。
2008-03-03
通过jQuery源码学习javascript(一)
最近在做日志统计程序，发现对方的程序是在Jquery基础上进行开发的，而公司的网站的框架是prototype。而且我也早就想了解一下Jquery源码，故决定研究Jquery源码，模拟它的方法
2012-12-12
jquery操作checkbox实现全选和取消全选
这篇文章主要介绍了jquery操作checkbox实现全选和取消全选,需要的朋友可以参考下
2014-05-05
利用JQuery直接调用asp.net后台的简单方法
下面小编就为大家带来一篇利用JQuery直接调用asp.net后台的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
基于jQuery实现一个marquee无缝滚动的插件
这篇文章主要介绍了基于jQuery实现一个marquee无缝滚动的插件,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
jQuery实现简单的轮播图效果
这篇文章主要为大家详细介绍了jQuery实现简单的轮播图效果，实现自动播放，能手动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09