前端小知识点，随遇随记

最新推荐文章于 2024-07-10 14:03:37 发布
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量1.1k 收藏 11
点赞数 33
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58368794/article/details/139987054
版权

1.Array.of() 和 Array() 区别

Array.of() 和 Array() 构造函数之间的区别在于对单个参数的处理：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个 length 为 7 的空数组（这意味着一个由 7 个空槽组成的数组，而不是由 7 个 undefined 组成的数组）。

Array.of(7); // [7]
Array(7); // 由 7 个空槽组成的数组

Array.of(1, 2, 3); // [1, 2, 3]
Array(1, 2, 3); // [1, 2, 3]

2.超出n行显示省略号

<p>
  在此示例中，<code>-webkit-line-clamp</code> 属性设置为
  <code>2</code>，即文本在超过两行后将被截断。文本截断处将显示省略号。
</p>

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

在这里插入图片描述

3.数组的flat(depth )

flat(depth) 方法创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。

depth 指定要提取嵌套数组的结构深度，默认值为 1。

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

4.Array.prototype.flatMap()

flatMap() 方法对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法（arr.map(…args).flat()），但比分别调用这两个方法稍微更高效一些。

  1. map() 与 flatMap()
const arr1 = [1, 2, 3, 4];

arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]

// 只有一层被展平
arr1.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]

const arr1 = ["it's Sunny in", "", "California"];

arr1.map((x) => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap((x) => x.split(" "));
// ["it's","Sunny","in", "", "California"]

5.transition

可视化贝塞尔曲线：https://cubic-bezier.com/#.17,.67,.83,.67

/* timing function 是过渡时机函数，可以使用贝塞尔曲线  */
transition: margin-right 4s ease-in-out 1s;

timing function

/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Function values */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

/* Steps Function keywords */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);

/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;

6. transform 旋转、缩放、倾斜或平移给定元素

CSS transform 属性允许你旋转、缩放、倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间实现的。

  <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function   -->
 <!-- transform 后面跟css变换函数 -->
 <option>rotate(360deg)</option>
  <option>rotateX(360deg)</option>
  <option>rotateY(360deg)</option>
  <option>rotateZ(360deg)</option> 
  <option>rotate3d(1, 1, 1, 90deg)</option>
  <option>scale(1.5)</option>
  <option>scaleX(1.5)</option>
  <option>scaleY(1.5)</option>
  <option>scaleZ(1.5)</option>
  <option>scale3d(1, 1.5, 1.5)</option>
  <option>skew(17deg, 13deg)</option>
  <option>skewX(17deg)</option>
  <option>skewY(17deg)</option>
  <option>translate(100px, 100px)</option>
  <option>translateX(100px)</option>
  <option>translateY(100px)</option>
  <option>translateZ(100px)</option>
  <option>translate3d(50px, 50px, 50px)</option>
  <option>perspective(200px)</option>
  <option>matrix(1, 2, -1, 1, 80, 80)</option>
  <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>

transform-origin CSS 属性让你更改一个元素变形的原点。

CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。

/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;

7.css函数

https://developer.mozilla.org/en-US/docs/Web/CSS/abs

里面有跟多，transform 后面跟css变换函数可在里面查找

/* 好用的css函数  */

width:calc(100% - 80px);  /*用于css 的样式计算  */

filter: /*滤镜  */

circle()  /* circle() CSS 函数定义了一个圆形，使用半径和位置来描述。它是 <basic-shape> 数据类型之一  */
ellipse() /* 椭圆  */

filter:drop-shadow(offset-x offset-y blur-radius spread-radius color) /* 投影 */
                              模糊半径      阴影的扩散半径
                              
                              
transform: rotate(45deg);  /*指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转 180° 也被称为点反射*/

           rotate3d(x, y, z, a)
/* x*/
/*<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 X 坐标方向的矢量。*/

/*y*/
/*<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 Y 坐标方向的矢量。*/

/*z*/
/*<number> 类型，可以是 0 到 1 之间的数值，表示旋转轴 Z 坐标方向的矢量。*/

/*a*/
/*<angle> 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。*/

