【前端】50个项目BlurryLoading#5

前言

才发现github上有个50projects50days的项目，感觉还挺有趣的，可以练手学习，增加点代码练习，巩固下基础知识。
计划用vue2改写15个项目，vue3+js改写15个项目，vue3+ts改写20个项目。
在此仅作个人记录，权当打卡and水文章了hh

实现

第五个项目，BlurryLoading，基于vue2实现，使用了vue2.7提供的setup、ref等，使用了一部分vue3的特性
在学习过程中，使用了chatGPT协助，附在文末
（简单的学习笔记在代码中）

<template>
  <div>
    <div class="body">
      <section class="bg" ref="bg"></section>
      <div class="loading-text" ref="loadText">0%</div>
    </div>
  </div>
</template>
<script setup>

import {ref} from 'vue';

// 通过ref获取dom元素
const loadText = ref(null)
const bg = ref(null)

let load = 0
let int = setInterval(blurring,30)


function blurring(){
  load ++

  if(load>99){
    clearInterval(int)
  }

  // 需要使用.value形式获取
  loadText.value.innerText = `${load}%`
  loadText.value.style.opacity=scale(load,0,100,1,0)
  bg.value.style.filter = `blur(${scale(load,0,100,30,0)}px)`
}

// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
// 字面意思，就是scale的计算，可以参考上面的链接，具体而言，就是将一个数值从一个数值范围映射到另一个数值范围。
const scale = (num,in_min,in_max,out_min,out_max)=>{
  return ((num-in_min)*(out_max - out_min))/(in_max-in_min)+out_min
}

</script>


<style scoped>
@import url('https://fonts.googleapis.com/css?family=Ubuntu');

.body{
  font-family: 'Ubuntu', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.bg {
  /* center center：表示将背景图片水平和垂直居中显示。 */
  /* /cover：表示将背景图片等比缩放，以覆盖整个容器，并截断多余部分。 */
  /* 在background属性中，/是一个可选的分隔符，用于将背景大小和背景定位区分开来。 */
  background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80') 
    no-repeat center center/cover;
    /* background-color: red; */
  position: absolute;
  top: -30px;
  left: -30px;
  /* calc函数中，'+'前后必须添加空格，否则css无法识别（至少我这儿是这样..） */
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  z-index: -1;
  /* 高斯模糊，0px为不进行模糊处理 */
  filter: blur(0px);

}

.loading-text{
  font-size: 50px;
  color: #fff;
}
</style>

其他

1 chatgpt：css-background问题

2 chatgpt：css-filter: blur(0px)问题

3 chatgpt： scale函数问题