原生实现日期选择器
实现效果
实现思路
根据年月实时计算出该月有多少天
根据对应的年月日渲染出元素
初始化当前日期->根据传入的日期在日期列表里找出对应下标,然后根据每个元素的固定高度算出滚动条的 TOP
监听对应元素的滚动条滚动结束事件->然后根据滚动条的 TOP 算出对应的下标。
根据下标实时更新当前的日期，然后重新渲染出对应的年月日。
在动态设置当前日期时，调用实例成员传入的回调函数并注入当前日期以达到实时返回当前日期的目的
实现代码
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel=" ...
canvas 截图效果
canvas 截图效果1. 初始化 canvas2. 绘制图片3. 绘制蒙层4.截图的矩形=> 蒙层上分鼠标移动范围内进行图片截图绘制5. 在鼠标移动时改变矩形,而且修改 源（新的）图像绘制到目标（已有）的图像上(globalCompositeOperation)6. 获取截图的数据 放入另一个 canvas 中进行呈现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./index.css" /> < ...
promise
promisepromise A+规范
Promise 对象的状态: Promise 对象可以处于三种状态之一，分别为 pending（进行中）、fulfilled（已成功）和 rejected（已失败），状态转变只能是从 pending 到 fulfilled 或从 pending 到 rejected。
then 方法: Promise 对象必须提供一个 then 方法，用于处理 Promise 对象的状态变化。then 方法接受两个参数，分别是处理成功情况的回调函数和处理失败情况的回调函数。
then 方法返回一个新的 Promise 对象：then 方法应该返回一个新的 Promise 对象，以便支持 Promise 链式调用。
错误处理: Promise 对象应该能够捕获并处理异常，可以通过 catch 方法或者在 then 方法的失败回调中处理异常。
Promise 对象的值传递: Promise 对象的值可以被传递给后续的 Promise 对象，并且会沿着 Promise 链一直传递下去。
Promise 链: 多个 Promise 对象可以形成 Promise ...
数字转中文
数字转中文
数字中文映射表
处理特殊情况,什么时候该读零,什么时候不应该出现零？
单位的拼接
实现的难点就在于处理零的情况
实现/** * 给定一个数字，将其转换为中文表示。例如，将数字123转换为“一百二十三”。 * @author: Huang * @param {number} num 要转换的数字 * @return {string} 转换后的中文表示 */const numberToChinese = (num) => { if (typeof num !== "number") { throw new Error("function only accept number type"); } // 每次提取四位数进行转换 const nums = num .toString() .replace(/(?=(\d{4})+$)/g, ",") .split(",") ...
webpack编译
webpackwebpack 编译结果
编译结果里 webpack 实现了一套自己的模块化规范,通过把源码中的一个个文件，映射为 key+function 的形式存储到webpack_modules中，同时会把源代码里所有的导入导出替换为 webpack_require 以及 exports。加载的时候就是执行对应 key 的函数。
webpack_require函数:
接收一个模块 id,模块 id 是一个文件的行对路径,函数内部会做缓存
缓存里存在对应模块 id 的 exports 对象则直接返回 exports 对象
如果没有则定义一个 exports 对象,然后通过webpack_require函数加载模块
__unused_webpack_module
就是一个对象 做了 get 数据劫持{ exports: { count:(count) => {... } default:(...) }}
webpack_exports：
就是那个 exports 对象
(() => ...
音乐可视化
音乐可视化效果
实现思路
获取音频数据
canvas 绘制
音频数据变化，canvas 变化html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="shortcut icon" href="./thumb-1920-548850 (2).jpg" type="image/x-icon" /> <style> body { height: 100 ...
scss实现网格布局动画
scss 实现网格布局动画效果
实现
其实就是找到鼠标进入的元素,根据父元素的:has 伪类选择器选择到该元素,动态修改父元素的 grid-template-columns 和 grid-template-rows 属性html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./index.css" /> </head> <body> <div class="conta ...
2024-04-25记录
2024-04-25记录完成毕业设计,微信小程序的开发。甄选壁纸,已经发布到小程序,不过搜索功能要30块钱。目前已经在github开源:github
大文件上传
大文件切片上传
拿到文件对象
使用线程切割文件
拿到切片数组循环上传
上传完毕后通知后端合并文件
后端服务import cors from "cors";import multer from "multer";import express from "express";import fs from "node:fs";import path from "node:path";/** * 大文件上传 * 1. 客户端切片上传文件(给每个文件打上hash) * 2. 服务端接收切片, 切片合并 * 3. 切片上传失败, 切片重传 * 4. 切片上传成功, 通知服务端合并切片 * 5. 合并切片成功, 通知客户端上传完成 *///初始化multerconst storage = multer.diskStorage({ //文件保存路径 destination: function (req, file, cb) { cb(null, path.resolve(_ ...
4.20随记
4.20随记1. 今日学习完成毕业设计，完成数据库设计。搭建小程序开发环境。
2. 今日心情一般