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 封装Ajax传递的数据代码
Jun 05 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
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高级对象构建 工厂模式的使用
2012/02/05 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python实现端口复用实例代码
2014/07/03 Python
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Python实现某论坛自动签到功能
2019/08/20 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
师范毕业生个人求职信
2013/12/09 职场文书
八一演出活动方案
2014/02/03 职场文书
医院义诊活动总结
2014/07/04 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
岗位聘任协议书
2015/09/21 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题