• js数组操作打乱数组


    <style>
      html, body { margin: 0; padding: 0;}
      div span { display: inline-block;  25px; height: 25px; background: red; }
    </style>
    <div id="wrap">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>

     需求:1、点击1个span,我所点击的span显示目标值(数组的一个任意值,随机的),其它5个span随机内容为数组的任意项,6个span显示的内容不能重复。

     思想:1、生成一个没有重复数字的数组arr2,在这个数组中将任意两个数组项互换,从而打散数组。

        2、在span上加入index属性,将目标值从数组中去掉,开始打散数组。

        3、点击任意span, 取到当前span的index值,将目标值按这个index值插入到打散后的数组中。

        4、对ospans进行for循环,将arr2的数组项赋给每个span的innerHTML.

    <script>
      function shuffle(aArr) { // 打散数组函数
        var iLength = aArr.length
          , i = iLength
          , nTemp
          , iRandom;
        while ( i-- ) {
          if (i !== (iRandom = Math.floor(Math.random()*iLength))) { // 不是同一个数组项的前提下进行互换
            nTemp = aArr[i];
            aArr[i] = aArr[iRandom];
            aArr[iRandom] = nTemp;
          };
        };
        return aArr;
      };
      var oSpans = document.getElementById("wrap").getElementsByTagName("span");
      var arr2 = [1, 2, 3, 4, 5, 6];
      var flag = true;
      for (var i = 0, len = oSpans.length; i < len; i++) {
        oSpans[i].index = i;
        oSpans[i].onclick = function() {
          var t = parseInt(Math.random(6)); // 目标坐标
          var target = arr2[t]; // 目标值
          arr2.splice(t, 1); // 将目标值从数组中删除
          shuffle(arr2); // 数组随机排列
          var index = this.index; // 获得点击后span的index
          arr2.splice(index, 0, target); //此时将target插入到arr2中
          for (var i = 0, len = oSpans.length; i < len; i++) {
            oSpans[i].innerHTML = arr2[i];
          };
        };
      };
    </script>
    

    今天看到了雨夜带刀的博客,附上地址:http://stylechen.com/grandomarr.html,我将两个方法结合了一下:

    var arr = [],
        length = 100,
        i = 0;
      for( ; i < length; i++ ){
        arr.push( i );
      }
      var gRandomArr = function( arr, length ){
        // 从原数组中一次性返回10个元素
        var arr2 = arr.slice( 0, length );
        // 使用sort将原数组的顺序打乱,让有序变成无序
        arr2.sort(function(){
          return Math.random() - 0.5;
        });
        return arr2;
      };
      // 调用
      console.log(gRandomArr( arr, 10 ));
  • 相关阅读:
    spring源码学习之容器的扩展(二)
    spring源码学习之容器的扩展(一)
    spring源码学习之bean的加载(三)
    spring源码学习之bean的加载(二)
    Linux find命令使用正则表达式
    Linux获取两个路径之间的相对路径
    利用linux sort命令比较版本号
    yum只下载不安装软件包
    tar命令排除某个文件夹
    ssh远程执行命令的符号转义问题
  • 原文地址:https://www.cnblogs.com/manchun/p/4499934.html
Copyright © 2020-2023  润新知