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 相关文章推荐
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
JS实现鼠标按下拖拽效果
Jul 23 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
python远程登录代码
2008/04/29 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
文明风采获奖感言
2014/02/18 职场文书
优秀团队获奖感言
2014/02/19 职场文书
酒会邀请函
2015/01/31 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
六五普法学习心得体会
2016/01/21 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS