javascript生成不重復(fù)的隨機(jī)數(shù)
題目來(lái)源:在慕課學(xué)習(xí)jQuery過(guò)程中一道測(cè)試題。
初始時(shí):<ul>元素中僅顯示5個(gè)<li>元素,其中包含還包括最后一個(gè)<li>元素,<a>元素中的顯示"更多"字符. 當(dāng)點(diǎn)擊"更多"鏈接時(shí),自身內(nèi)容變?yōu)?簡(jiǎn)化",同時(shí),<ul>元素中顯示全部的<li>元素. 當(dāng)點(diǎn)擊"簡(jiǎn)化"鏈接時(shí),自身內(nèi)容變?yōu)?更多",同時(shí),<ul>元素中僅顯示包含最后一個(gè)<li>元素在內(nèi)的5個(gè)元素.
核心點(diǎn):他沒(méi)講需隱藏哪幾個(gè)<li>元素啊,那么我希望列出8個(gè)<li>元素,點(diǎn)簡(jiǎn)化隨機(jī)隱藏前7個(gè)<li>元素中的3個(gè)。
思路:
①?gòu)?~6中生成3個(gè)隨機(jī)數(shù)。
②判斷3個(gè)隨機(jī)數(shù)是否相等,不相等則執(zhí)行隱藏操作。
③3隨機(jī)數(shù)有重復(fù),則重新執(zhí)行函數(shù)。
實(shí)現(xiàn):生成0~6的一個(gè)隨機(jī)數(shù)
完整代碼:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>挑戰(zhàn)題</title>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<a id="btn" onclick="cli()">簡(jiǎn)化</a>
</body>
<script>
$(function cli(){
$("#btn").css("cursor","pointer");
if($("#btn").html()=="簡(jiǎn)化"){
var ran1=parseInt(Math.random()*7);
var ran2=parseInt(Math.random()*7);
var ran3=parseInt(Math.random()*7); //①?gòu)?~6中生成3個(gè)隨機(jī)數(shù)完成
if(ran1!=ran2&&ran1!=ran2&&ran2!=ran3){ //②判斷3個(gè)隨機(jī)數(shù)是否相等,不相等則執(zhí)行操作。
$('li:eq('+ran1+')').css('display','none');
$('li:eq('+ran2+')').css('display','none');
$('li:eq('+ran3+')').css('display','none');
$("#btn").html("更多");
}else{ //③3隨機(jī)數(shù)有重復(fù),則重新執(zhí)行函數(shù)。
cli();
}
}
else{
$("li:hidden").css('display','list-item');
$("a:contains('更多')").html("簡(jiǎn)化");
}
});
</script>
</html>
收獲一:
收獲二:
反思了下,決定寫(xiě)個(gè)在一定[min,max]區(qū)間,生成n個(gè)不重復(fù)的隨機(jī)數(shù)的封裝函數(shù)。
思路一:先生成n個(gè)[min,max]區(qū)間隨機(jī)數(shù),比較是否重復(fù),如重復(fù)則返回,再次執(zhí)行。
演示地址:http://jsbin.com/yupuyehuqa/edit?html,js,output
封裝函數(shù):
function my_ran(n,min,max){
var arr=[];
for(i=0;i<n;i++){
arr[i]=parseInt(Math.random()*(max-min+1)+min);
}
for(i=0;i<n;i++){
for(j=i+1;j<n;j++){
if(arr[i]==arr[j]){
my_ran(n,min,max);
return fault;
}
}
}
return arr;
}
思路二:生成第i個(gè)[min,max]區(qū)間的隨機(jī)數(shù),并與之前i-1個(gè)數(shù)比較,如有重復(fù),令i=i-1;重復(fù)生成第i個(gè)隨機(jī)數(shù)。
演示地址:http://jsbin.com/zorunotosi/edit?html,js,output
封裝函數(shù):
function my_ran2(n,min,max){
var arr=[];
for(i=0;i<n;i++){
arr[i]=parseInt(Math.random()*(max-min+1)+min);
for(j=0;j<i;j++){
if(arr[i]==arr[j]){
i=i-1;
break;
}
}
}
return arr;
}
思路三:生成[min,max]區(qū)間的一個(gè)順序數(shù)組,打亂數(shù)組,輸出前n個(gè)值。
演示地址:http://jsbin.com/zorunotosi/edit?html,js,output
封裝函數(shù):
function my_ran3(n,min,max){
var arr=[];
var arr2=[];
for(i=0;i<max-min+1;i++){
arr[i]=i+min;
}
for(var j,x,i=arr.length;i;j=parseInt(Math.random()*i),x=arr[--i],arr[i]=arr[j],arr[j]=x);
for(i=0;i<n;i++){
arr2[i]=arr[i];
}
return arr2;
}
思路四:生成[min,max]區(qū)間的一個(gè)順序數(shù)組,從中隨機(jī)選出一個(gè)值,然后在數(shù)組中刪掉這個(gè)值,再選第二個(gè)隨機(jī)值。
演示地址:http://jsbin.com/zorunotosi/edit?html,js,output
封裝函數(shù):
function my_ran4(n,min,max){
var arr=[];
var arr2=[];
for(i=0;i<max-min+1;i++){
arr[i]=i+min;
}
for(i=0;i<n;i++){
var x=parseInt(Math.random()*arr.length);
arr2[i]=arr[x];
for(j=x;j<arr.length;j++){
arr[j]=arr[j+1];
}
arr.length=arr.length-1;
}
return arr2;
}
太晚了,明兒有空再調(diào)格式了。
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- javascript 如何生成不重復(fù)的隨機(jī)數(shù)
- Javascript 生成指定范圍數(shù)值隨機(jī)數(shù)
- js生成隨機(jī)數(shù)之random函數(shù)隨機(jī)示例
- javascript生成隨機(jī)數(shù)的方法
- js生成隨機(jī)數(shù)的方法實(shí)例
- javascript生成隨機(jī)數(shù)方法匯總
- JS生成某個(gè)范圍的隨機(jī)數(shù)【四種情況詳解】
- js生成隨機(jī)數(shù)(指定范圍)的實(shí)例代碼
- JS簡(jiǎn)單生成兩個(gè)數(shù)字之間隨機(jī)數(shù)的方法
- JavaScript隨機(jī)數(shù)生成各種技巧及實(shí)例代碼
相關(guān)文章
JS正則表達(dá)式學(xué)習(xí)之貪婪和非貪婪模式實(shí)例總結(jié)
這篇文章主要介紹了JS正則表達(dá)式學(xué)習(xí)之貪婪和非貪婪模式用法,結(jié)合實(shí)例形式總結(jié)分析了JS正則表達(dá)式中貪婪模式與非貪婪模式的具體功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
js中把JSON字符串轉(zhuǎn)換成JSON對(duì)象最好的方法
這篇文章主要介紹了js中把JSON字符串轉(zhuǎn)換為JSON對(duì)象最好的方法,需要的朋友可以參考下2014-03-03
JavaScript設(shè)計(jì)模式之職責(zé)鏈模式應(yīng)用示例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之職責(zé)鏈模式,結(jié)合實(shí)例形式分析了javascript責(zé)任鏈模式的概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
js表達(dá)式與運(yùn)算符簡(jiǎn)單操作示例
這篇文章主要介紹了js表達(dá)式與運(yùn)算符簡(jiǎn)單操作,結(jié)合實(shí)例形式分析了JavaScript表達(dá)式與運(yùn)算符的基本算數(shù)運(yùn)算、邏輯運(yùn)算、比較運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
基于JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06
詳解BootStrap中Affix控件的使用及保持布局的美觀的方法
Affix是BootStrap中的一個(gè)很有用的控件,他能夠監(jiān)視瀏覽器的滾動(dòng)條的位置并讓你的導(dǎo)航始終都在頁(yè)面的可視區(qū)域。本文重點(diǎn)給大家介紹BootStrap中Affix控件的使用及保持布局的美觀的方法,感興趣的朋友一起看看吧2016-07-07
JS獲取本地文件并進(jìn)行網(wǎng)絡(luò)傳輸?shù)拇a詳解
在web中如想要獲取用戶(hù)計(jì)算機(jī)上的文件我們通常會(huì)用到的方法是通過(guò)一個(gè)表單元素<input type="file">操作用戶(hù)選擇的文件,本文小編給大家介紹了JS獲取本地文件并進(jìn)行網(wǎng)絡(luò)傳輸?shù)姆椒?需要的朋友可以參考下2024-08-08

