js实现图片的随机抽奖

随机抽奖

<!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 type="text/javascript" src="jquery.js"></script><script language='javascript' type='text/javascript'>/*分析：1. 给开始按钮绑定单击事件1.1 定义循环定时器1.2 切换小相框的src属性* 定义数组，存放图片资源路径* 生成随机数。数组索引2. 给结束按钮绑定单击事件1.1 停止定时器1.2 给大相框设置src属性*/var imgs = ["pic/1.jpg","pic/2.jpg","pic/3.jpg",];var startId;//开始定时器的idvar index;//随机角标$(function () {//处理按钮是否可以使用的效果$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);//1. 给开始按钮绑定单击事件$("#startID").click(function () {// 1.1 定义循环定时器 20毫秒执行一次startId = setInterval(function () {//处理按钮是否可以使用的效果$("#startID").prop("disabled",true);$("#stopID").prop("disabled",false);//1.2生成随机角标 0-6index = Math.floor(Math.random() * 3);//0.000--0.999 --> * 7 --> 0.0-----6.9999//1.3设置小相框的src属性$("#img1ID").prop("src",imgs[index]);},20);});//2. 给结束按钮绑定单击事件$("#stopID").click(function () {//处理按钮是否可以使用的效果$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);// 1.1 停止定时器clearInterval(startId);// 1.2 给大相框设置src属性$("#img2ID").prop("src",imgs[index]).hide();//显示1秒之后$("#img2ID").show(1000);});});</script></head>
<body><!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px"><img id="img1ID" src="pic/1.gif" style="width:160px;height:100px"/>
</div><!-- 大像框 -->
<divstyle="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"><img id="img2ID" src="pic/1.gif" width="800px" height="500px"/>
</div><!-- 开始按钮 -->
<inputid="startID"type="button"value="点击开始"style="width:150px;height:150px;font-size:22px"><!-- 停止按钮 -->
<inputid="stopID"type="button"value="点击停止"style="width:150px;height:150px;font-size:22px"></body>
</html>

js实现图片的随机抽奖相关推荐

php js抽奖,JS做出随机抽奖系统
这次给大家带来JS做出随机抽奖系统,JS做出随机抽奖系统的注意事项有哪些,下面就是实战案例,一起来看一下. 用JavaScript实现一个简单的抽奖系统,有[开始]按钮和[停止]按钮. 功能: - 点 ...
html里用js实现随机抽奖,js实现简单随机抽奖的方法
本文实例讲述了js实现简单随机抽奖的方法.分享给大家供大家参考.具体实现方法如下: js随机抽奖程序 var alldata = "a,b,c,d,e,f,g,h,i,j,k" v ...
简洁风个人主页（3） js背景图片随机切换
静态页面做完了,现在用js做一个背景图片随机切换的效果. 1.点击'个人网站'这个字样,实现body背景的切换.所以,首先获取这两个节点. var body = document.body; var ...
【Vue.js】实现随机抽奖
[Vue.js]实现随机抽奖代码实例 <!DOCTYPE html> <html lang="en"><head><meta chars ...
前端笔记82——随机抽奖的JS代码
前言在前端的开发当中,我们肯定会遇到随机抽奖的需求.我们要怎么去实现呢?下面就来分享随机抽奖的JS代码,有需要的小伙伴可以复制到编译器当中运行查看效果. 随机抽奖的JS代码 <!DOCTYPE ...
原生JS开箱随机抽奖代码
下载地址原生JS制作开箱随机抽奖小游戏,思路比较简单,十分实用!您可以随意定制抽奖奖品,点击开启按钮,箱子筛选随机产生中奖结果弹窗提示.ps:演示内容无任何含义. dd:
用js写随机抽奖代码
<style>.title {width: 300px;height: 50px;background-color: orange;text-align: ...
JavaWeb——使用JavaScript实现随机抽奖
实验名称: 使用 JavaScript实现随机抽奖实验目的: 1. 掌握JavaScript的基本语法及定 ...
做ppt用的小插图_如何用PPT做随机抽奖？
每到年底,每个公司都开始筹备年会活动.年会在员工们最期待的就是抽奖环节了.除了用专门的抽奖软件之外,PPT也可以做随机抽奖. 今天就来解锁这个动画的做法. 1,先设置好图片和文本: 2,选中每一张幻灯 ...
Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘
Axure移动端app抽奖转盘+电商圆盘抽奖+商品抽奖+年会抽奖+抽奖动态+Axure通用抽奖转盘组件原型+九宫格方形随机抽奖原型组件+运营活动抽奖转盘原型演示及下载地址:https://www.p ...

js实现图片的随机抽奖

随机抽奖

js实现图片的随机抽奖相关推荐

最新文章

热门文章