前言
才发现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问题