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 相关文章推荐
JS解析XML的实现代码
Nov 12 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
JS函数基本定义与用法示例
Jan 15 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读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
php MessagePack介绍
2013/10/06 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
javascript 闭包疑问
2010/12/30 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python中安装easy_install的方法
2018/11/18 Python
Python requests模块cookie实例解析
2020/04/14 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
大学生党课思想汇报
2013/12/29 职场文书
车辆工程专业求职信
2014/06/14 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
毕业论文致谢词
2015/05/14 职场文书