自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(48)
  • 资源 (1)
  • 收藏
  • 关注

原创 React实现大转盘抽奖效果

【代码】React实现大转盘抽奖效果。

2023-04-13 14:35:24 998 1

原创 git常用命令

git是一个版本管理工具,共有四个分区:、、、官方文档工作区(Workspace)工作区(Workspace)即本地代码所在的目录,同时也是存放 .git/ (本地仓库)的目录。暂存区(Index/Stage)暂存区(Index/Stage)是工作区和本地仓库的缓存空间,里面记录着即将提交给本地仓库(版本库)的文件修改信息,.git/ 目录里的index文件就是暂存区。本地仓库(Repository)本地仓库(Repository)也称本地库或版本库,存放了本地的所有版本(commit提交记录),本地仓库的

2022-12-08 13:35:26 1298

原创 Vue—keepAlive 动态管理页面缓存

是Vue的内置组件,当他包裹组件时,会对组件进行缓存,不去销毁组件。首次进入页面时,会触发mounted和activated钩子,当页面被缓存下来后,进入页面只会触发activated钩子,离开页面会触发,不会触发destroyed。

2022-10-10 14:10:59 2351

原创 css实现圣杯布局的四种方式

圣杯布局如下图指的是两端宽度固定,中间自适应。在日常开发中,圣杯布局的使用频率是比较高的。本篇文章整理了几种圣杯布局的实现方式,欢迎各位大佬进行补充。HTML代码

2022-09-15 17:25:04 1968

原创 css实现一个正方形

vw是相对于视口的宽度。视口被均分为100单位的vw。宽度计算的,利用此特性就可以实现一个固定宽高比的div。宽高固定是最简单的情况了,只要设置对应的宽高就可以了。需要设置成0,内部就无法很好的显示子元素。确实可以实现正方形的效果,但是。padding设置为。

2022-09-09 15:50:15 4176

转载 React Context

Context提供了一个无需为每层组件手动添加props,就能在组件树间进行数据传递的方法。

2022-08-03 16:48:59 151

原创 力扣3.无重复字符的最长子串(JavaScript版本)

因为无重复字符的最长子串是"abc",所以其长度为3。因为无重复字符的最长子串是"wke",所以其长度为3。因为无重复字符的最长子串是"b",所以其长度为1。遍历字符串的每一位,直到遇到重复的值结束。,请你找出其中不含有重复字符的。...

2022-07-21 08:56:18 595

原创 力扣2.两数相加(JavaScript版本)

给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的,并且每个节点只能存储 一位 数字。请你将两个数相加,并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外,这两个数都不会以 0 开头。243564#mermaid-svg-Lk1RStZT6BvBuA7r {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Lk1RStZT6Bv

2022-07-12 09:09:52 652

原创 JavaScript链表---双向链表

上一篇介绍了单向链表,我们发现从链表的头部通过next向后遍历链表很简单,但是从后向前遍历却不容易。既然我们可以把下一个节点存起来,那也可以定义一个prev属性,来指向上一个节点,这样就形成了双向链表首先在Node类中增加一个prev属性插入节点将新节点的next指向给定节点的next,新节点的prev指向给定节点将给定节点next的prev指向新节点指向新节点,给定节点的next指向新节点删除节点将需要删除节点的prev的next指向需要删除节点的next将需要删除节点的next的prev指

2022-07-08 09:04:54 368

原创 JavaScript链表---单向链表

链表是由一组节点组成的集合,每个节点都有一个对象的引用指向下一个节点。指向下一个节点的引用叫做链。data中保存数据,next保存下一个节点的引用。我们可以看到链表的尾元素指向null,表示结束。由于链表的头结点确定起来很麻烦,由此我们又引入了头结点,来表示链表的头部。首先我们定义一个Node类来表示节点。从图中可以看出,Node类中需要包含两个属性:我们再定义一个LinkedList类来提供操作链表的一些方法,LinkedList 中只有一个头节点属性。查看链表定义一个方法,打印出链表的值,遍历链表

2022-07-05 09:56:35 259

原创 力扣1.两数之和(JavaScript版本)

LeetCode1.两数之和详解

2022-06-27 10:38:04 491

原创 【面试宝典】修改this指向

写在前面CSDN话题挑战赛第1期活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f参赛话题:前端面试宝典话题描述:欢迎各位加入话题创作得小伙伴,如果我没有猜错得话,我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重,已经成为不可缺少的部分,前端技术也是层出不穷,各种技术类、技术框架也蜂拥而出,前端面试的难度也随之增加,如果我们拥有一套前端面试宝典。如果你是应聘者:你就可以从容的sol

2022-05-20 14:56:11 275

原创 nvm use 报错exit status 145乱码

重新安装nvm,1.1.9会报错,换成1.1.7版本nvm use不报错了,但是却不生效了,没有真正的切换版本,这时候去删掉nodejs文件(D:\Program Files\nodejs)

