#青训营笔记创作活动# 问题描述
小F被神秘力量带入了一个魔幻世界，这里危机四伏。为了在异世界中生存，小F需要找到安全区。异世界可以被表示为一个大小为n x m的二维数组，每个格子的值代表该位置的危险程度。
小F的能力值为X，当某个格子的危险程度小于等于X时，这个格子是安全的。如果多个安全的格子相邻（上下左右连通），它们可以构成一个安全区。你需要帮助小F计算出一共有多少个安全区。
测试样例
样例1：
输入：n = 3, m = 3, X = 4, a = [[2, 3, 3], [3, 3, 3], [3, 3, 3]]
输出：1
样例2：
输入：n = 2, m = 2, X = 5, a = [[6, 6], [6, 4]]
输出：1
样例3：
输入：n = 3, m = 3, X = 3, a = [[1, 2, 2], [2, 3, 3], [3, 4, 5]]
输出：1
题解：
一个原二维数组，新建一个visited数组记录是否经过，直接全部遍历，遇到安全值小于能力值且没经过的点就进入while循环。while循环通过队列实现安全区域的搜寻，通过maxnum记录安全区域的个数。
#青训营笔记创作活动#
1月14日 打卡Day1
今日学习 ——对HTML5中拖曳操作（Drag和Drop）的优化，用原生JS实现一个自定义拖曳效果
具体实现思路就是首先要考虑鼠标的三个事件（按下，移动，松开），当点击按下的时候，克隆一个绝对定位的元素，并记录一个正在移动的状态，然后就可以判断应该执行的具体方法（是往哪儿移动，怎么移动），这样就可以让元素随着鼠标移动起来。
实现的功能分别是实现元素抓取，性能优化，实现拖曳放大，实现放置，边界判断和体验优化。
我主要是学习了一下元素抓取和拖曳放大的功能。
元素抓取的原理就是克隆，在鼠标按下的时候克隆鼠标按下的那个元素，并把克隆出来的元素设置为绝对定位，只有变成绝对定位才能让元素浮起来，实现抓取的操作。同时还需要优化操作体验，让本体隐藏，同时不改变DOM的结构，具体操作就是在按下拖动时给本体的opacity样式设置为0，结束时再改为1就能实现。而对于鼠标松开之后的回退操作，可以通过transition来实现一个自然的动画，添加一个过渡属性，得到一个自然的回退动画。
拖曳放大的功能是通过设置了一个变化系数来实现的，这个变化系数就是拖动位置之间的距离（两点之间距离的计算公式），放大是transform: scale，只需要通过变化系数来修改scale，比如scale = (元素宽度 + 变化系数) / 元素宽度，或者其他的计算方式也可以，只要是添加了跟移动位置相关的变化系数，那么scale的值就可以按一定规律变化，就能实现放大的动画功能。
1月14日 打卡Day1
今日学习 ——对HTML5中拖曳操作（Drag和Drop）的优化，用原生JS实现一个自定义拖曳效果
具体实现思路就是首先要考虑鼠标的三个事件（按下，移动，松开），当点击按下的时候，克隆一个绝对定位的元素，并记录一个正在移动的状态，然后就可以判断应该执行的具体方法（是往哪儿移动，怎么移动），这样就可以让元素随着鼠标移动起来。
实现的功能分别是实现元素抓取，性能优化，实现拖曳放大，实现放置，边界判断和体验优化。
我主要是学习了一下元素抓取和拖曳放大的功能。
元素抓取的原理就是克隆，在鼠标按下的时候克隆鼠标按下的那个元素，并把克隆出来的元素设置为绝对定位，只有变成绝对定位才能让元素浮起来，实现抓取的操作。同时还需要优化操作体验，让本体隐藏，同时不改变DOM的结构，具体操作就是在按下拖动时给本体的opacity样式设置为0，结束时再改为1就能实现。而对于鼠标松开之后的回退操作，可以通过transition来实现一个自然的动画，添加一个过渡属性，得到一个自然的回退动画。
拖曳放大的功能是通过设置了一个变化系数来实现的，这个变化系数就是拖动位置之间的距离（两点之间距离的计算公式），放大是transform: scale，只需要通过变化系数来修改scale，比如scale = (元素宽度 + 变化系数) / 元素宽度，或者其他的计算方式也可以，只要是添加了跟移动位置相关的变化系数，那么scale的值就可以按一定规律变化，就能实现放大的动画功能。
展开
评论
1