Question source: A test question during the MOOC learning jQuery.
Initial:<ul>Only displayed in the element5indivual<li>element,其中包含还包括最后一indivual<li>element,<a>element中的显示"More"character. When clicking"More"When linking,The content of oneself becomes"simplify",at the same time,<ul>element中显示全部的<li>element. When clicking"simplify"When linking,The content of oneself becomes"More",at the same time,<ul>Only displayed in the element包含最后一indivual<li>element在内的5indivualelement.
Core point: He didn't talk about which elements to hide, so I hope to list 8 elements and simplify the random hiding of 3 of the first 7 elements.
Ideas:
① Generate 3 random numbers from 0~6.
② Determine whether the three random numbers are equal. If they are not equal, perform hidden operations.
③3 If there are duplications of random numbers, the function will be executed again.
Implementation: Generate a random number from 0 to 6
Complete code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="/jquery/1.9.0/"></script>
<title>Challenge questions</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 onclick="cli()">simplify</a>
</body>
<script>
$(function cli(){
$("#btn").css("cursor","pointer");
if($("#btn").html()=="Simplified"){ var ran1=parseInt(()*7);
var ran2=parseInt(()*7);
var ran3=parseInt(()*7); //① Generate 3 random numbers from 0~6 to complete if(ran1!=ran2&&ran1!=ran2&&ran2!=ran3){ //② Determine whether the three random numbers are equal. If they are not equal, then perform the operation. $('li:eq('+ran1+')').css('display','none');
$('li:eq('+ran2+')').css('display','none');
$('li:eq('+ran3+')').css('display','none');
$("#btn").html("more"); }else{//③3 If there is a duplication of random numbers, the function will be executed again. cli();
}
}
else{
$("li:hidden").css('display','list-item');
$("a:contains('More')").html("simplify");
}
});
</script>
</html>
Harvest one:
Harvest 2:
After reflection, I decided to write an encapsulation function that generates n non-repetitive random numbers in a certain [min,max] interval.
Idea 1: Create n [min,max] interval random numbers, compare whether they are repeated, if they are repeated, they will return and execute again.
Demo address:/yupuyehuqa/edit?html,js,output
Encapsulation function:
function my_ran(n,min,max){
var arr=[];
for(i=0;i<n;i++){
arr[i]=parseInt(()*(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;
}
Idea 2: Generate a random number in the i-th [min,max] interval and compare it with the previous i-1 number. If there is any repetition, let i=i-1; repeatedly generate the i-th random number.
Demo address:/zorunotosi/edit?html,js,output
Encapsulation function:
function my_ran2(n,min,max){
var arr=[];
for(i=0;i<n;i++){
arr[i]=parseInt(()*(max-min+1)+min);
for(j=0;j<i;j++){
if(arr[i]==arr[j]){
i=i-1;
break;
}
}
}
return arr;
}
Idea 3: Generate an array of sequentially in the [min,max] interval, disrupt the array, and output the first n values.
Demo address:/zorunotosi/edit?html,js,output
Encapsulation function:
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=;i;j=parseInt(()*i),x=arr[--i],arr[i]=arr[j],arr[j]=x);
for(i=0;i<n;i++){
arr2[i]=arr[i];
}
return arr2;
}
Idea 4: Generate an array of sequentials in the [min,max] interval, select a value randomly from it, then delete this value in the array, and select the second random value.
Demo address:/zorunotosi/edit?html,js,output
Encapsulation function:
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(()*);
arr2[i]=arr[x];
for(j=x;j<;j++){
arr[j]=arr[j+1];
}
=-1;
}
return arr2;
}
It's too late, I'll adjust the format if I have time tomorrow.
The above is the entire content of this article, I hope you like it.