翻转时钟动画实现

1. 背景

今天遇到一个特殊的需求，就是需要实现类似于翻转式的时钟动画，他的效果大概是这样子的。

首先老惯例，先到网上找找有没有插件 😁😁😁😁，找了一圈后发现没有能满足定制化需求的插件。只能自己开干了。

Zaylen原创大约 3 分钟

实现表单文字两端对齐效果

css 实现表单文字对齐效果

1.场景

表单在我们编程中是一个很常见的需求，我们可以直接使用 UI 框架如element-UI就能很快速的实现一个表单

表单.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="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
    <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
    <style>
      .container-box {
        width: 620px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="container-box">
        <el-form :model="form" label-width="120px">
          <el-form-item label="姓名">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" />
          </el-form-item>
          <el-form-item label="兴趣爱好">
            <el-input v-model="form.hobby" />
          </el-form-item>
          <el-form-item label="最喜欢的食物">
            <el-input v-model="form.favoriteFood" />
          </el-form-item>
          <el-form-item label="最喜欢的颜色">
            <el-input v-model="form.favoriteColor" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">提交</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <script>
      const App = {
        data() {
          return {
            form: {
              name: '',
              age: '',
              hobby: '',
              favoriteFood: '',
              favoriteColor: '',
            },
          }
        },
      }

      const app = Vue.createApp(App)
      app.use(ElementPlus)
      app.mount('#app')
    </script>
  </body>
</html>

Zaylen大约 2 分钟

nestJs学习笔记

1.什么是 Nestjs

Nestjs 是一个用于构建高效可扩展的一个基于 nodejs 的服务端应用程序开发框架（写后台的）

特点：

完全支持 typeScript
结合了 AOP 面向切面的编程方式
封装了 Express/Fastify，使得开发者可以自由的使用适用于底层平台的无数的第三方模块

2.控制反转-依赖注入

IOC

Inversion of Control 控制反转，是高层模块不应该依赖底层模块，二者都应该依赖其抽象，抽象不应该依赖细节，细节应该依赖抽象

Zaylen大约 3 分钟

vue3集成成tailwindcss

vue3集成tailwindcss

1.创建vue3工程

pnpm create vue@latest

2.安装tailwindcss依赖

pnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3.初始化tailwind配置文件

pnpm tailwindcss init -p

Zaylen小于 1 分钟

Canvas

1.Canva 简介

Canvas API（画布）是在 HTML5 中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用 JavaScript 操作的位图（bitmap）。

Canvas 对象表示一个 HTML 画布元素 <canvas>它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作

2.第一个 Canvas

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title {
      }
      .canvas-style {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <!-- 

    id: 标识元素的唯一性
    width: 画布的宽度
    height: 画布的高度
   -->
    <div class="title">绘制的图形：</div>
    <canvas id="canvas" width="600" height="400" class="canvas-style"> 当前浏览器不支持canvas </canvas>
    <script>
      // 1. 找到画布
      var canvas = document.querySelector('#canvas')

      // 判断是否支持canvas
      if (!canvas.getContext) {
        console.log('当前浏览器不支持canvas, 请下载最新版')
      }

      // 2. 获取画笔，上下文对象
      var ctx = canvas.getContext('2d')
      // 3. 绘制图形
      // 3.绘制矩形fillRect(位置x, 位置y,宽度， 高度)
      ctx.fillRect(100, 100, 200, 200)
    </script>
  </body>
</html>

Zaylen大约 7 分钟

vue3实现掘金博客文章页

vue3 实现掘金博客文章页

1.开始

1.安装必要插件

pnpm install prismjs marked vite-plugin-prismjs front-matter @types/marked @types/prismjs

prismjs:
- 是一个轻量级、可扩展的语法代码高亮插件
- 官网：棱镜 (prismjs.com)
marked:
- 是一个 JavaScript 编写的全功能 Markdown 解析和编译器。 marked 的目的是快速的编译超大块的 Markdown 文本而不必担心结果会出乎意料或者花费很长时间
- 官网：标记的文档 (marked.js.org)
vite-plugin-prismjs:
- 快速使用 prismjs 的 vite 插件
- https://www.npmjs.com/package/vite-plugin-prismjs
front-matter：
- 用于解析 front-matter 的插件
- https://www.npmjs.com/package/front-matter
@types/prismjs:prismjs 的 typeScirpt 类型支持
@types/marked:marked 的 typeScript 类型支持

2.配置 vite.config.js

Zaylen原创大约 5 分钟

vue3学习笔记

vue3 学习笔记

1.bem 架构

bem 架构即Block（块层）,element（元素层），modifier（修饰符层），是由 Yandex 团队提出的一种 css 命名方法.

.block-name__element-name--modifier-name--modifier-value {}

遵循以下原则：

使用__两个下划线将块元素与名称分开
使用--两个破折号分隔元素名称及修饰符
一切样式都是一个类，不能嵌套

Zaylen大约 26 分钟

TypeScript学习笔记

TypeScript

1.基础

1.1 typeScript 是什么？

TypeScript(简称：Ts)是 javaScript 的超集,TypeScript = Type + javaScript (在 js 基础之上，为 JS 添加了类型支持)

是微软开发的开源编程语言，可以在任何运行 javaScript 的地方运行

// TypeScript 代码：有明确的类型，即：number(数值类型)
let age1: number = 18

// JavaScript 代码： 无明确的类型
let age2 = 18

Zaylen大约 19 分钟

node.js学习笔记

node.js 笔记

1. 初识 node.js

1.1 什么是 node.js

node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境

官方文档：https://nodejs.org/zh-cn/

node.js 中无法调用 DOM 和 BOM 等浏览器内置 API

Node.js 作为一个 javaScript 的运行环境，仅仅提供了基础的功能和 API,基于 Node.js 提供的这些基础功能，很多强大的工具和框架如雨后春笋，层出不穷

Zaylen大约 20 分钟

JavaScript学习笔记

JavaScript

1.简介

设计者布兰登.艾奇在 1995 年利用 10 天完成 JavaScript 设计
最初命名为LiveScript,后来在与 Sun 合作之后将起改名为JavaScript
JavaScript是世界上最流行的语言之一，是一种运行在客户端上的脚本语言
作用：表单验证，网页特效，服务端开发（Node.js），桌面程序（Electron），App(Cordova),控制硬件-物联网（Ruff）, 游戏开发（cocos2d-js）
浏览器主要分为两部分，渲染引擎（用来解释 HTML 和 css）和JS 引擎（用来读取网页中的 JavaScript 代码）

Zaylen大约 35 分钟

跳转到: