jquery案例实现抽奖效果

文化 2020-01-18 共1个回答

jquery案例实现抽奖效果

案例效果：

20200116.gif

案例代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>抽奖</title><script src="js/jquery-3.2.1.js"></script><script>/*分析：1.给开始按钮绑定单击事件1.1 定义循环定时器1.2 切换小相框的src属性* 定义数组，存放图片资源路径* 生成随机数。数组索引2.给结束按钮绑定单击事件2.1 停止定时器2.2 给大相框设置src属性*/var imgs = ["./img/01.jpg","./img/02.jpg","./img/03.jpg","./img/04.jpg"]var startId;//开始定时器的idvar index;// 随机角标$(function(){// 处理按钮是否可以使用的效果$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);// 1.给开始按钮绑定单击事件$("#startID").click(function(){// 处理按钮是否可以使用的效果$("#startID").prop("disabled",true);$("#stopID").prop("disabled",false);// 1.1 定义循环定时器 20毫秒执行一次startId = setInterval(function(){// 1.2生成随机角标 1-4index = Math.floor(Math.random() * 3)+1;// 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><divstyle="border-style: dotted;width: 160px;height: 100px;"><img id="img1ID" src="./img/01.jpg" style="width: 160px;height: 100px;" /></div><div style="border-style: double;width:800px;height:500px;position:absolute;left:500px;top:10px;"><img id="img2ID" src="./img/01.jpg" style="width:800px;height:500px;" /></div><input type="button" id="startID" value="点击开始" style="width: 150px;height: 150px;font-size: 22px;"><input type="button" id="stopID" value="点击停止" style="width: 150px;height: 150px;font-size: 22px;"></body></html>

ps：如需使用代码，注意代码中的资源导入与路径问题

如有错误或建议欢迎大家指出与评论哈，希望这篇博文能帮助到大家，大家也可以分享给需要的人。

如需转载，请注明出处。https://www.jianshu.com/p/9bd527c54b8a

jquery案例实现抽奖效果