今天做的首页展示图的需求：
1. 首页包含背景图和百分比数字显示
2. 进入首页百分比显示从 0% 到 100%，并且到 100% 后隐藏
3. 同时背景图从模糊到清晰
思路：
1. Flex 布局，水平和垂直居中显示百分比
2. JS 控制变量范围变动（包括图片的 blur 焦点变动范围和百分比数字变动）
控制变量范围时候，突然有了一些卡壳，原生的函数好像比没有提供相应的 API，这时候就得上 stackoverflow 好好参考一下大神的思路（囧）
好在搜到了一个高赞回答，通过自定义函数进行控制，使用时调用即可，下边就记录一下：
首先定义一个 scale 函数（和原生的 scale 重名了，其实是不一样的）
这个函数的意思是，number 是一个数字， inMin 和 inMax 是这个 numbe r的范围，outMin 和 outMax 是输出的范围，也就是你想要的范围
function scale (number, inMin, inMax, outMin, outMax) {
return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}
还有人补充了 ES6 语法 (这都不重要，主要是思路)：
let scale = (num, in_min, in_max, out_min, out_max) => {
(num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min
}
接下来就可以进行调用了
百分比的透明度从 1 到 0，实现了消失效果，图片焦点从 30px 到 0，实现了从模糊到清晰的效果
loadingText.style.opacity = scale(load, 0, 100, 1, 0);
bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
Done 😃😃😃 （看下能不能保存 Emoji）
