封装message消息提示
封装思路
暴漏一个全局对象,内含四个方法->四个方法分别对应不同的消息提示类型
方法可以接受一个字符串,或者接受一个指定类型的对象
参数归一化
使用 vue 的 createApp 创建一个临时组件进行挂载
书写样式动画
封装效果
实现过程使用
<template> <div class="container"> <div @click="success">SUCCESS</div> <div @click="warning">WARNING</div> <div @click="info">INFO</div> <div @click="error">ERROR</div> </div></template><script setup lang="ts">import Mess ...
保护单向数据流
什么是单向数据流单向数据流是指数据只能在一个方向上流动，即从父组件到子组件。在 Vue.js 中，单向数据流是指数据只能从父组件传递给子组件，而不能从子组件传递给父组件。
为什么需要单向数据流单向数据流可以确保数据的流动清晰，易于维护和调试。同时，单向数据流也可以避免子组件意外修改父组件的数据，从而导致数据的不一致。
<!-- 这样直接绑定数据是不应该的,会直接修改父组件传递的数据,而造成打破单向数据流,为以后的维护调试埋雷 --><input type="text" v-model="modelValue.keyWord" /><select> <option v-for="item in modelValue.select" :key="item" :value="item"> {{ item }} </option></select><script set ...
好玩的开灯效果
效果
实现html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <link rel="stylesheet" href="./index.css" /> </head> <body> <div class="box"> <div class="btn"></div> <div class="light"> <di ...
单例模式
ts 实现
私有变量
私有构造函数 不允许在外部通过 new 创建实例
提供获取实例的方法
export class Singleton { // 私有变量 private static instance: Singleton; public options: {}; // 私有构造函数 private constructor(options) { this.options = options; } // 获取实例的方法 public static getInstance(options): Singleton { //第二次就不会进入判断 if (!Singleton.instance) { Singleton.instance = new Singleton(options); } return Singleton.instance; } //判定是否以及初始化 public isInitialized(): boolean & ...
红绿灯
红绿灯
红绿灯的实现,第一想法就是用 setTimeout 和 setInterval ,但是严格一点来说 setTimeout 一定准时吗？随着时间的推移以及浏览器的渲染流程与优化策略,误差会越来越大.
所以应该使用轮询的方式来做
html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>红绿灯</title> </head> <body> <div class="box"> <div class="line-count"> <div cl ...
洋葱模型
class TaskPro { #tasks = []; #isRun = false; #currIndex = 0; /** * 添加任务 * @param {Function} task */ addTask(task) { this.#tasks.push(task); } //执行任务 async run() { //不允许连续调用,需要等待上一次实例调用结束 if (this.#isRun) return; this.#isRun = true; await this.#runTask(); } //取出一个任务执行 async #runTask() { //边界处理 if (this.#runTaskBoundary()) return; const task = this.#tasks[this.#currIndex]; //记录当前下标用于判定是否调用next const i = this.#cu ...
视频弹幕功能
效果
实现思路
页面结构->canvas 覆盖在视频上面,弹幕输入框,按钮,弹幕颜色选择器
初始化数据
初始化 canvas
整理数据参数,循环数据根据参数判定是否绘画弹幕
监听进度条进行弹幕绘制复原
点击发送收集信息 push 到源数据
实现源码html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>视频弹幕功能</title> <link rel="stylesheet" href="./Static/index.min.css" /> </head> <body> ...
原生实现日期选择器
实现效果
实现思路
根据年月实时计算出该月有多少天
根据对应的年月日渲染出元素
初始化当前日期->根据传入的日期在日期列表里找出对应下标,然后根据每个元素的固定高度算出滚动条的 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 ...