前端开发 - 网站分类

制作一个炫酷的多小球碰碰的 JS 网页特效，入门弹性碰撞模拟和类的应用

目录前言先画一个圆完善我们的类小球动起来最简单的碰撞计算，接触墙壁反弹向量类的完善检测两小球之间的碰撞完善碰撞的效果重复计算的问题撞击墙壁定格问题内存问题随机数生成多个小球参考资料前言在前端开发里，canvas 是 HTML5 里最炫酷的工具。我们今天就来搞一个这样的梦幻的效果，学习一下 ES6 ...

自制体积不到 2kB 的代码编辑器，areaEditor.js，增强 textarea 标签的代码编辑体验

目录起因快速使用缩进功能缩进类型自动补全括号犯难自动补全阻止补全编辑框抖动在空行按下删除键，清空封装代码怎么压缩 JavaScript 代码更多的功能？起因前两天我搞的那个在线 HTML 新标签页预览功能 https://www.cnblogs.com/duyuanshang/p/1882931 ...

记录---前端动态导入（import.meta.glob）

‍ 写在开头点赞 + 收藏学会以下详细介绍 import.meta.glob 的使用： 1. 参数详解 import.meta.glob( pattern, // 匹配模式：字符串或字符串数组 { eager?: boolean, // 是否同步导入 import?: st ...

Web前端入门第 54 问：JavaScript 3 种书写位置及 script 标签的正确存放位置

JS 的代码并没有强制规定放在 HTML 中的某个位置，如果您有使用过开发者工具查看过网页源码，那么您会看到很多 JS 代码都以 .js 文件的形式存放，并且放在了 HTML 文件最后，也就是 </body> 结束标签之前。但如果仔细观察，在 <head> 标签中，也会找到很多 script 标签 ...

vue 表格组件，记录 vxe-table grid 获取 rowIndex 行索引、列索引的详细说明

vue 表格组件，记录 vxe-table grid 获取 rowIndex 行索引、列索引的详细说明 https://vxetable.cn 表格有 3 种索引机制：行索引：rowIndex、$rowIndex、_rowIndex 列索引：columnIndex、$columnIndex、_co ...

Web前端入门第 53 问：JavaScript 的各种调试方法

任何一门编程语言，在学习之前都应该先弄清楚它的调试方法，毕竟没有不挖坑的人类！程序一旦出现问题，第一时间就是找到问题出在哪儿，其次才是拿出解决办法。如果都找不到问题原因，那又何从谈起解决办法呢？如何排查编程问题，这就是一门艺术了，同样的问题，也许 A 只需要 10 分钟，B 可能需要 30 分钟 ...

开发者福音！一个开源免费的跨平台代码片段管理工具！

massCode —— 一个基于 Vue + Electron 实现的开源免费的代码片段管理工具，帮助开发者更好的记录管理代码片段，同时支持 Windows、macOS、Linux 多平台！ ...

Web前端入门第 52 问：JavaScript 的应用领域

截至目前，您应该对前端的 HTML + CSS 应该有了很清楚的认知，至少实现一个静态网页已经完全不在话下了。当然，CSS 功能绝不止这些，一些不太常用的 CSS 相关知识，后续将通过案例进行分享。那么咱们接下来看看 JavaScript 的相关知识，作为前端领域三剑客之一，JavaScript ...

记录---前端怎么自动检测代码更新？

‍ 写在开头点赞 + 收藏学会在前端开发中，我们通常会使用打包工具（如 Vite、Webpack）将 JS/CSS 等资源构建上线，并配合 CDN、浏览器缓存来加速访问。但问题也随之而来： “我已经发布新版本了，怎么用户还看到旧界面？” “为啥修复的 bug 还在？” 原因 ...

Web前端入门第 51 问：移动端适配的视口元标签（meta）常见使用场景

经常查看网页源码的同学应该都有注意到，基本上面向移动端的所有网站都有个 <meta name="viewport" xxx> 这样的HTML元素。为什么需要 meta 标签？在移动端刚起步的时候，默认网页是以 PC 端的宽度渲染，这就导致用户看到的网页过小，需要用户手动缩放才能看到网页内容。在 ...

jQuery Ajax 实用方法精要

本文全面解析jQuery Ajax核心方法，包括load()、get()、post()的用法，以及底层$.ajax()的精细控制。涵盖Ajax事件机制、JSONP跨域请求和表单序列化技巧，帮助开发者优化前端数据交互，提升Web应用性能。适合前端入门及进阶学习。 ...

解决uniapp实现ios系统中低功耗蓝牙通讯失败问题

UniApp 实现 App 连接低功耗蓝牙（BLE）通讯手头上有一个 uniapp 实现低功耗蓝牙通讯设备的项目，本来 Android 版本没问题已经上线，到了发布测试 iOS 出问题了，连接上了设备但是通讯失败，排查了下才发现是协议通讯中有包含六位 ID，也就是设备的 MAC 地址，因为设 ...

vue vxe-print 打印设置边距、页头页尾高度样式

vue vxe-print 打印设置边距、页头页尾高度样式官网：https://vxeui.com github：https://github.com/x-extends/vxe-pc-ui gitee：https://gitee.com/x-extends/vxe-pc-ui 设置边距通过设置 ...

ECharts柱状图自定义lenged 图例图标使用vue项目中assets下的的图片

<template> <div> <div ref="barChart" style="width: 800px; height: 600px;"></div> </div> </template> <script> import * as echarts from 'echarts'; impor ...

一体化白板！一款开源的白板工具！

drawnix —— 一款开源的、基于 React 实现的白板工具（SaaS），实现一体化白板功能，包含自由画、思维导图、流程图等。 ...

vscode Live Server插件问题修改

基于Windows11下Visual Studio Code中的Live Server插件使用过程中出现的问题与解决方法本文字符约881个，阅读需10分钟问题 Open a folder or workspace... (File -> Open Folder) 这个是没有打开文件夹点击这个后 ...

Web前端入门第 49 问：CSS offset 路径动画演示

什么是路径动画？随手画一条不规则的线，让元素按照这条不规则的线运动起来，这就是所谓的路径动画。前面说过的动画都只能针对某一个 CSS 属性，要想实现路径动画可没办法，路径动画必须借助 CSS3 的 offset 相关能力。 offset 相关属性要实现路径动画，必须用到 offset 的相关属 ...

国际化利器 Intl Messageformat

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：霜序 Formats ICU Message strings with number, date, plural, and select placeholde ...

【JavaScript的加减乘除，解决小数准确度缺失问题】

加 /** ** 加法函数，用来得到精确的加法结果 ** 说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 ** 调用：accAdd(arg1,arg2) ** 返回值：arg1加上arg2的精确结果 **/ function accA ...

Vue 3中的ref和template refs详解（含Vue2迁移到Vue3方法）

Vue 3中的ref和template refs详解在Vue 3中，ref和模板引用（template refs）是两个相关但不同的概念，它们在组合式API（Composition API）中扮演着重要角色。 ref - 响应式引用 ref是Vue 3中创建响应式数据的主要方式之一。基本用法 i ...