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打印输出json实例
Nov 11 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
JS中FormData类实现文件上传
Mar 27 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
zend framework配置操作数据库实例分析
2012/12/06 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php不用正则验证真假身份证
2013/11/06 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python中join函数简单代码示例
2018/01/09 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
Python 创建TCP服务器的方法
2020/07/28 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
私人房屋买卖协议书
2014/10/04 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android