`
transform:scale(sx, sy) /* 缩放*/
/*sx*/
/*<number>，表示缩放向量的横坐标。*/
/*sy*/
/*<number> ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 sx。从而使得元素在保持原有形状下均等缩放*/


transform:skew(ax, ay); /*skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。*/
/*ax*/
/*ax 是一个 <angle>，表示用于沿横坐标扭曲元素的角度。*/
/*ay*/
/*ay 是一个 <angle> ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为 0，导致纯水平倾斜。*/

transform:translate() /* 这个 CSS 函数在水平和/或垂直方向上重新定位元素  */

transform:translate3d(tx, ty, tz) /*CSS 函数在 3D 空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。   */

8.esm中的额符号绑定（简单的说变量共同指向于同一块内存空间）

// a.js
export let count = 1;
ecxxport function increase(){
  count++;
}

// b.js
import {count,increase} from "./a.js"  //此写法属于es中的具名导入，不属于解构赋值,
console.log(count); // 1
increase();
console.log(count); // 2

9.修改this指向

// apply  修改this指向，传递的参数是一个数组
const obj = {
  name: 'Charlie',
};
function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}
greet.apply(obj, ['Hello', '!']);  // 输出: Hello, Charlie!


// call  修改this指向
const obj = {
  name: 'Bob',
};
function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}
greet.call(obj, 'Hi');  // 输出: Hi, Bob


// 调用后永久的绑定this，并产生一个新的函数  vuemethods里的方法其实就是通过bind绑定到this实例上的
const obj = {
  name: 'Alice',
};
function greet() {
  console.log(`Hello, ${this.name}`);
}
const boundGreet = greet.bind(obj);
boundGreet();  // 输出: Hello, Alice

10.customRef() 自定义ref，可用于防抖

https://cn.vuejs.org/api/reactivity-advanced.html#customref，

基本原理就是使用 ref 里的get 和 set 方法

customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。

一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。

  1. 封装
import { customRef } from 'vue'

export function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

2.使用

<script setup>
import { useDebouncedRef } from './debouncedRef'
const text = useDebouncedRef('hello')
</script>

<template>
  <input v-model="text" />
</template>

11.vue渲染机制

在这里插入图片描述

可以通过自定义实例的方式封装类似于弹窗的一些组件

import HelloWorld from "@/components/HelloWorld.vue";
import Vue from 'vue'
function showMessage(message, clickHandler) {
    const div = document.createElement("div");
    document.body.appendChild(div);
    // 渲染一个messagebox
    const app2 = new Vue({
        render: h => h(HelloWorld, {
            props: {
                msg: message
            },
            on: {
                click: () => {
                    clickHandler && clickHandler(()=>{
                        app2.$destroy();
                    });
                }
            }
        })
    }).$mount(div)
}

export default showMessage;

<template>
	<div>
		这是a页面
		<button @click="btn">cancel</button>
		<button @click="message">消息</button>
	</div>
</template>

<script>
// 弹框组件
import showMessage from "../utils/message";
export default {
	data() {
		return {};
	},

	methods: {
		message() {
         showMessage("这是展示的消息",(close)=>{
            console.log("点击了关闭按钮");
            close();
         })
      },

	},
};
</script>

12.自动注入 sass less 全局变量

简单的理解为，使用less 或 scss 的时候，需要引入一些共有的额样式，在每个组件里面使用 @import 比较麻烦，此方法就是帮助我们在运行及打包的时候自动帮我们注入

可通过less-loader 和 scss-loader处理

https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions-extension-additionaldata

13.光标操作

const selection = window.getSelection() ;  // 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置
选区可能有多个
selection.toString() // 获取被选中的文本，返回的是一段字符串

selection.collapse(parentNode, offset); // 可以收起当前选区到一个点。文档不会发生改变。如果选区的内容是可编辑的并且焦点落在上面，则光标会在该处闪烁。
// parentNode
// 光标落在的目标节点。
// offset 可选
// 落在节点的偏移量。

/* 将光标收起到文档 body 的开头 */
var body = document.getElementsByTagName("body")[0];
window.getSelection().collapse(body, 0);

可配合 Selection.collapseToEnd()//  方法的作用是取消当前选区，并把光标定位在原选区的最末尾处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。

Selection.collapseToStart() // 方法的作用是取消当前选区，并把光标定位在原选区的最开始处，如果此时光标所处的位置是可编辑的，且它获得了焦点，则光标会在原地闪烁。

-----------------
Selection.getRangeAt(index)   返回一个包含当前选区内容的区域对象。
let ranges = [];
sel = window.getSelection();
for (var i = 0; i < sel.rangeCount; i++) {
  ranges[i] = sel.getRangeAt(i);
}
/* 在 ranges 数组的每一个元素都是一个 range 对象，
 * 对象的内容是当前选区中的一个。 */
-----------------

Selection.removeAllRanges() 移除所有的选区

13.css 的 animation 动画

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

一共8个属性

/* @keyframes name | duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state  */
animation: move 3s ease-in 1s 2 reverse both paused;

/*动画时间函数  */
/* 关键字值 */
animation-timing-function: ease;  /* 中间加速，结束减速  */
animation-timing-function: ease-in; /* 一开始较慢，随着动画属性的变化逐渐加速，直至完成  */ 
animation-timing-function: ease-out; /* 一开始较快，随着动画的进行逐渐减速 */
animation-timing-function: ease-in-out; /* 一开始缓慢变化，随后加速变化，最后再次减速变化  */ 
animation-timing-function: linear;  /* 匀速运动 */
animation-timing-function: steps(n, <jumpterm>);  /* 解释如下 */
animation-timing-function: cubic-bezier(p1, p2, p3, p4)  /* 开发者自定义的三次贝塞尔曲线，其中 p1 和 p3 的值必须在 0 到 1 的范围内。  */

按照 n 个定格在过渡中显示动画迭代，每个定格等长时间显示。例如，如果 n 为 5，则有 5 个步骤。动画是否在 0%、20%、40%、60% 和 80% 处或 20%、40%、60%、80% 和 100% 处暂停，或者在动画的 0% 和 100% 之间设置 5 个定格，又或是在包括 0% 和 100% 的情况下设置 5 个定格（在 0%、25%、50%、75% 和 100% 处）取决于使用以下跳跃项之一：

jump-start
表示一个左连续函数，因此第一个跳跃发生在动画开始时。

jump-end
表示一个右连续函数，因此最后一个跳跃发生在动画结束时。

jump-none
两端都没有跳跃。相反，在 0% 和 100% 标记处分别停留，每个停留点的持续时间为总动画时间的 1/n。

jump-both
在 0% 和 100% 标记处停留，有效地在动画迭代过程中添加一个步骤。

start
等同于 jump-start。

end
等同于 jump-end。

step-start
等同于 steps(1, jump-start)。

step-end
等同于 steps(1, jump-end)。

14.canvas

注：canvas 所有的样式都是在绘制前提前标注

/**
  绘制矩形
*/
fillRect(x, y, width, height)  // 绘制一个填充的矩形
strokeRect(x, y, width, height) // 绘制一个矩形的边框
clearRect(x, y, width, height) // 清除指定矩形区域，让清除部分完全透明。

/**
  绘制直线
*/
moveTo(x, y)  // 将笔触移动到指定的坐标 x 以及 y 上。
lineTo(x, y) // 绘制一条从当前位置到指定 x 以及 y 位置的直线。

/**
  绘制圆弧
*/
// 画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成。
arc(x, y, radius, startAngle, endAngle, anticlockwise) 
// 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
arcTo(x1, y1, x2, y2, radius)

/**
  绘制贝塞尔曲线
*/
quadraticCurveTo(cp1x, cp1y, x, y) // 绘制二次贝塞尔曲线，cp1x,cp1y 为一个控制点，x,y 为结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) // 绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。


/**
  设置透明度
*/ 
ctx.globalAlpha = 0.2;

/**
  绘制文本
*/ 
fillText(text, x, y [, maxWidth]) // 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
strokeText(text, x, y [, maxWidth]) // 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。
let style = ctx.measureText("哈哈哈").width // 预测文本宽度

/**
  绘制图像
*/ 
const img = new Image();
const img = new Image();
img.onload = () => {
    /**
      若调用 drawImage 时，图片没装载完，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。
      因此你应该用 load 事件来保证不会在加载完毕之前使用这个图片：
    */
};
img.src = "https://www.runoob.com/wp-content/themes/runoob/assets/img/404.jpg";
// 裁剪图片 
ctx.drawImage(document.querySelector('img'), 0, 0, 150, 150, 37, 37, 150, 150);  
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);  //参数解释如下

在这里插入图片描述

冬日柠檬茶.
关注
  • 33
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端知识点随记
←か淡定☆ ヾ 的博客
08-10 240
前端补充1. CSS 知识点1.1 鼠标样式|十字|1.2 css 半透明样式1.3 CSS3 transform 属性1.3.1 旋转1.3.2 缩放1.4 特殊写法 \91.5 解决video标签在谷歌不能自动播放2. Javascript 知识点2.1 创建节点2.2 插入节点2.3 修改元素样式2.4 获取Element滚动距离2.5 根据索引号删除相关数据2.6 清空Ol里面的元素的内容2.7 数组转换为字符串2.8 Query.js相关2.8.1 获取DOM对象2.8.2 获取jQuery对象
前端面试知识点--4
遇见更好的自己
09-27 871
来自牛客网的面经 Javascript 是一种弱类型语言，它分别有什么优点和缺点？ Javascript 里面的数据类型有哪些？ 在 js 里 call() 与 apply() 有什么相同和不同？ XML 和 JSON 有过了解吧？能说一下分别介绍一下他们吗？ JSON 有什么优势？ 你最近都在看哪些书？ 《高性能网站建设》这本书里讲了些什么？对你有什么帮助？ 看到你简历里写有了解 C
随记前端知识
qq_56564286的博客
03-16 40
重要：GET和POST本质上就是TCP链接，并无差别 ----只是应用过程中可能会有所不同。同样的接口同样的参数 每次请求返回的数据都是一样的 就是幂等。
spring知识点随记
zpl_well的博客
03-30 80
类似aware一系列接口都是spring bean生命周期中去回调，自己拓展功能。BeanNameAware 作用： 让bean感知beanName。
十次方中的前端知识点随记
tzxylao的博客
05-14 85
1. 十次方中的前端知识点随记 好久没上传笔记了，主要最近的笔记都零零散散，知识点也不集中，就不传了；最近项目想用到前后端分离，而且前端我也想参与下，就先基本的学一遍，记点零星的笔记，各位能从中看到有用的东西最好 1.1. Node.js 1.1.1. node基本使用 查看nodejs.cn中文文档地址 var http = require("http")引入模块 http.create...
C语言 第三周知识点随记
m0_71290816的博客
09-09 312
C语言 第三周知识点随记
【前端新手】css知识点随记（一）
u012088576的博客
09-07 477
参考官方文档和各类博客的一些常用css属性或布局说明: 1. text-aligh 2. vertical-align 3. 清除浮动 4. 图片自适应 5. background-size
前端学习之路——随遇随学知识点，在不断完善的过程中
xwyjw的博客
12-30 335
前端学习之路的不断完善
vue相关知识点随记
zzzz121380的博客
10-13 122
vue随记 1． 计算属性中定义的方法里面包括get和set方法，get方法根据其他属性值动态计算当前属性值，set方法监视当前属性变化，更新其他属性值 2． 父子组件中，子组件不能直接修改父组件的值，需要通过$emit方法修改父组件的值；子组件通过props接受父组件的属性，父组件修改时，子组件对应自动修改 3． computed计算属性，methods方法，watch监听区别：这三者都可以定义方法，methods定义普通方法，watch在监听经常变化的属性时使用，computed只在相关的响应式依赖发生
JAVA核心知识点整理.zip
11-18
这份"JAVA核心知识点整理.zip"压缩包显然是一份宝贵的资源，适合不同阶段的Java开发者学习和参考。它包含了Java技术的广泛知识点，无论是初学者还是经验丰富的开发者都能从中受益。以下是基于这个描述可能涵盖的一些...
微信小程序小手随记个人记账软件系统
11-02
- **ASP.NET Web API**：这部分可能使用了ASP.NET Web API，这是一个用于构建RESTful服务的框架，可以提供JSON或XML格式的数据，方便前端小程序进行HTTP请求和数据交换。 - **路由与控制器**：接口设计中，可能...
vue学习随记.zip_vue_vuex_vue学习知识点笔记_图片上传插件封装
09-23
vue的知识点干货，从路由到vuex的知识点干货
angular 服务随记小结
01-19
依赖注入 创建服务需要用到Injectable，@Injectable() 装饰器把类标记为可供注入的服务，不过在使用该服务的 provider 配置好 Angular 的依赖注入器之前，Angular 实际上无法将其注入到任何位置。...
知识点比较全面。可以看看
01-25
详细介绍各种编程的知识点
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 745
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
(三)前端javascript中的数据结构之链表上
峰会路转的博客
07-08 299
在js中，没有为我们提供原生的数据结构支持的，但是在java中是有提供的。所以需要我们去模拟这种结构实现。链表中最关键的一个元素，就是头节点，头节点不存储数据，指向第一个节点链表中几乎所有的操作都要从头结点开始。
Haproxy搭建Web群集
wkysdhr的博客
07-08 890
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
Webkit简介以及工作流程
最新发布
读心悦
07-10 216
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
随记洗牌发牌的C语言程序
06-06
以下是一个简单的随机洗牌发牌程序的C语言代码： ```c #include #include #include #define DECK_SIZE 52 #define SUIT_SIZE 13 int main() { int deck[DECK_SIZE]; int i, j, temp; // 初始化牌堆 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冬日柠檬茶.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值