2022-05-10 17:07:27 2516 2

原创 typeScript类型基本使用

基本类型布尔值 boolean数字 number字符串 string数组元素类型后面接上 [] number[]使用数组泛型 Array<number>只读数组 ReadonlyArray<T>元组: [string, number]表示一个已知元素数量和类型的数组,各元素的类型不必相同枚举:enum类型是对JavaScript标准数据类型的一个补充。为提高性能在定义时可加上const相对于json的优点:

2022-04-06 14:52:03 230

原创 css设置圆角矩形根据高度变化

实现效果:实现方式给border-radius设置一个特别大的值border-radius: 99999999rem;

2022-03-29 08:26:03 425

原创 VUE利用transition标签实现摇一摇抽签效果

VUE利用transition标签监听animation动画执行完毕,触发之后的操作transition标签文档实现效果在线试一试

2022-03-20 15:41:01 1395

原创 实现一个简单的babel插件

babel的作用babel先将代码编译为AST抽象语法树,修改AST,生成转换后的代码生成AST抽象语法树npm包npm install babel-cli @babel/parser @babel/types @babel/traverse @babel/generatorbabel命令:babel-cli编译器:@babel/parsertransform:@babel/types 对AST进行增删改查@babel/traverse 对AST进行遍历generator

2022-02-23 08:40:10 810

原创 js通过正则表达式匹配url参数

function getUrlParam(name){ const reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)"); const r = window.location.search.substr(1).match(reg); let strValue = ""; if (r!=null){ strValue= unescape(r[2]); } return strValue;}

2022-02-08 11:26:18 1972

原创 JS修改this指向:call、apply和bind函数

