javascript生成不重复的随机数


Posted in Javascript onJuly 17, 2015

题目来源:在慕课学习jQuery过程中一道测试题。

初始时:<ul>元素中仅显示5个<li>元素,其中包含还包括最后一个<li>元素,<a>元素中的显示"更多"字符.

当点击"更多"链接时,自身内容变为"简化",同时,<ul>元素中显示全部的<li>元素.

当点击"简化"链接时,自身内容变为"更多",同时,<ul>元素中仅显示包含最后一个<li>元素在内的5个元素.

核心点:他没讲需隐藏哪几个<li>元素啊,那么我希望列出8个<li>元素,点简化随机隐藏前7个<li>元素中的3个。

思路:

①从0~6中生成3个随机数。

②判断3个随机数是否相等,不相等则执行隐藏操作。

③3随机数有重复,则重新执行函数。

实现:生成0~6的一个随机数

var ran1=parseInt(Math.random()*7); //Math.random()生成[0,1)的一个随机数

完整代码:
<!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>挑战题</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()">简化</a>
  </body>
  <script>
    $(function cli(){
      $("#btn").css("cursor","pointer");
      if($("#btn").html()=="简化"){
      var ran1=parseInt(Math.random()*7);
      var ran2=parseInt(Math.random()*7);
      var ran3=parseInt(Math.random()*7); //①从0~6中生成3个随机数完成
      if(ran1!=ran2&&ran1!=ran2&&ran2!=ran3){ //②判断3个随机数是否相等,不相等则执行操作。
      $('li:eq('+ran1+')').css('display','none');  
      $('li:eq('+ran2+')').css('display','none');    
      $('li:eq('+ran3+')').css('display','none'); 
      $("#btn").html("更多");
      }else{//③3随机数有重复,则重新执行函数。
        cli();
      }
      }
      
      else{
        $("li:hidden").css('display','list-item');
        $("a:contains('更多')").html("简化");
      }
      
      });

  </script>
</html>

收获一:

var ran=parseInt(Math.random()*(max-min+1)+min); //生成一个[min,max]区间的一个随机数

收获二:

反思了下,决定写个在一定[min,max]区间,生成n个不重复的随机数的封装函数。

思路一:先生成n个[min,max]区间随机数,比较是否重复,如重复则返回,再次执行。

演示地址:http://jsbin.com/yupuyehuqa/edit?html,js,output

封装函数:

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个[min,max]区间的随机数,并与之前i-1个数比较,如有重复,令i=i-1;重复生成第i个随机数。

演示地址:http://jsbin.com/zorunotosi/edit?html,js,output

封装函数:

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]区间的一个顺序数组,打乱数组,输出前n个值。

演示地址:http://jsbin.com/zorunotosi/edit?html,js,output

封装函数:

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]区间的一个顺序数组,从中随机选出一个值,然后在数组中删掉这个值,再选第二个随机值。

演示地址:http://jsbin.com/zorunotosi/edit?html,js,output

封装函数:

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;
}

太晚了,明儿有空再调格式了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript与DropDownList 区别分析
Jan 01 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
jQuery实现径向动画菜单效果
Jul 17 #Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 #Javascript
用svg制作富有动态的tooltip
Jul 17 #Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 #Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 #Javascript
JS判断页面是否出现滚动条的方法
Jul 17 #Javascript
javascript图片预加载实例分析
Jul 16 #Javascript
You might like
PHP自动重命名文件实现方法
2014/11/04 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
Python基础知识_浅谈用户交互
2017/05/31 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
Why do we need Unit test
2013/01/03 面试题
医护人员英文求职信范文
2013/11/26 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
2015年采购部工作总结
2015/04/23 职场文书
《将心比心》教学反思
2016/02/23 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
linux下安装redis图文详细步骤
2021/12/04 Redis