代码收藏
<script setup lang="ts"> import { ref, computed, onMounted } from 'vue' import type { CSSProperties } from 'vue' import { debounce, useEventListener, useMutationObserver } from '../uti
动态烟雾背景效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scal
如何利用浏览器资源提示关键词优化网页性能
浏览器资源提示关键词在现代Web开发中，页面加载速度对用户体验至关重要。浏览器提供了一些资源提示关键词（Resource Hints），帮助开发者优化页面加载速度。这些关键词包括 defer、async、preload、prefetch、dns-prefetch、prerender 和 preconnect。合理利用这些关键词，可以显著提高页面加载性能，优化用户体验。1. defer 和 asyn
三个测试占位图链接地址
官网地址占位图片示例说明https://placeholder.comhttps://via.placeholder.com/400x200.png/3c9cff/fff400x200 - 宽高，3c9cff - 背景颜色，fff - 文本颜色https://dummyimage.comhttps://dummyimage.com/400x200/3c9cff/fff400x200 - 宽高，3c
H5 苹果系统底部安全区
先在头部加上下面的代码<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover" />然后就可以使用以下变量了，直接
Vue3等比例缩放图片组件
今天遇到一个需求，设计需要我无论什么情况都要保持图片比例不变，于是顺手写了个这个组件，组件基于vue3+ts，其实核心代码就是那几句css<template> <div style="position: relative" :style="ratioStr"> <div style="posit
写一套拟物风格的UI组件
准备写一套拟物风格的UI组件，先发篇文章后续慢慢补充吧?大概以后会长这样：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=&
网页文件加载失败如何重试（一）
本文主要讲解脚本文件加载失败时的处理背景在我们开发网站应用时，我们可能会遇到脚本加载失败的情况，导致脚本加载失败的原因有很多，比如用户的网络问题、终端设备问题、用户浏览器版本等诸多因素。解决方案在 JavaScript 中，我们可以创建一个监听来监听脚本加载失败的情况，然后针对加载失败的脚本进行重新加载。重新加载的方案，一般是通过更换域名来解决。我们给每个脚本添加一个映射关系表，用来在加载失败时匹
一个简单的数字滚动特效
直接贴代码食用Tips：此代码会读取将页面中所有带counter类名的元素，使用时设置 data-start(起始值) 和 data-end(结束值) 两个自定义属性值即可<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />
下拉菜单点击展开点击其他地方关闭
<style> /* 下拉菜单按钮样式 */ .dropbtn { background-color: #ffffff; color: #333333; padding: 10px; font-size: 16px; border: none; cursor: pointer; } /* 下拉菜单容器样式（隐藏） */