JavaScript实现抽奖（jQuery）

效果展示：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery实现抽奖</title><script src="jquery-3.3.1.min.js"></script>
</head>
<body><script>var imgs=["01.png","02.png","03.png","04.png","05.png"];var startId;//开始定时器的idvar index;//随机角标$(function(){//处理按钮是否可以使用的效果$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);//给开始按钮绑定单击事件$("#startID").click(function(){//定义循环定时器20毫秒执行一次startId=setInterval(function(){//处理按钮是否可以使用的效果$("#startID").prop("disabled",true);$("#stopID").prop("disabled",false);//随机生成角标0-4index=Math.floor(Math.random()*5);//设置小相框的src属性$("#img1ID").prop("src",imgs[index]);},20);});//给结束按钮绑定单击事件$("#stopID").click(function(){//处理按钮是否可以使用的效果$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);//停止定时器clearInterval(startId);//给大相框设置src属性$("#img2ID").prop("src",imgs[index]);// //大相框以某种效果出来，设置动画即可。// $("#img2ID").prop("src",imgs[index]).hide();// //动画的显示速度// $("#img2ID").show(5000);});})</script><!-- 小像框 --><div style="border-style:dotted;width:299px;height:249px"><img id="img1ID" src="01.png" style="width:299px;height:249px"/></div><!-- 大像框 --><div style="border-style:double;width:598px;height:498px;position:absolute;left:500px;top:10px"><img id="img2ID" src="01.png" width="598px" height="498px"/></div><!-- 开始按钮 --><input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px"><!-- 停止按钮 --><input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px"></body>
</html>

我的这个是5个图片循环的，可以参考做出响应修改。
还可以自己添加一些图片的动画效果。

JavaScript实现抽奖（jQuery）相关推荐

超全超实用的Javascript类库和jQuery插件大全之一：图片，地图和图形
为什么80%的码农都做不了架构师?>>> 日期:2012-10-10 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
超全超实用的Javascript类库和jQuery插件大全之二：文字处理，表格和列表处理，实用......
为什么80%的码农都做不了架构师?>>> 日期:2012-10-15 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
JavaScript强化教程——jQuery选择器
本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器选择器实例选取 * $("*") 所 ...
Dom对象、JavaScript对象、jQuery对象区别
一.Dom对象.JavaScript对象.jQuery对象 1.1 Dom对象文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型 ...
jquery.form.js java_教javascript函数和jquery函数的使用$(form).submit(function()
教javascript函数和jquery函数的使用$("form").submit(function() 1.$ 是 JQuery 常用的一个回传函数,定义为 "选取&q ...
JavaScript 框架之jQuery
目录一.JavaScript 框架之jQuery 二.JavaScript - 测试 jQuery 引用 jQuery jQuery 描述测试 jQuery 一.JavaScript 框架之jQu ...
JavaScript text highlighting JQuery plugin
介绍一个JQuery的插件,用来在页面上高亮显示匹配到的字符串. Demo 点击下面的两个链接以查看效果: highlight javascript 点击Remove highlights移除高亮显示 ...
JavaScript事件与jQuery方法
JavaScript中的事件 jQuery中的方法两者关系大多数DOM事件都有一个等效的jQuery方法注意,是大多数,不是全部 JavaScript 使用的是页面元素的事件直接在页面的元素中 ...
10个精选的颜色选择器Javascript脚本及其jQuery插件
Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本实现及其传说中的jQuery插件实现 ...

JavaScript实现抽奖（jQuery）

JavaScript实现抽奖（jQuery）

效果展示：

代码展示：

JavaScript实现抽奖（jQuery）相关推荐

最新文章

热门文章