Jquery----实现抽奖效果（根据姓名抽奖）
生活随笔
收集整理的這篇文章主要介紹了
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>
轉載于:https://www.cnblogs.com/Hubert-dzl/p/11125267.html
總結
以上是生活随笔為你收集整理的Jquery----实现抽奖效果（根据姓名抽奖）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深入源码，深度解析Java 线程池的实现
- 下一篇： 高并发高性能服务器是如何实现的