call 函数语法obj.call(thisObj,arg[,arg2[,arg3[,...agr]]]);简介修改obj的this指向为thisObj,后面的参数会当成obj的参数安装顺序传递进去。我们先来看一下下面这段代码会输出什么:function say(arg1, arg2) { console.log(this.name, arg1, arg2);}const obj = { name: "tom", say: function () { console

2022-01-28 13:39:48 1292

原创 css实现骨架屏

css实现加载中展示骨架屏 线上试一试

2022-01-25 08:21:22 570

原创 canvas实现打字输入效果

实现效果在线试一试代码如下: const arr = ["H", "E", "L", "L", "O", "W", "O", "R", "L", "D"]; const c = document.getElementById("myCanvas"); const ctx = c.getContext("2d"); let index = 0; const draw = () => { if (index < arr.

2022-01-16 21:27:38 1529

原创 canvas状态的保存(save)和恢复(restore)

canvas的状态如何保存和恢复save():保存当前的绘图状态。restore():恢复之前保存的绘图状态。调用save方法将当前绘图状态保存到绘图堆栈中,每次调用restore方法从栈顶取出保存的状态。由于出栈的次数不能多于入栈的次数,故程序中restore方法调用的次数不应该比save方法多。save都可以保存什么?当前的坐标变换信息(比如旋转rotate()或平移setTransform())当前剪贴区域图形上下文对象(CanvasRenderingContext2D)的当前属

2022-01-12 09:08:02 11212 2

原创 回流与重绘

回流与重绘什么是回流与重绘浏览器优化减少回流重绘什么是回流与重绘重绘:对 DOM 操作简单修改样式(比如修改元素的 visibility、color、background-color 等)、却并未影响页面布局时,浏览器不需重新计算元素的位置尺寸等,直接为该元素绘制新的样式。这个过程叫做重绘。回流:对 DOM 操作导致 DOM 尺寸等属性的变化(比如修改元素的 width、height、top)时,浏览器需要重新计算元素的属性,然后再将计算的结果绘制出来,这个过程叫做回流。常见的导致回流的操作

2022-01-10 08:29:50 144

原创 canvas实现加载中

实现效果如下:在线试一试function loading2() { const canvas2 = document.getElementById("myCanvas2"); const ctx2 = canvas2.getContext("2d"); const w = canvas2.width; const h = canvas2.height; ctx2.fillStyle = "#000"; ctx

2022-01-08 21:45:58 554

原创 canvas实现简单进度条

canvas实现简单进度条效果如下:代码如下:在线试一试const c = document.getElementById("myCanvas");const ctx = c.getContext("2d");const deg = Math.PI / 180;let index = 0;fram();function fram() { index++; if (index <= 360) { requestAnim

2022-01-06 09:16:28 1217

原创 canvas渐变

canvas设置渐变的两种方式:createLinearGradient(x,y,x1,y1) : 创建线条渐变createRadialGradient(x,y,r,x1,y1,r1) : 创建一个径向/圆渐变在线试一试createLinearGradient(x,y,x1,y1)x:渐变开始点的 x 坐标y:渐变开始点的 y 坐标x1:渐变结束点的 x 坐标y1:渐变结束点的 y 坐标代码如下:const c = document.getElementById("myCanvas

2022-01-05 09:12:03 3581

原创 用canvas实现烟花效果

今天已经是2021年的最后一天了,马上就要是新的一年了,愿2022我们可以摘掉口罩。跨年怎么能没有烟花呢,下面请欣赏canvas带来的烟花秀: canvas实现烟花效果 在线试一试原文地址:https://www.cnblogs.com/visualiz/p/fireworks.html...

2021-12-31 09:06:51 1830

原创 CSS设置文本超出隐藏显示省略号

CSS设置文本超出隐藏显示省略号单行文本多行文本在线试一试单行文本HTML代码如下:<p class="ellipsis1" title="单行文本,超出隐藏,并且显示省略号。试一试我隐藏啦!!!!"> 单行文本,超出隐藏,并且显示省略号。试一试我隐藏啦!!!!</p>CSS代码如下:.ellipsis1 { width: 300px; white-space: nowrap; overflow: hi

2021-12-29 08:52:18 867

原创 CSS常用水平垂直居中的几种方法

CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录一、利用margin:auto元素有宽度和高度时,利用margin:auto设置元素水平垂直居中:HTML代码如下:<div class="div1"> <div class="center"></div></div>CSS代码如下:.div1 { background-color: #eee; width: 200px; hei

2021-12-28 09:01:33 27968

原创 CSS盒模型

CSS盒模型一、什么是CSS盒模型二、盒模型分类CSS设置盒模型一、什么是CSS盒模型盒模型也叫框模型,是包围每个HTML元素的框,它包括:外边距、边框、内边距以及实际的内容。二、盒模型分类W3C 盒子模型(标准盒模型)width=content的宽height = content的高IE 盒模型(怪异盒模型)width = content + padding + borderheight = content + padding + borderCSS设置盒模型可在线看一下实

2021-12-25 09:44:58 345

原创 Windows nvm 下载安装

nvm下载安装及使用

2021-12-23 12:41:15 1405

原创 Vue.js实现图片的随意拖动

主要代码如下:template> div id="test_3"> img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style"> div>template>script> export default{

2018-01-23 19:40:04 9302 5

原创 Vue.js学习总结思维导图(一)

Vue.js学习总结思维导图(一)

2018-01-23 19:21:34 1733

原创 Node.js自定义模块的两种方式

1.exports exports.name=null;exports.sex=null;exports.age=null;exports.searchScore=function () { console.log("查询了考试成绩")}2 .module.exports module.exports={ checkUsername:function (user

2018-01-22 20:15:30 817

原创 Node.js起一个Web服务器

let http=require("http");let server=http.createServer(function (request,response) { //request 请求,response 响应(返回给浏览器的数据) //编写响应头 response.writeHead(200,{"content-type":"text/html;charset=u

2018-01-22 20:07:48 379

原创 简单网页计算器代码

注:本人为初学者,欢迎各位大神指教 简单计算器实现效果: HTML代码counter.html 计算器

2017-11-13 15:42:29 16944 7

原创 CSS语法——编辑CSS

1.内联样式表(HTML源文件)优点:简洁方便 缺点:CSS代码仅在当前页面有效<head> <style> CSS代码 </style></head>2.内联样式表(定义在标签上)优点:简洁方便,优先级高于其他两种样式表 缺点:只对当前控件有效,不能被其他控件引用<h1 style="color:red">Hi</h1>3.外联样式表(CSS文件)优点:可以被

2017-10-26 13:54:22 273

原创 CSS概述

CSS是级联样式表,控制HTML显示效果。使用CSS的原因:HTML控件外观不优美。CSS的优点:方便自定义控件的显示效果; 多个页面和控件可以引用相同的CSS样式。CSS代码可以写在HTML里面,但还是建议写在CSS文件里,方便多次引用。

2017-10-25 21:58:59 462

原创 JAVA——类和对象

一、object 1.对象的特征——属性 属性——对象具有的各种特性 每个对象的每个属性都拥有特定值 2.对象的特征——方法 方法——对象执行的操作二、类和对象的区别 1.类是抽象的概念,仅仅是模板,比如说:“人” 2.对象是一个你能看得见摸得着的具体实体(对象是类中的一个实体),比如:“小布什”三、类命名规则

2017-10-25 13:55:12 212

原创 Java环境变量配置

1、右键此电脑点击属性 2、点击高级系统设置 3、点击环境变量 4、点击系统变量中的新建 变量名:JAVA_HOME 变量值:JDK的路径 5、找到系统变量中的Path变量 ,点击编辑 W8在后面加入(要写;与前面分开),W10点击新建 ;JDK的bin路径 6、最后点击确定,环境变量配置完成 7、在命令行窗口输入javac验证

2017-10-17 18:09:23 271

react封装canvas进度条组件,可自定义宽高、颜色、字体等样式

react封装canvas进度条组件,可自定义宽高、颜色、字体等样式

2022-01-11

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除