原生JS實現(xiàn)的雙色球功能示例
更新時間：2018年02月02日 14:56:44 作者：fasslook
這篇文章主要介紹了原生JS實現(xiàn)的雙色球功能,涉及javascript隨機數(shù)生成及數(shù)值運算相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了原生JS實現(xiàn)的雙色球功能。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>www.dbjr.com.cn - JS雙色球</title>
<style>
#datePicker {
width: 100px;
height: 30px;
line-height: 30px;;
border-radius: 10px;
border: 1px solid #5098a5;
text-align: center;
cursor: pointer;
}
#number {
height: 100px;
float: left;
margin-top: 20px;
}
#number span {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 30px;
border: 2px solid red;
color: red;
font-weight: bold;
float: left;
margin-top: 15px;
margin-right: 10px;
}
#buleBall {
height: 100px;
margin-top: 21px;
float: left;
}
#buleBall span {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 30px;
background-color: blue;
color: white;
font-weight: bold;
float: left;
margin-top: 15px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div style="overflow:hidden;">
<div id="number"></div>
<div id="buleBall"></div>
</div>
<div id="datePicker">點擊按鈕</div>
</div>
<script>
//循環(huán)產(chǎn)生1-36數(shù)字
var arr = [];
function num() {
for (var i = 1; i < 34; i++) {
arr.push(i);
}
confusion();
}
var arrty= new Array(arr);
//偽隨機方法
function confusion(){
for(var i=1;i<34;i++){
arrty[i]=i;
}
arrty.sort(function(){ return 0.5 - Math.random() });
// var str=arrty.join();
arrAy()
}
// 將隨機獲取的數(shù)據(jù)添加到頁面上去
function arrAy() {
var array = getRandomArrayElements(arrty, 6);
array.sort(function (a, b) {//數(shù)組排序
return a > b ? 1 : -1;
});
var htm = "";
for (var i = 0; i < array.length; i++) {
htm += '<span>' + array[i] + '</span>';
}
document.getElementById('number').innerHTML = htm;
}
// 從1-36中隨機取出其中6個參數(shù)
function getRandomArrayElements(arr, count) {
var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
}
//隨機獲取一個藍球的方法
function blueBall() {
var html = "";
var array = [];
for (var k = 1; k < 17; k++) {
array.push(k);
}
//隨機生成藍色球的算法
var n = Math.floor(Math.random() * array.length);
if (n != "0") {//去除獲取到的籃球數(shù)為0的
html += '<span>' + n + '</span>';
}
document.getElementById('buleBall').innerHTML = html;
}
window.onload = function () {
var datePicker = document.getElementById("datePicker");
datePicker.onclick = function () {
num();//點擊按鈕生成1-33的數(shù)字方法
blueBall();//點擊后獲取隨機藍球的方法
};
}
</script>
</body>
</html>
PS：這里再為大家提供幾款相關(guān)在線工具供大家參考使用：
在線隨機數(shù)字/字符串生成工具：
http://tools.jb51.net/aideddesign/suijishu
在線隨機字符/隨機密碼生成工具：
http://tools.jb51.net/aideddesign/rnd_password
在線隨機數(shù)生成工具：
http://tools.jb51.net/aideddesign/rnd_num
在線隨機生成個人信息數(shù)據(jù)工具：
http://tools.jb51.net/aideddesign/rnd_userinfo
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)學(xué)運算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
微信小程序 數(shù)據(jù)緩存實現(xiàn)方法詳解
這篇文章主要介紹了微信小程序 數(shù)據(jù)緩存實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
解決uni-app微信小程序input輸入框在底部時,鍵盤彈起頁面整體上移問題
問題是這樣的input?獲取焦點時會自動調(diào)起手機鍵盤，設(shè)置?:adjust-position="true"，會導(dǎo)致鍵盤彈起時頁面整體上移，這篇文章主要介紹了解決uni-app微信小程序input輸入框在底部時，鍵盤彈起頁面整體上移問題,，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了小程序毫秒級倒計時，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
就像人類會產(chǎn)生垃圾一樣，程序運行過程中也會產(chǎn)生垃圾，如果不及時回收輕則將會拖慢程序運行，重則會導(dǎo)致系統(tǒng)崩潰，也就是所謂的內(nèi)存泄漏。所以垃圾回收非常必要2022-10-10
如何使用JavaScript快速創(chuàng)建一個1到100的數(shù)組
平時寫代碼時,我們會生產(chǎn)一些測試用的數(shù)組數(shù)據(jù),比如[1,100]的數(shù)組值,下面這篇文章主要給大家介紹了關(guān)于如何使用JavaScript快速創(chuàng)建一個1到100數(shù)組的相關(guān)資料,需要的朋友可以參考下
2022-08-08 
本文給大家分享JS設(shè)置手機驗證碼60s等待實現(xiàn)代碼，需要的朋友參考下吧
2017-06-06 
下面小編就為大家?guī)硪黄蛟焱ㄓ玫膭蛩龠\動框架(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10 
8個開發(fā)者必須知道的JavaScript深層概念(推薦)
JavaScript有一個名為“調(diào)用堆?！保–all Stack）的簡單列表，它逐一管理任務(wù)（堆棧算法），但是當(dāng)異步任務(wù)被傳遞時，JavaScript會把它彈出到web API，瀏覽器就會處理它，這篇文章主要介紹了8個開發(fā)者必須知道的JavaScript深層概念，需要的朋友可以參考下
2022-10-10 
這篇文章主要介紹了JS實現(xiàn)的樣式切換功能tableCSS,結(jié)合實例形式分析了js頁面元素遍歷與樣式動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12