jQuery雙色器隨機選號
下面分享一段程式碼例項,它實現了點選按鈕可以實現雙色球隨機選號功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .box { position: absolute; left: 20%; top: 20%; overflow: hidden; height: 200px; width: 600px; } .box div, .blue { width: 50px; height: 50px; margin: 10px; border-radius: 50%; border: 5px solid red; float: left; color: red; font-size: 30px; text-align: center; line-height: 50px; } .blue { border: 5px solid blue; color: blue; } .btn { position: absolute; left: 50%; bottom: 20%; width: 80px; height: 40px; display: block; background: #9966FF; } </style> <script src="http://www.hibity.com/js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> function todou(n) { return n < 10 ? '0' + n : '' + n; }; function ran(n, m) { return Math.floor(Math.random() * (m - n) + n) }; function findInArr(n, arr) { for (var index = 0; index < arr.length; index++) { if (arr[index] == n) { return true; } } return false; }; $(function() { function toDo() { var arr = []; while (arr.length < $('#box div').length) { var n = ran(1, 34); if (!findInArr(n, arr)) { arr.push(n); } }; for (var index = 0; index < $('#box div').length; index++) { $('#box div').eq(index).html(arr[index]); $('#blue').html(ran(1, 16)); } }; toDo(); var timer = null; $('#btn').click(function() { clearInterval(timer) setTimeout(function() { clearInterval(timer) }, 500) timer = setInterval(function() { toDo(); }, 50) }) }) </script> </head> <body> <div class="box" id="box"> <input type="button" name="" id="btn" class="btn" value="點選來一注"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <p class="blue" id="blue"></p> </div> </body> </html>
點選按鈕可以實現雙色球隨機選號功能,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).function todou(n) {
return n < 10 ? '0' + n : '' + n;
};
如果是個位數,前面就加0,比如5會被修改為05。
(2).function ran(n, m) {
return Math.floor(Math.random() * (m - n) + n)
},獲取指定區間的隨機數。
(3).function findInArr(n, arr) {
for (var index = 0; index < arr.length; index++) {
if (arr[index] == n) {
return true;
}
}
return false;
},查詢指定元素是否在陣列中存在,n表示要查詢的元素,arr是陣列。
(4).$(function() {}),文件結構完全載入完畢再去執行函式中的程式碼。
(5).function toDo() {},此函式實現了雙色球選號功能。
(6).var arr = [],宣告一個空陣列。
(7).while (arr.length < $('#box div').length) {
var n = ran(1, 34);
if (!findInArr(n, arr)) {
arr.push(n);
}
},通過while迴圈,能夠生成6個隨機數(div元素的數目),隨機數是介於1-34之間。
為保證選取的隨機數不重複,使用findInArr()進行判斷,不存在,則將此隨機數存入陣列。
最終,陣列儲存的就是選取的紅號。
(8).for (var index = 0; index < $('#box div').length; index++) {
$('#box div').eq(index).html(arr[index]);
$('#blue').html(ran(1, 16));
},將紅號寫入div元素,然後在產生一個藍色號碼並寫入p元素。
(9).toDo(),頁面載入就會產生一個號碼。
(10).var timer = null,用來儲存定時器函式的標識。
(11).$('#btn').click(function() {
clearInterval(timer)
setTimeout(function() {
clearInterval(timer)
}, 500)
timer = setInterval(function() {
toDo();
}, 50)
}),為按鈕註冊click事件處理函式。
點選按鈕,首先使用clearInterval(timer)清除上一個定時器函式執行,防止連續快速點選出現疊加。
500毫秒後會停止定時器函式的執行,在此之前一直處於選號狀態。
二.相關閱讀:
(1).click事件參閱jQuery click事件一章節。
(2).Math.floor()參閱JavaScript Math.floor()一章節。
(3).Math.random()參閱JavaScript Math.random()一章節。
(4).setInterval()參閱JavaScript setInterval()一章節。
(5).setTimeout()參閱setTimeout()一章節。
(6).push()參閱JavaScript push()一章節。
相關文章
- js雙色球隨機選號程式碼例項JS隨機
- CSS 選擇器前面單雙冒號:CSS
- 中高階雙卡雙待手機精選 一機雙號更實用
- 隨機雙色球隨機
- 實現隨機顏色隨機
- Jquery單引號和雙引號的使用注意jQuery
- javascript機選雙色球彩票號碼程式碼例項JavaScript
- 【動畫進階】單標籤下多色塊隨機文字隨機顏色動畫動畫隨機
- JavaScript生成隨機顏色值JavaScript隨機
- 隨機選組隨機
- jQuery選擇器jQuery
- jQuery 選擇器jQuery
- jQuery選擇器——基本選擇器jQuery
- jQuery選擇器中的大於號>作用是什麼jQuery
- jQuery連結點選變色 點選其他還原jQuery
- 簡單的:Div隨機顏色隨機
- JavaScript 背景顏色隨機變化JavaScript隨機
- jQuery底部跟隨水平導航選單jQuery
- jQuery選擇器——層次選擇器jQuery
- jQuery 3教程(二):jQuery選擇器jQuery
- jQuery選擇器(下)jQuery
- jQuery 選擇器效率jQuery
- Jquery的選擇器jQuery
- jQuery :last選擇器jQueryAST
- jQuery .class選擇器jQuery
- jQuery element選擇器jQuery
- jQuery #id選擇器jQuery
- [JS] jQuery選擇器JSjQuery
- jQuery系列:選擇器jQuery
- jQuery選擇器大全jQuery
- C#實現的簡單的隨機抽號器C#隨機
- js隨機顏色例項程式碼JS隨機
- jQuery選擇器之層次選擇器jQuery
- jQuery選擇器——基本過濾選擇器jQuery
- 一個帶有權重的隨機選擇器隨機
- 實現機選雙色球
- jQuery選擇器——內容過濾選擇器jQuery
- jQuery選擇器——子元素過濾選擇器jQuery