用jQuery实现抽奖程序


Posted in jQuery onApril 12, 2020

本文实例为大家分享了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实现抽奖程序

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 #jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 #jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 #jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 #jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
jquery css实现流程进度条
Mar 26 #jQuery
You might like
如何去掉文章里的 html 语法
2006/10/09 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP简单遍历对象示例
2016/09/28 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
php array_map()函数实例用法
2021/03/03 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
详解Node.js中的Async和Await函数
2018/02/22 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python切片用法实例教程
2014/09/08 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
static关键字的用法
2013/10/07 面试题
公务员职务工作的自我评价
2013/11/01 职场文书
初中生学习的自我评价
2013/11/14 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
买卖合同协议书范本
2014/10/18 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
2014年党建工作总结
2014/11/11 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android