用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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
Jquery $.map使用方法实例详解
Sep 01 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
在PHP的图形函数中显示汉字
2006/10/09 PHP
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
javascript异步编程的六种方式总结
2019/05/17 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
python之import机制详解
2014/07/03 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
Python底层封装实现方法详解
2020/01/22 Python
职业生涯规划书结束语
2014/04/15 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
2015年宣传工作总结
2015/04/08 职场文书