1、动态表格并判断规则图形

写一个动态的表格，行与列是可输入的，如图一。基于动态的表格，点击选中格子组成的图形是规则的（矩形or正方形）则输出“你选择的是规则图形”，反之输出你选择的是“不规则的图形”

思路：

计算属性computed tableData()方法，定义row和column 定义一个基本对象baseInfo 的row和column 用两个forEach 把行和列的下标放到一个result数组的集合类似 00 01 02 03 10 11 12 13
判断是否规则用一个布尔值，主要判断，每一行的起始行和结束行，每一列的起始列和结束列，相乘，点中的方块数组的长度是否和起始行列相等相等就是true 规则

<div class="home">
    <HomeForm @input="baseInfoChange"></HomeForm>
    <MyTable v-model="selectData" :data="tableData"></MyTable>
    <div class="checkArea">
      <el-button type="primary" @click="checkData">点击判断</el-button>
      <p>所选择表格所组成的图形是：<span style="color:red">{{ tipMess }}</span></p>
    </div>
  </div>
  computed: {
    tableData() {
      const result = [];
      const { row, column } = this.baseInfo;
      const rowArr = [...new Array(row)];
      const columnArr = [...new Array(column)];

      rowArr.forEach((rowNum, rowIndex) => {
        const item = {};
        columnArr.forEach((columnNum, columnIndex) => {
          item[columnIndex] = `${rowIndex},${columnIndex}`;
        });
        result.push(item);
      });
      //console.log('result==',result);
      return result;
    },
    tipMess() {
      switch (this.isRegular) {
        case true:
          return "规则的";
        case false:
          return "不规则的";

        default:
          return "";
      }
    }
  },
  checkData() {
      const selectCellArr = [];

      this.selectData.forEach((row, rowIndex) => {
        
        Object.keys(row).forEach(key => {
          if (row[key]) {
            selectCellArr.push([rowIndex, key]);
          }
        });
        console.log('selectCellArr',selectCellArr);
        
      });

      if (selectCellArr.length) {
        let minRowIndex = null;
        let maxRowIndex = null;
        let minColumnIndex = null;
        let maxColumnIndex = null;

        selectCellArr.forEach(item => {
          const [rowIndex, columnIndex] = item;
          if (minRowIndex === null || rowIndex < minRowIndex) {
            minRowIndex = rowIndex;
          }
          if (maxRowIndex === null || rowIndex > maxRowIndex) {
            maxRowIndex = rowIndex;
          }
          if (minColumnIndex === null || columnIndex < minColumnIndex) {
            minColumnIndex = columnIndex;
          }
          if (maxColumnIndex === null || columnIndex > maxColumnIndex) {
            maxColumnIndex = columnIndex;
          }
        });

        const rowLength = maxRowIndex - minRowIndex + 1;
        const columnLength = maxColumnIndex - minColumnIndex + 1;

        this.isRegular = rowLength * columnLength === selectCellArr.length;
      }

2 走马灯

在43的拼接屏终端（每块屏幕都由32寸LCD显示屏，70cm40cm， 16:9）幕上实现跑马灯字幕【欢迎各位领导莅临指导！】跨屏轮播显示。每个屏幕终端自带android系统，字幕由pc端管理后台H5页面编辑下发。

跑马灯
scroll

<div class="viewItem" v-for="(item, index) in listData" :key="index">
    <ScrollText :msg="msg" :style="scrollStyle[index]"></ScrollText>
</div>
      
scrollStyle() {
      return this.listData.map((item, index) => {
        const columnIndex = Math.floor(index / 4);
        const rowIndex = index % 4;
        console.log('1=',index,columnIndex,rowIndex);
        
        return {
          transform: `translate(-${rowIndex * 210}px,-${columnIndex * 120}px)`
        };
      });
    }
    
//x轴评议  10s 速度 无限次  线性过渡
animation: mymove 10s infinite linear;
@keyframes mymove {//从左侧开始 移动宽度的100%
  from {
    transform: translateX(840px);
  }
  to {
    transform: translateX(-100%); 
  }
}

代码地址：gitee.com/lei929/crea…

前端笔试题动态数组和跑马灯

1、动态表格并判断规则图形

2 走马灯