效果演示

具体实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>$(function () {//3、处理按钮点击前和点击后是否可用$("#start").prop("disabled", false);$("#end").prop("disabled", true);// 1、给开始按钮绑定单击事件// 1.1 定义循环计时器// 1.2 切换小相框的src属性// * 定义一个数组，存储图片资源路径// * 生成随机数，数组角标var imgs = ["./image/test1.jpg","./image/test2.jpg","./image/test3.jpg"];var id; //接收定时器返回的id值var index; //数组索引$("#start").click(function () {id = setInterval(function () {//生成随机角标index = Math.floor(Math.random() * 4);/*Math.floor()方法向下取整Math.random()方法可以获取0.0到3.999...的任意值*///获取相框的src属性$("#img1").prop("src", imgs[index]);//处理按钮是否可用$("#start").prop("disabled", true);$("#end").prop("disabled", false);}, 20);})// 2、给结束按钮绑定单击事件// 2.1 停止计时器// 2.2 给大相框设置src属性$("#end").click(function () {clearInterval(id);$("#img2").prop("src", imgs[index]);//处理按钮是否可用$("#start").prop("disabled", false);$("#end").prop("disabled", true);});})</script>
</head><body><!-- 小相框 --><div style="border-style: dotted;width: 90px;height: 150px;"><img id="img1" src="./image/test1.jpg" style="width: 90px;height: 150px;"></div><!-- 大相框 --><div style="border-style:double; width:270px; height:450px"><img id="img2" src="./image/test1.jpg" style="width:270px; height:450px"></div><!-- 开始按钮 --><input id="start" type="button" value="点击开始" style="width: 150px;height: 100px;font-size: 30px;"><!-- 停止按钮 --><input id="end" type="button" value="点击暂停" style="width: 150px;height: 100px;font-size: 30px;">
</body></html>

JQuery实现随机抽奖相关推荐

【jQuery笔记Part3】03-jQuery项目：随机抽奖
jQuery随机抽奖 js 定时器 setInterval() setTimeout() 清除定时器静态页面页面展示按钮点击 jQuery笔记目录 js 定时器具体用法(菜鸟教程) setIn ...
java单数字随机抽奖特效_jquery输入数字随机抽奖特效的简单实现代码
简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果. 效果图如下: 代码如下: jQuery自定义数值抽奖活动代码 - ...
html随机抽奖程序
html随机抽奖程序 <!doctype html> <html> <head> <meta charset="utf-8"> &l ...
php jquery ajax九宫格抽奖,php+jquery+ajax开发抽奖功能模块下载
php+jquery+ajax实现抽奖系统模块代码如下: 首页在抽奖前需要将所有人员的参与名单在屏幕上滚动显示,所以就用jquery实现了, 1. 参与名单将放在一个txt文件里面,我将放到 phon ...
用Python制作一个随机抽奖小工具
最近在工作中面向社群玩家组织了一场活动,需要进行随机抽奖,参考之前小明大佬的案例,再结合自己的需求,做了一个简单的随机抽奖小工具. 今天我就来顺便介绍一下这个小工具的制作过程吧! 先看效果: 1. 核 ...
做ppt用的小插图_如何用PPT做随机抽奖？
每到年底,每个公司都开始筹备年会活动.年会在员工们最期待的就是抽奖环节了.除了用专门的抽奖软件之外,PPT也可以做随机抽奖. 今天就来解锁这个动画的做法. 1,先设置好图片和文本: 2,选中每一张幻灯 ...
Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘
Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘原型演示及下载地址:https://www.p ...
php js抽奖,JS做出随机抽奖系统
这次给大家带来JS做出随机抽奖系统,JS做出随机抽奖系统的注意事项有哪些,下面就是实战案例,一起来看一下. 用JavaScript实现一个简单的抽奖系统,有[开始]按钮和[停止]按钮. 功能: - 点 ...
编写一个随机抽奖程序php,基于PHP实现简单的随机抽奖小程序
摘要:一个抽奖小程序,概论可控,也可某个奖品在前端显示,而程序中根本不可能获得!把所有的概率x10后相加起来,新数组中每项的值等于它前几个的和加上它本身.然后随即生成一个0到最大数之间的一个数,通过循 ...

JQuery实现随机抽奖

效果演示

具体实现

JQuery实现随机抽奖相关推荐

最新文章

热门文章