Q暖七Y

前言 在需求开发中，二维码扫码已经是一个非常常见的操作。前端实现中扫码需要添加对应的动画效果，是一个非常友好的体验。本文将详细介绍实现二维码扫码器动画效果。 1. 效果实现...

前言 滚动驱动的动画效果是提升用户交互体验的方法。本文将详细介绍如何使用纯CSS实现一个页面滚动的导航进度条效果，仅依靠CSS实现功能。 1. 效果演示 需要实现的效果是：...

前言 在日常应用中，验证码是防止恶意攻击的重要手段。其中滑动拼图验证码的用户体验更好。 本文将详细介绍如何仅使用HTML、CSS和JavaScript实现一个纯前端的滑动拼...

前言 web端验证码输入框常用于用户注册、登录、支付确认场景。与传统的单输入框验证码相比，多输入框分离能够有效防止自动填充和机器人攻击，同时提供更直观的用户体验。 本文将详...

前言 我们实现一个拖拽留言板卡片，通常会使用js的方式去实现拖拽。这一次我们用纯CSS方式去实现，会带给你另一个思路，让你眼前一亮。 1. 基础知识 在说实现思路之前，我们...

前言 视差滚动效果是一种视觉设计。这种效果通过让页面中不同元素创造出层次感，让网页看起来更加生动。 本文将详细介绍如何使用纯CSS实现滚动视差效果，重点分析三种不同的实现方...

前言 作为一名前端开发者，只能一直不断学习。而写作对于我来说是技术成长的重要一环。 在2023年，我在掘金平台进行写作，记录自己的学习经验分享。 一、写作初衷 在2023年...

1. 需求背景 在工控机触摸屏中，通过浏览器web端进行表单输入，当聚焦表单输入框并不会出现虚拟键盘进行输入。 解决方式： 使用第三方npm虚拟键盘插件引入使用 使用js调...

前言 如何实现图片九宫格的效果，如下所示： 1. 具体实现 整体思路：使用一个div的img-container盒子，里面添加九个img-item的子盒子。通过给每个子盒子...

前言 通常我们缓存当前浏览滚动的高度，那么跳转到特定的位置我们介绍几种常用的方式。 1. 常用跳转方式 假设我们有一个具有 id 为 "container" 的容器元素，滚...

前言 在项目开发中，读取转换成base64的图片，base64内容过长，需要使用单独文件进行保存。 本文介绍使用webpack和vite如何读取文件原始内容。 1. 实际操...

前言 效果如下： 1. 拖拽介绍 HTML 拖拽（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。 例如，用户可使用鼠标选择可拖拽（draggable...

前言 在正常开发中，遇到下载文件的场景。 比如： 使用a标签或者url进行下载，有时候会跳转预览，有时候会是直接下载。为什么会出现这样？ 使用axios或者fetch下载时...

前言 1. 安装docker、docker-compose、nginx 本文都是以阿里云服务器为例，docker安装文档。 1.1 安装docker 主要步骤如下： 下载d...

前言 由于国内镜像源无法正常拉取镜像，有没有一种折中的方案，在这段时间可以正常拉取自己需要的镜像学习。 本文介绍一种快速解决Docker Hub镜像站无法访问的方法。使用开...

前言 我们知道通过docker搭建nginx服务，那么如何在一个nginx服务部署多个项目。 1. 基于域名配置 域名配置是基于DNS解析的一种方式，可以通过不同的域名访问...

前言 一直想用Docker搭建jenkins构建环境。现在实践操作了下，一套使用gitee+jenkins+nginx部署的环境。 搭建完成后，具体构建运行流程： 1. 搭...

背景 在前端开发过程中，项目代码在上线前通常会经过打包工具处理，生成压缩代码。若线上代码出现问题，直接查看压缩代码无法有效定位问题。 这篇文章将介绍如何使用 Chrome ...

前言 本文记录下uniapp调试App和打包、发布全过程。 主要内容有： App调试 App打包 App发布 1. 调试 1.1 手机打开开发者模式 安卓手机需要设置开发者...

前言 在日常的开发流程中，例如开发一个二次封装的组件库，快速使用这些组件依赖我们查看文档，开发一款配套的组件库VSCode插件是非常有必要。 1. 项目搭建 1.1 安装开...