数字转中文
数字转中文
数字中文映射表
处理特殊情况,什么时候该读零,什么时候不应该出现零？
单位的拼接
实现的难点就在于处理零的情况
实现/** * 给定一个数字，将其转换为中文表示。例如，将数字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. 今日心情一般
css3 3d立体效果
css3 3d 立体效果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="box"> <div class="card one">1</div> <div class="card two ...
scss实现星空特效
scss实现星空特效实现效果
以前实现这种特效都是用 js 来实现的，现在随着 css 预编译的发展，scss 也可以实现这种效果。
实现难点
不同的大小
不同的移动速度
不同的数量
不同透明度
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>scss</title> <link rel="stylesheet" href="./index.css" /> </head> <body> <div class="box"> ...
随记
随记今天也是学了一下uniapp来开发微信小程序，给我的感觉是挺简单的，很多东西官方团队都封装的很好,唯一吐槽点 官方文档能不能整理一下，这么优秀的团队文档简直就是一坨