南城FE的博客_JS那些事,CSS那些事,开发工具合集

纯CSS实现有趣emoji切换开关

这是一个纯CSS创建的动画切换开关，它不仅能够在视觉上吸引用户，还能通过交互提供即时反馈。本文将解析源码的核心实现逻辑，这个项目的核心是使用CSS变量、3D变换和过渡效果来实现一个动态的、响应式的用户界面元素。关键技术点 CSS变量：用于动态调整样式。 3D变换：用于创建翻转动画效果。过渡效果：用于平滑地改变元素的样式。 emoji：并不是真正的emoji而是通过CSS绘制。实现步骤

CSS

3D

前端

原创精选 2024-09-29 20:26:29 227 阅读 1收藏 私藏项目实操分享

使用JavaScript读取手机联系人列表

本文翻译自 Read Phone Contacts with JavaScript，作者：Alvaro Montoro，略有删改。作者注：本文中描述的技术和流程是实验性的，只能在少数浏览器中工作。在撰写本文时，联系人选择器API仅支持 Android Chrome（从版本80开始）和iOS Safari（从版本14.5开始）。如果要检查是否可使用这个功能，可以访问这个演示网站alvar

前端

Javascript

原创精选 2024-09-02 09:35:18 344 阅读 yyds干货盘点

JavaScript Set 即将支持并集、交集、差集等

本文翻译自 Union, intersection, difference, and more are coming to JavaScript Sets，作者：Phil Nash，略有删改。 JavaScript Set 在 ES2015 规范中引入，但一直感觉不完整。 Set 是一种值的集合，其中每个值只能出现一次。在 ES2015 版本的 Set 中，可用的功能围绕创建、添加、移除以

javascript

前端

原创精选 2024-08-29 14:08:20 234 阅读

CSS 终于在 2024 年增加了垂直居中功能

本文翻译自 CSS finally adds vertical centering in 2024，作者：James Smith，略有删改。在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 align-content: center进行垂直居中。 <div style="align-content: center; height: 100px;"

html

垂直居中

CSS

原创 2024-08-29 14:00:45 112 阅读 yyds干货盘点

不使用 JS 纯 CSS 获取屏幕宽高

在现代前端开发中，获取屏幕的宽度和高度通常依赖于 JavaScript。然而现代 CSS 也可以获取到屏幕的宽高，通过自定义属性（CSS Variables）和一些数学函数来实现这一目标。本文将详细解析如何使用 CSS 的 @property 规则和一些数学运算来获取屏幕的宽高，严格的说是获取视口的宽度和高度。使用CSS获取屏幕宽高仅是一种实现方式，部分属性和数学函数有一定的兼容性问题，所以线上

CSS

css

前端

原创精选 2024-08-27 10:51:26 222 阅读私藏项目实操分享

CSS炫酷光晕按钮特效

一个很炫酷的发光按钮特效，鼠标悬停时，按钮呈现旋转动画发光的效果，这样的动画效果可以显著提升用户体验和视觉吸引力。本文将解析如何实现这个按钮特效

css

动画

前端

按钮

原创精选 2024-08-19 09:35:08 393 阅读私藏项目实操分享

CSS萤火虫按钮特效

如图所示，这是一个很炫酷的按钮悬浮特效，鼠标悬停时，按钮呈现发光的效果，周边还出现类型萤火虫的效果。本文将解析如何实现这个按钮特效，基于这个动图可以分析出需要实现的要点：有一个跟随鼠标移动的圆点按钮悬停时有高亮发光的效果悬停时按钮周边的萤火中效果实现过程跟随鼠标移动的圆点这个部分需要基于JS实现，但不是最主要的实现代码如果单纯做一个跟随鼠标移动的点很简单，只需要监听鼠标事件获取坐

悬停

css

前端

原创 2024-08-12 09:46:23 172 阅读

螺旋文字滚动特效源码解析

