溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了用jQuery實現抽獎程序的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
1. 主要需求
2. 素材頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽獎程序</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<style type="text/css">
#small {
border: 1px solid blueviolet;
width: 75px;
height: 75px;
margin-bottom: 20px;
}
#smallPhoto {
width: 75px;
height: 75px;
}
#big {
border: 2px solid orangered;
width: 500px;
height: 500px;
position: absolute;
left: 300px;
top: 10px
}
#bigPhoto {
width: 500px;
height: 500px;
}
#btnStart {
width: 100px;
height: 100px;
font-size: 22px;
}
#btnStop {
width: 100px;
height: 100px;
font-size: 22px;
}
</style>
</head>
<body>
<!-- 小像框 -->
<div id="small">
<img id="smallPhoto" src="../img/man00.png"/>
</div>
<!-- 大像框 -->
<div id="big">
<img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="點擊開始"/>
<input id="btnStop" type="button" value="點擊停止"/ disabled>
<script type="text/javascript">
</script>
</body>
</html>3. 代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽獎程序</title>
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
<style type="text/css">
#small {
border: 1px solid blueviolet;
width: 75px;
height: 75px;
margin-bottom: 20px;
}
#smallPhoto {
width: 75px;
height: 75px;
}
#big {
border: 2px solid orangered;
width: 500px;
height: 500px;
position: absolute;
left: 300px;
top: 10px
}
#bigPhoto {
width: 500px;
height: 500px;
}
#btnStart {
width: 100px;
height: 100px;
font-size: 22px;
}
#btnStop {
width: 100px;
height: 100px;
font-size: 22px;
}
</style>
</head>
<body>
<!-- 小像框 -->
<div id="small">
<img id="smallPhoto" src="../img/man00.jpg"/>
</div>
<!-- 大像框 -->
<div id="big">
<img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="開始" onclick="gameStart()">
<input id="btnStop" type="button" value="停止" disabled onclick="gameOver()">
<script type="text/javascript">
//初始化抽獎的名單（圖片地址）
let imgs = [
"../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg",
];
//定時器序號
let counter = null;
//點擊開始
function gameStart() {
//開始按鈕禁用
$("#btnStart").prop("disabled",true);
//停止按鈕可用
$("#btnStop").prop("disabled",false);
//定義計數變量
let num = 0;
//使用定時器實現小圖框快速切換圖片
counter = setInterval(function () {
//通過取余，循環得到數組得到索引
let index = num%imgs.length;
//修改小圖框中img的src即可
$("#smallPhoto").attr("src",imgs[index]);
//計數變量自增
num++;
},20);
}
//點擊結束
function gameOver() {
//禁用結束按鈕
$("#btnStop").prop("disabled",true);
//取消開始按鈕的禁用
$("#btnStart").prop("disabled",false);
//停止小圖框的抽獎(停止定時器)
clearInterval(counter);
//將計算變量重置為0
num = 0;
//獲取小圖框圖片地址
let imgUrl = $("#smallPhoto").attr("src");
//將抽獎結果顯示在大圖框中，并隱藏起來
$("#bigPhoto").attr("src",imgUrl).hide();
//將圖片進行淡出
$("#bigPhoto").fadeIn(2000);
}
</script>
</body>
</html>示例素材：
看完上述內容，是不是對用jQuery實現抽獎程序的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
