php怎么随机高亮一个数组？

来源：蜘蛛抓取(WebSpider) 时间：2022-05-01 01:20 标签： 怎么随机输出数组

聚合全网技术文章，根据你的阅读喜好进行个性推荐

深圳市奥思网络科技有限公司版权所有

数独是源自18世纪瑞士的一种数学游戏，是一种运用纸、笔进行演算的逻辑游戏。下面这篇文章主要给大家介绍了关于利用vue开发一个所谓的数独的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。

最近工作中遇到一个问题，因为后台管理系统页面功能暂时没有新的需求，就在想首页放什么东西，最近我想到的就是放个所谓的数独，为什么是所谓的数独，因为规则不同于标准的数独，只要求每一行每一列数字不一样就可以了！这个实例也是基于vue的，代码分享给大家。给大家代码，并不是要让大家直接拷贝代码，而是希望能让大家当做是一个练手的项目，或者学习到知识。如果大家觉得我哪里写得不好，写错了，欢迎指出，让大家交流意见，一起进步。

实现步骤，感觉说得有点绕，建议大家边写边看文章，这样不会懵。或者直接去看源码(sudoku)，把源码看懂！这个项目也不复杂！

3-1.准备数据和排版

排版的html+css代码我不多说了，排版很简单，这个相信都难不倒大家的。复杂一点的就是数据的交互！

下面开始第一步，把数独的数据先准备好，数据是什么，大家都知道，就是像下面这样的数据！

排版出来的效果就是下面这样。

//删除第一个数字并记录下来

大家也可以发现，这个数据，的每一行和每一列的数字都是不同样的！

之后就是随机打乱顺序了，打乱顺序这个得保证一个前提，就是保证每一行每一列的数字都不一样。这样的话，我用了一个简单粗暴的方法-以行或者列为单位，进行打乱。比如，第一行和第三行进行位置交互，第一列和第五列进行位置的交换。下面说下以行为单位的打乱顺序！

行打乱了，下面进行以列为单位的打乱，这个稍微复杂一点。

大家想下，比如第二列是第五列的值进行交换，那就是每一行的第二个格子的值和第五个格子的值进行交换，那么就需要遍历每一行！来进行交换，至于前面说的第二列和第五列的这个列数，可以用一个函数实现！

下面看代码！//随机获取两列的索引

//如果第一列和第二列索引一样，第二列的索引再次重新随机获取

//遍历每一行，给每一行的随机两列交换值

3-3.随机掏空单元格

掏空单元格就是把一些格子随机设空，然后让玩数独的人。把这些单元格给填上！

需求，我现在实现的就是，每一行有把两个格子设空，这里我的做法是，把每一个格子的坐标先记录下来，然后再从记录的坐标里面随机获取坐标，用获取到的坐标，进行设空！

首先，获取所有点的坐标//记录所有坐标

看到这个坐标，大家很容易的知道，数组的一个元素，就是第一行，‘0-0'就是第一行第一个格子。数组最后一个元素，就是最后一行，‘8-8'就是最后一行，最后一个格子，其他如此类推！

下面进行随机掏空，代码也很简单！//随机掏空

//抽取当前行的所有坐标

//当前行的随机两个坐标掏空

//抽取当前行的随机一个坐标

这样相信大家都觉得奇怪，下面进行下样式的该写，就是把设空了的格子的样式改一下！.no这个class对应的样式我在css那里写好了，大家注意下。

首先，我简单的用一个流程图说下逻辑，如下

然后关于数字键盘的位置，看下图(数字键盘的样式我不多说了，就是一个是相对定位，一个绝对定位的设置而已)

如上图，我点击的是第一行第三个格子，首先，我期待被点击的格子的样式有所改变，方便我区分，这个不难，用一个class改变样式就可以了，这个可以看下面的代码，我用一个.cur的class控制样式。还有一个就是期待数字键盘在第二行，第四个格子那里出现。这样的话，大家就知道，数字键盘的位置是怎么定位的了！数字键盘的top就是，被点击格子所在的行的索引+160(60是格子的宽高)，left就是，被点击格子所在的列的索引+160(60是格子的宽高)。比如上图，第一行第三个格子，top=(0+1)*60+'px',left=(2+1)*60+'px'。

//点击的格子是否是被掏空的格子

//点击的格子如果是上一次点击的格子(当前格子)

//隐藏数字键盘，curRow和curCol分别设置成当前的点

3-5.高亮显示同行同列

这一步很简单，首先，高亮显示行，大家都知道怎么做了，就是行对应的p，设置一个:hover，然后对应设置单元格的样式而已！这个不多说！

然后，高亮显示列，复杂一点，但是也很简单，原理我想大家也知道，就是当鼠标进如格子的时候，在data里面，用一个变量储存进入的格子的列的索引，然后加上判断，如果格子的列的索引等于进入的格子的列的索引。就加上一个class，这里我用.cur-col。

3-6.填写操作和错误提示

这一步的操作函数，我直接发代码吧，看代码比我说的会清晰些，毕竟说的有点绕

//根据当前格子进行赋值

//如果值一样，但是坐标不一样，就是填写错误

//记录当前格子的信息

//记录和当前格子同一行，以及同一个值的格子的坐标

//首先把每一行的那一列的数值保存起来

//如果值一样，但是坐标不一样，就是填写错误

//记录和当前格子同一列，以及同一个值的格子的坐标

//如果数组去重后，长度小于9，就是行没完成

//如果数组去重后，长度小于9，就是列没完成

上面的代码逻辑，简单说下

2..isShake这个class是控制，抖动的动画，添加上了之后，在一秒后，要去掉这个class，不然下次添加没有动画效果。

这样是为了往掏空的格子输入数字的时候，然后那个格子就不能再改了，即使是填错了，都不能改。样式控制也不正确！正确的格式应该是下面这样，即使填入了，格子的样式还是灰色的，这样可以方便的知道哪个格子是当时被掏空的，填写错了，也是可以改的。

optionNowInRow: {},//和输入后的格子在同一行，并且同样值的格子的坐标

optionNowInCol: {},//和输入后的格子在同一列，并且同样值的格子的坐标

//点击的格子是否是被掏空的格子

//点击的格子如果是上一次点击的格子(当前格子)

//隐藏数字键盘，curRow和curCol分别设置成当前的点

//如果值一样，但是坐标不一样，就是填写错误

//记录当前格子的信息

//记录和当前格子同一行，以及同一个值的格子的坐标

//首先把每一行的那一列的数值保存起来

//如果值一样，但是坐标不一样，就是填写错误

//记录和当前格子同一列，以及同一个值的格子的坐标

//如果数组去重后，长度小于9，就是行没完成

//如果数组去重后，长度小于9，就是列没完成

//随机获取两列的索引

//如果第一列和第二列索引一样，第二列的索引再次重新获取

//遍历每一行，给每一行的随机两列交换值

//抽取当前行的所有坐标

//当前行的随机两个坐标掏空

//抽取当前行的随机一个坐标

//深度拷贝数独的数字

好了，用vue做的所谓的数独，就写到这里了，主要就是逻辑有点绕，其它的问题相信都难不倒大家。这个实例比之前快速入门的三个小实例要麻烦一点，但是也很好理解！大家只要稍微看下估计都不难理解！最后，如果大家觉得文章写得不好，哪里写错了，欢迎给建议或者指点下迷津。期待和大家交流意见，共同进步！

上面是我整理给大家的，希望今后会对大家有帮助。

我要回帖

更多关于 怎么随机输出数组 的文章

 

随机推荐