如图所示，今天看到一个很炫酷的双文字螺旋滚动特效，两行文字呈螺旋状变化，在网站中这样的效果对用户很有吸引力。本文将基于原网站解析如何实现这个炫酷的效果，基于这个动图可以分析出需要实现的要点：文字呈螺旋状滚动滚动过程中文字大小变化动画过程无缝链接两行文字滚动实现过程文字展示为了方便更改文案将文案定义变量，通过JS代码动态创建DOM，定义文案、螺旋的角度以及动画的持续时间： con

动画效果

文字滚动

前端

CSS

原创精选 2024-07-31 09:35:11 327 阅读

国内程序员远程工作平台合集，灵活工作新选择

2023年全球远程办公服务市场规模达250.6亿美元，随着数字技术的发展，‌远程工作的市场占比正在不断扩大。‌预计到2030年，‌可以完全远程工作的岗位将从现在的7.3亿个增加到9.2亿个。随着互联网技术的发展和远程工作模式的普及，越来越多的程序员开始寻求灵活的工作方式。本文统计了国内多个专注于远程工作的招聘平台，它们不仅为程序员提供了广泛的工作机会，也为企业提供了便捷的人才解决方案。以下是

远程办公

外包

技术开发

前端

后端

原创 2024-07-28 17:34:48 1317 阅读

JavaScript单行技巧：高效处理数据

本文翻译自 10 one-liners that will change how you think about JavaScript forever，作者：Tari Ibaba，略有删改。本文介绍JavaScript单行程序的独特数据处理能力，单行技巧可以帮助我们更简洁、更高效地处理数据。这些技巧不仅提升了代码的可读性，也减少了代码行数，使代码更加紧凑。以下是一些JavaScript单行

前端

Javascript

原创精选 2024-07-26 09:35:23 256 阅读

纯 CSS 实现计时器效果

如何使用CSS技术，包括CSS计数器、@property规则、伪元素和@keyframes动画，来创建一个纯CSS的计时器效果。

CSS

前端

动画

原创 2024-06-07 18:47:37 350 阅读 yyds干货盘点

炫酷JavaScript文本时钟

