前端开发 JavaScript
刷新
原生JS实现一个日期选择器（DatePicker）组件

博主头像 这是通过原生HTML/CSS/JavaScript完成一个日期选择器（datepicker）组件，一个纯手搓的组件的开发。主要包括datepicker静态结构的编写、日历数据的计划获取、组件的渲染以及组件事件的处理。 根据调用时的时间格式参数，可以控制短日期格式或长日期格式。 实现效果（短日期格式） ...

JavaScript —— 输入与输出

博主头像 输入与输出 输入： 从HTML与用户的交互中输入信息，例如通过input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。 例如： <body> 输入： <textarea class="input" name="" id="" cols="30" ro ...

JavaScript —— 变量与运算符

博主头像 变量与常量 let：用来定义变量，可以只声明不定义； 例如： <script type="module"> let a; // 只声明不定义 let x = 2, name = "kitty"; // 定义若干个变量 let d = { // 定义一个对象，类似于python中的字典 name: " ...

html2canvas使用注意要点

博主头像 作者：咕魂 日期：2025年1月13日 目录注意事项实现方法 注意事项 不要给svg加style属性，会导致实际布局与图片布局不一致 不要使用overflow：hidden属性，文本超出长度转换为省略号将无法使用 // 替换方案 // js限制字符串长度 formatStr(text) { let ...

前端实现 HTML 网页转 PDF 并导出

博主头像 有个新需求，当点击【下载】按钮时，直接将当前 html页面下载为 PDF。通过 html2canvas + jsPDF 可实现PDF单页下载，甚至是多页下载，记录分享一下~ 最后有样式源码，可自取 ...

js实现拖动调节宽高的iframe

博主头像 需求 我有一个用vue3项目实现的ai聊天功能。使用js文件的形式来引入其它项目，具体的表现显示是一个机器人icon，点开就是iframe。但是定死iframe的宽高，就显得不够灵活。所以我打算做一下类似windows窗体那样的拖拽调整宽高。具体代码也借助了chat AI，如果完全自己实现还是很耗时 ...

记录---JS 的蝴蝶效应 —— 事件流

博主头像 ‍ 写在开头 点赞 + 收藏 学会 前言 在 JavaScript 的世界里，事件流就像一只永不停歇的蝴蝶，每一个动作、每一个点击、每一个滚动，都会触发一连串的蝴蝶效应。作为一名开发者，掌握事件流的艺术，不仅能让你的网页更加生动、更加交互，也能让用户体验到前所未有的舒适。那么，事 ...

JavaScript 实现支持过期时间的数据缓存功能

博主头像 JavaScript 实现支持过期时间的数据缓存功能 要在 JavaScript 中实现数据缓存功能并支持设置过期时间，可以使用 localStorage、sessionStorage 或内存对象（如 Map 或普通对象）来存储数据，并为每个缓存项设置一个过期时间。以下是一个简单的实现示例： Jav ...

HTML Select Drop Down List Data Source From Web API

博主头像 前端，html还是mvc页面，我们想实现一个下拉选单，写<select>指定id或者name，稍后在js代码能获取到它。 #7~#9行，没有参数条件可传，保留为空。#19 Web API地址。#21为异步方法，看下， #37，是为了不让代码写在一块，Insus.NET已经重构成另一个function ...

ThreeJs-11精通着色器编程（重难点）

博主头像 着色器语言编程比较重要，后面的几个章节都会围绕这个来做特效 一.初识着色器语言 首先什么叫做着色器，他是一种语言，首先需要设置为着色器材质，然后在材质里面书写一些语言，可以告诉他顶点，然后去自定义一些东西，比如我想要这一面为红色等等 比如用一个基础材质做了一个平面 现在改为着色器材质 着色器里面一个 ...

Ajax入门以及Axios的详细使用（含Promise）

博主头像 1. 概述 1.1 是什么 Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） Ajax 不是新的编程语言，而是一种用于创建快速动态网页的技术 Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页 ...

ThreeJs-09精通粒子特效

博主头像 一.初识points与点材质 什么叫做点材质，之前说过所有物体都是有定点的比如一个球体，并且将材质设置为线框模式，这个之前就说过所有mesh物体都是由三角形构成，都是有顶点的 我们也可以创建点物体，电视材质就不能是普通材质了，必须要用点材质 1.1 点材质的属性 比如还可以设置颜色，或者因相机深度而 ...

Nodejs（含js模块化+npm+express）

博主头像 1. 简介 1.1 运行环境 浏览器是 js 的前端运行环境 Node.js 是 js 的后端运行环境 Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API 1.2 Node.js 可以做什么 基于 Express 框架可以快速构建 Web 应用 基于 Electron 框架可以快速 ...

Promise/A+ 规范 - 中文版本

博主头像 Promises/A+ 这是一个开放标准，旨在让不同开发者实现的 JavaScript Promise 能够无缝衔接并应用——由前辈们制定，为其他后来者提供参考 一个 promise 所表示的是异步操作的结果。与 promise 交互的主要方式是通过它的 then 方法，该方法会注册所传入的回调函数 ...

构建模块化 CLI：Lerna + Commander 打造灵活的基础脚手架

博主头像 在现代软件开发中，创建 定制化的命令行工具(CLI) 已成为满足公司业务需求的关键一环。这类工具可以辅助执行诸如代码检查、项目初始化等任务。为了提高开发效率并简化维护过程，我们将功能模块化，并通过多个子包来组织这些功能。本文将介绍如何使用 Lerna 来管理一个多包项目，并基于 Commander ...

ThreeJs-07操控物体实现家具编辑器

博主头像 本章节实现效果，通过gui快速添加场景，家具，并且可以快速设置家具实现一个编辑器效果 一.基础设置与物体添加列表 用之前做过的一个案例来改 首先不要这个模型，然后换个背景颜色，并且添加一个网格辅助器 1.1 添加场景 先往事件对象里面添加一个函数，到时候点击就会调用这个函数，而这个函数就是往场景加这 ...

ThreeJs-06详解灯光与阴影

博主头像 一.gsap动画库 1.1 基本使用和原理 首先直接npm安装然后导入 比如让一个物体，x轴时间为5s 旋转同理 动画的速度曲线，可以在官网的文档找到 1.2 控制动画属性与方法 当然这里面也有一些方法，动画完成，动画开始等 一些属性 也可实现停止动画随时，给到一个变量 双击暂停以及恢复 二.灯光与 ...

<1···1011