簡介：jQuery自定義數值抽獎活動代碼是一款點擊開始按鈕計算機會產生玩家輸入范圍內的隨機數，點擊停止按鈕，將顯示數字最終結果的效果。
效果展示 http://hovertree.com/texiao/jquery/76/
效果圖如下：
代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery自定義數值抽獎活動代碼 - 何問起</title><base target="_blank" /> 6 7 <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script> 8 <script type="text/javascript" src="http://hovertree.com/texiao/jquery/76/pjs_01.js"></script> 9 <style type="text/css"> 10 #bigDiv { 11 width: 1080px; 12 margin: 0px auto; /*div網頁居中*/ 13 background-color: #494949; 14 color: #FFFFFF; 15 } 16 17 h1 { 18 text-align: center; /*文本居中*/ 19 padding-top: 10px; 20 } 21 22 #first, #second, #third { 23 width: 360px; 24 height: 360px; 25 font-size: 150px; 26 line-height: 360px; 27 text-align: center; 28 float: left; /*讓三個盒子左浮動*/ 29 } 30 31 #first { 32 background-color: #009BFF; 33 opacity: 0.9; 34 } 35 36 #second { 37 background-color: #007CCC; 38 } 39 40 #third { 41 background-color: #005388; 42 } 43 44 input { 45 font-size: 30px; 46 font-weight: 900; 47 } 48 49 #start { 50 margin-left: 40%; 51 margin-right: 5%; 52 }a{color:blue;} 53 </style> 54 55 </head> 56 <body> 57 <div id="bigDiv"> 58 <h1>玩家幸運抽獎活動</h1> 59 <div id="first"></div> 60 <div id="second"></div> 61 <div id="third"></div> 62 <input type="button" value="開始" id="start"> 63 <input type="button" value="停止" id="stop" disabled="disabled"> 64 </div> 65 66 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> 67 <p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> 68 <p>來源： <a href="http://hovertree.com">何問起</a> 69 <a href="http://hovertree.com/texiao/">特效庫</a> 70 <a href="http://hovertree.com/h/bjaf/07a7l2on.htm">代碼說明</a></p> 71 </div> 72 </body> 73 </html>
js文件代碼如下：
1 /** 2 * Created by 何問起 午后的陽光 on 2016/5/14. 3 */ 4 var ran = 0; 5 var range = 0; 6 var myNumber; 7 /*將產生隨機數的方法進行封裝*/ 8 function sjs(range) { 9 ran = Math.random() * range;//[0,range)的隨機數 10 var result = parseInt(ran);//將數字轉換成整數 11 return result; 12 } 13 /*對顯示隨機數的方法進行封裝*/ 14 function showRandomNum() { 15 var figure = sjs(range); 16 $("#first").html(figure); 17 var figure2 = sjs(range); 18 $("#second").html(figure2); 19 var figure3 = sjs(range); 20 $("#third").html(figure3); 21 } 22 $(function () { 23 /*點擊開始按鈕,產生的事件*/ 24 $("#start").click(function () { 25 26 range = prompt("請輸入隨機數范圍：", "168"); 27 28 if (range == null)//http://hovertree.com/h/bjaf/3siyd3x7.htm 29 { 30 return; 31 } 32 33 if (range == 0) 34 { 35 return; 36 } 37 38 if (isNaN(range))//http://hovertree.com/h/bjaf/9vhm2l4f.htm 39 { 40 alert("請輸入數字"); 41 return ; 42 } 43 /*將開始標簽禁用，停止標簽啟用*/ 44 $("#start")[0].disabled = true; 45 $("#stop")[0].disabled = false; 46 if (range > 9999 || range<-999) 47 { 48 // by 何問起 49 $("#bigDiv div").css("font-size", "60px");//http://hovertree.com/h/bjaf/omgdn4mu.htm 50 //return; 51 } 52 myNumber = setInterval(showRandomNum, 50);//多長時間運行一次，單位毫秒 53 }); 54 /*點擊結束按鈕*/ 55 $("#stop").click(function () { 56 /*將開始標簽啟用，停止標簽禁用*/ 57 $("#start")[0].disabled = false; 58 $("#stop")[0].disabled = true; 59 clearInterval(myNumber); 60 }); 61 });