今天分享一段简单的 JS 代码，创意来自aem1k.com/qlock，可以将整段 JS 代码字符本身变成时钟，每秒以 HH:MM:SS 的格式显示当前的时间。 JS逻辑实现代码本身也是时钟展示的载体，通过给字符设置不同的高亮颜色来显示当前的时间，离屏幕越远越能更清晰的看到时间的变化。本文解析该代码实现的原理，来看看这份属于程序员的浪漫吧。代码是一个自执行的匿名函数 (r=()=>..

前端

Javascript

原创精选 2024-06-03 13:54:43 418 阅读

如何在 JS 中快速读取文件

假设你需要在服务器上使用JavaScript读取多个文件。在像Node.js这样的运行时环境中，JavaScript有多种读取文件的方式。哪一种是最好的呢？让我们来看看各种方法的测试结果。

读取文件

服务器

前端

nodejs

javascript

原创精选 2024-06-01 10:32:58 162 阅读

纯CSS实现丝滑边框线条动画

纯CSS基于两个元素的1像素间距透出边框线条，配合使用`backdrop-filter`设置纯背景模糊效果，实现炫酷边框线条动画

css

动画效果

前端

原创精选 2024-05-27 12:40:10 957 阅读

5个改善用户体验的HTML属性

本文翻译自 Back to Basics: 5 HTML attributes for improved accessibility and user experience，作者：Daniela Kubesch，略有删改。在快节奏的Web开发世界中，很容易被最新的框架，库和尖端技术所吸引。但有时最有影响力的改进来自于重新审视基本面。在本篇博文中，我将向您介绍五种 HTML 属性，它们不仅

html

前端

用户体验

原创 2024-05-22 09:41:40 101 阅读

实时消息获取技术方案对比

本文翻译自 WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport，略有删改。来源：rxdb.info 对于现代Web应用，从服务器向客户端发送事件的能力是必不可少的。这种必要性导致了几种方法的发展，每种方法都有自己的优点和缺点。最开始长轮询是唯一可用的选项。后来WebSockets取得了不错的效果

客户端

服务器

实时消息

前端

原创 2024-05-20 19:02:54 153 阅读

如何在 Axios 中获取请求 Headers 并处理跨域问题

在使用 Axios 进行网络请求时，访问响应的 Headers 是一种常见的需求，特别是在涉及跨域请求时。本文将介绍如何在 Axios 中获取响应 Headers，并说明在跨域场景下如何处理无法获取特定 Headers 的问题。什么是 Axios？ Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。它可以发送异步 HTTP 请求到 REST 端点并处理响

前端

axios

hearder

跨域

原创精选 2024-04-24 09:46:08 2109 阅读

Vue 之 nextTick 解析

Vue.js 是一个非常流行的前端框架，它提供了许多有用的功能来帮助开发者创建交互式的用户界面。其中，nextTick() 是一个非常重要的工具，用于处理 Vue 中的异步更新。在这篇文章中，我们将详细了解 nextTick() 的工作原理及其使用场景，并通过代码示例来展示其用法。 Vue 的更新机制在 Vue 中，当你更改了数据，视图并不会立即更新。这是因为 Vue 实现了一个异步更新队列。这

Vue

前端

原创 2024-04-23 09:50:19 60 阅读

前端代码规范 - JavaScript 部分规范

本文是前端代码规范系列文章，将涵盖前端领域各方面规范整理，其他完整文章可前往主页查阅~ 在前端开发中，JavaScript 是实现交互性和动态功能的关键语言。为了确保代码的可读性、可维护性和性能，遵循一定的编码规范至关重要。以下是一份前端JS代码规范与最佳实践指南，以下仅是一部分规范供参考，在实际开发中每个项目和团队都有其独特性。**应当根据具体的项目需求和团队习惯来调整，以确保最佳使用规范。

javascript

前端

代码规范

原创精选 2024-04-22 09:26:18 230 阅读

提升用户体验的UUID设计策略

这篇文章讨论了唯一标识符（UUID）在应用程序中的重要性，以及如何通过一些改进来增强用户体验。

typescript

前端

后端

uuid

原创精选 2024-04-21 12:16:45 379 阅读

前端代码规范 - 编辑器&代码风格

在如今快速发展的前端工程领域，团队成员较多时导致编码风格百花齐放，如何保持代码的一致性和可读性成为了开发过程中不可忽视的挑战。

typescript

前端

代码质量

代码规范

原创精选 2024-04-19 09:38:13 206 阅读

JavaScript中处理高速回调与状态更新的问题分析与解决方案

JavaScript中处理高速回调与状态更新的问题分析与解决方案在JavaScript编程中，处理高速执行的回调函数时常会遇到状态管理的问题，尤其是在处理数组或其他共享数据结构时。这些问题通常因为JavaScript的异步执行特性以及共享状态的可变性引起。下面将分析此类问题的原因，并提供一些有效的解决方案。问题描述当在JavaScript中的回调函数快速执行时，如果多个回调函数试图修改同一个

回调函数

数组

前台

异步

原创 2024-04-18 11:14:05 46 阅读

在 mac 系统打包 electron windows 版本后找不到应用

这类情况通常是因为 Electron 打包过程中某些配置没有正确设置或文件未正确引入。下面是一些可能的原因及解决方案：确保入口文件正确： Electron 打包时，main 字段在 package.json 中应正确指向您的主 JavaScript 文件（通常是 main.js 或 index.js）。请检查该字段是否正确设置，并确保该文件在项目结构中的位置正确无误。路径问题：在 M

Windows

electron

前端

原创 2024-04-16 09:26:35 610 阅读

mysql给用户赋予所有权限

在数据库管理中，有时候我们需要给某个用户赋予所有权限，以便他们可以执行所有的数据库操作。在MySQL中，这可以通过执行一系列的SQL命令来完成。本文将向你展示如何在MySQL中给用户赋予所有权限，并讨论相关的注意事项。创建新用户在给用户赋予权限之前，你需要确保用户已经在MySQL中存在。如果用户不存在，你可以使用以下命令创建一个新用户： CREATE USER 'username'@'loca

MySQL

数据库

用户名

原创 2024-04-14 09:59:03 87 阅读 yyds干货盘点

前端

代码规范

代码优化

图片优化

原创精选 2024-04-12 11:43:45 155 阅读

前端代码规范 - 代码注释

良好的注释规范有助于提高代码质量，促进团队协作，加快新成员的项目熟悉速度，不仅能帮助自己和他人快速理解代码，还能提高代码的可维护性。

javascript

代码注释

前端

代码

原创精选 2024-04-11 10:39:15 314 阅读

你应该知道的21个html小技巧

本文翻译自 21 HTML Tips You Must Know About，作者：Shefali，略有删改。在这篇文章中，我将分享21个HTML技巧和代码片段，可以提高你的编码技能。链接联系人使用HTML创建可点击的电子邮件、电话和短信链接：  <a href="mailto:name@example.com"

html

前端开发

代码优化

原创 2024-04-10 09:50:36 42 阅读

Java 获取当前程序所在的路径

在Java开发中，有时候我们需要获取当前运行的Java程序所在的路径。这可能是因为我们需要访问程序目录下的配置文件、日志文件或其他资源。不同的应用场景和部署环境可能会影响程序的当前工作目录，因此理解如何正确获取这些路径非常重要。本文将介绍几种在Java中获取当前程序路径的方法，并讨论它们的适用场景和潜在限制。 1. 使用System.getProperty方法最基本的方法是使用System.ge

Java

System

java

原创 2024-04-09 09:31:42 786 阅读

前端代码规范 - 日志打印规范

在前端开发中，随着项目迭代升级，日志打印逐渐风格不一，合理的日志输出是监控应用状态、调试代码和跟踪用户行为的重要手段。一个好的日志系统能够帮助开发者快速定位问题，提高开发效率。

前端开发

代码规范

JavaScript

原创精选 2024-04-08 19:01:35 470 阅读

mysql 如何查看一条SQL被回滚

MySQL作为世界上最流行的开源关系型数据库之一，其事务管理是数据库管理员和开发人员常常需要关注的重要方面。在事务处理中，了解如何检测和处理回滚事务是至关重要的。本文将讨论如何在MySQL中查看一条SQL语句是否被回滚，并提供一些常见的诊断方法和实践建议。 1. 什么是事务回滚？事务回滚是事务管理中的一个关键概念，指的是在事务处理过程中，当遇到错误或其他中断时，系统会撤销事务中已经执行的所有操作

回滚

MySQL

数据库

原创 2024-04-07 10:31:17 111 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

南城前端的博客

纯CSS实现有趣emoji切换开关

使用JavaScript读取手机联系人列表

JavaScript Set 即将支持并集、交集、差集等

CSS 终于在 2024 年增加了垂直居中功能

不使用 JS 纯 CSS 获取屏幕宽高

CSS炫酷光晕按钮特效

CSS萤火虫按钮特效

螺旋文字滚动特效源码解析

国内程序员远程工作平台合集，灵活工作新选择

JavaScript单行技巧：高效处理数据

纯 CSS 实现计时器效果

炫酷JavaScript文本时钟

如何在 JS 中快速读取文件

纯CSS实现丝滑边框线条动画

5个改善用户体验的HTML属性

实时消息获取技术方案对比

如何在 Axios 中获取请求 Headers 并处理跨域问题

Vue 之 nextTick 解析

前端代码规范 - JavaScript 部分规范

提升用户体验的UUID设计策略

前端代码规范 - 编辑器&代码风格

JavaScript中处理高速回调与状态更新的问题分析与解决方案

在 mac 系统打包 electron windows 版本后找不到应用

mysql给用户赋予所有权限

前端代码规范 - 图片相关

前端代码规范 - 代码注释

你应该知道的21个html小技巧

Java 获取当前程序所在的路径

前端代码规范 - 日志打印规范

mysql 如何查看一条SQL被回滚

欢迎