Jquery----實現抽獎效果(根據姓名抽獎)


一、總體思路:
實現抽獎,主要實現三部分即可:
參與抽獎姓名的顯示部分 開始按鈕 停止按鈕
☆具體實現步驟:
1. 在body內設置元素基本信息
1.1. 設置顯示框(用於顯示中獎人名,可以使div、input等等)
1.2. 設置開始按鈕、結束按鈕(input框)
 
2. 在script標簽內編寫腳本
2.1 定義一個數組,用於存放抽獎人名信息
2.2 設置開始按鈕和停止按鈕的可用或不可用狀態
點擊按鈕之前開始按鈕可用狀態結束按鈕不可用狀態
3. 給開始按鈕綁定事件
3.1. 在開始按鈕綁定的事件中設置循環定時器
3.2. 在定時器中設置開始按鈕和停止按鈕的狀態
點擊開始按鈕之后開始按鈕不可用狀態結束按鈕可用狀態
3.3. 獲取(1-n)之間的隨機數 (n代表數組中參與抽獎的人名個數
3.4. 設置顯示框(用於顯示中獎人名)的文本內容(人名
4. 給結束按鈕綁定事件
4.1 設置開始按鈕和結束按鈕的狀態
點擊結束按鈕之后開始按鈕不可用狀態結束按鈕可用狀態
4.2 清除定時器(結束循環狀態)
 
二、使用到的方法
1. 在js中定義數組: var 數組名 =【”元素1“,”元素2“..........】;
2. jquery的函數入口:$ ( function ( ) { } );
3. 獲取/操作屬性值: $("#id名") .prop("屬性名",“屬性值“);
4. 綁定點擊事件: $("#id名") .click(函數);
5. 設置循環定時器: setInterval(函數,時間)
6. 生成隨機數:
Math.random( ); 生成0-1之間的隨機數;
Math.random( )*n; 生成0-n之間的隨機數 ( 包含小數 );
Math.floor( Math.random( )*n ); 生成0-(n-1)之間的隨機整數;
Math.floor( (Math.random()*n)+1); 生成1-n之間的隨機整數;
7.清除定時器: clearInterval ( 定時器名稱 );
三、代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽簽</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<script>
$(function(){
//定義一個數組,用於存儲姓名
var names=[
"張三",
"李四",
"諸葛亮",
"劉備",
"曹操",
"韓非",
"張良",
"衛庄",
"蓋聶",
];
var time;//定義成員變量,用於接收定時器,也是為清除定時器作准備
var index;//定義成員變量,用於接收生成的隨機數,也是為了給input框設置value值做准備
//先設置按鈕的可用性(在點擊按鈕之前,開水按鈕是可用的,結束按鈕是不可用的)
$("#start").prop("disabled",false);//"disabled"代表可不可用的屬性,系統默認的屬性值是不可用;
$("#stop").prop("disabled",true);//false代表可用,true代表不可用
//給開始按鈕綁定事件
$("#start").click(function(){
//設置定時器
time=setInterval(function(){
//設置愛按鈕的可用性
$("#start").prop("disabled",true);
$("#stop").prop("disabled",false);
//生成隨機數
index=Math.floor((Math.random()*10)+1);
//給input框設置value值
$("#name").prop("value",names[index]);
});
});
//給結束按鈕設置綁定事件
$("#stop").click(function(){
//清除定時器
clearInterval(time);
//設置按鈕狀態
$("#start").prop("disabled",false);
$("#stop").prop("disabled",true);
});
});
</script>
<body>
//信息顯示框(用於顯示中間人名)
<input type="text" id="name" value="張三"
style="width: 250px;height: 50px;border: 2px solid black;text-align: center;
margin-left:450px;margin-top: 100px;background-color: red;color: white; font-size: 26px">
//開始按鈕
<input type="button" id="start" value="開始" style="width: 70px;height: 35px; margin-left: 100px" >
//結束按鈕
<input type="button" id="stop" value="結束" style="width: 70px;height: 35px;">
</body>
</html>
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM