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的变量作用域和this指针的讨论
Dec 16 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 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
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
Vue精简版风格概述
2018/01/30 Javascript
Python实现上下班抢个顺风单脚本
2018/02/07 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
python3安装speech语音模块的方法
2018/12/24 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
python中图像通道分离与合并实例
2020/01/17 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
二手房购房意向书范本
2014/04/01 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
作文批改评语
2014/12/25 职场文书
领导干部考核评语
2015/01/04 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android