使用jquery实现抽奖的页面

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jquery案例之抽奖</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script language='javascript' type='text/javascript'>//准备一个一维数组，装用户的像片路径var imgs = ["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg"];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-6index=Math.floor(Math.random()*7);//0.000-0.999-->*7-->0.0-6.999-->向下取整-->0-6//设置小相框的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]).hide();//然后1秒漂亮显示$("#img2ID").show(1000);});});</script>
</head>
<body><!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px"><img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div><!-- 大像框 -->
<divstyle="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"><img id="img2ID" src="../img/man00.jpg" 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>

使用的图片

man00.jpg
man01.jpg
man02.jpg
man03.jpg
man04.jpg
man05.jpg
man06.jpg

最终效果图

使用jquery实现抽奖的页面相关推荐

做html5抽奖程序xu,用jQuery实现抽奖程序
本文实例为大家分享了jQuery实现抽奖程序的具体代码,供大家参考,具体内容如下 1. 主要需求实现一个抽奖功能. 点击开始按钮后,开始按钮禁用,停止按钮取消禁用,小图片实现快速切换显示. 点击停止 ...
jquery 照片墙抽奖_使用jQuery滑动面板照片墙画廊
jquery 照片墙抽奖 View demo 查看演示Download Source 下载源 Today we will create a stunning full page photo wall ...
分享一款jQuery全屏滚动页面特性案例
分享一款jQuery全屏滚动页面特性案例. 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子.可以说全屏滚动页面越来越受欢迎.它们就像是竖着的图片轮转一样. 这样的页面有很多,如:iPhon ...
Jquery Ajax调用aspx页面方法
原文:Jquery Ajax调用aspx页面方法在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通 ...
jquery、js父子页面操作总结
jquery 父.子页面之间页面元素的获取,方法的调用 https://www.cnblogs.com/it-xcn/p/5896231.html 一.jquery 父.子页面之间页面元素的获取,方法 ...
基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息关键代码:代码如下: var stop=true; $(window).scroll(function(){ totalheight = parse ...
JQuery调用iframe子页面函数/对象的方法
JQuery调用iframe子页面函数/对象的方法例子: 父页面有个ID为mainfrm的iframe,iframe连接b.html,该页面有个函数test 在父页面调用b.html的test方法为: ...
jQuery如何去判断页面是否有父页面？
jQuery如何去判断页面是否有父页面? 是要判断当前页面是否被嵌入在frame里吗? 1 2 3 if (top != self) { alert('我在框架里'); } 转载于:htt ...
php 页面异步刷新,php+jQuery+Ajax简单实现页面异步刷新
php+jQuery+Ajax简单实现页面异步刷新这里有新鲜出炉的 jQuery 示例,程序狗速度看过来! jQuery javascript 框架 jQuery 是一个兼容多浏览器的 javasc ...

使用jquery实现抽奖的页面

使用jquery实现抽奖的页面

代码

使用的图片

最终效果图

使用jquery实现抽奖的页面相关推荐

最新文章

热门文章