自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

 我的博客

记录一些有关前端的技术。

  • 博客(70)
  • 收藏
  • 关注

原创 JavaScript 粘贴事件、拷贝事件、获取拷贝的内容、将文本复制到剪贴板

JavaScript 粘贴事件、拷贝事件、获取拷贝的内容、将文本复制到剪贴板

2023-05-04 11:50:34 1899

原创 命令行创建一个vue项目

命令行创建一个vue项目

2023-02-17 14:07:33 277

原创 JavaScript 简单判断 移动端、PC端

JavaScript 简单判断 移动端、PC端

2023-02-16 11:32:05 198

转载 JS判断当前设备类型:手机/平板/电脑

JS判断当前设备类型:手机/平板/电脑

2023-02-16 11:24:45 666

原创 npm publish 、 npm adduser 提示 403 的问题

npm publish 、 npm adduser 提示 403 的问题

2023-02-15 17:55:53 726

原创 6位验证码输入框(vue)

6位验证码输入框(vue)

2023-02-15 12:02:03 233

原创 一个前端的常用方法的工具库,包含CSS的、JavaScript的……

一个前端的常用方法的工具库,包含CSS的、JavaScript的……

2022-06-06 12:25:25 103

转载 ES9 命名捕获组

ES9引入了命名捕获组,允许为每一个组匹配指定一个名字,既便于阅读代码,又便于引用。

2022-05-06 17:48:18 340

原创 获取最近的(一个或多个)周几

比如拿到今天往后 最近的 5个 周二(不包括今天)weekday 是周几,参数范围是 0 - 6,0 代表周日num 是个数startDay 是开始计算的时间,是时间戳方法及例子如下:function getDays(weekday, num, startDay, lastResult) { // 判断 if ([0, 1, 2, 3, 4, 5, 6].indexOf(weekday) === -1) { return 'weekday 错误' } i..

2022-04-08 15:36:30 196 2

原创 使用正则表达式 匹配 HTML 标签内的内容

使用正则表达式 匹配 HTML 标签内的内容正则表达式如下/(?<=((<.*?){0,}>))([\s\S]+)(?=(([\s]{0,1}<\/.*?>){1}))/g测试例子:var regexp = /(?<=((<.*?){0,}>))([\s\S]+)(?=(([\s]{0,1}<\/.*?>){1}))/g// 简短的 htmlvar str1 = `<div>hello</div>

2022-04-07 19:15:08 5855

原创 【工具】根据 swagger 生成 axios 请求配置文件 / api

根据后端提供的 swagger 生成配置文件(JavaScript 文件)【简单的说,就是生成 api 目录】github 地址在这里:github.com/littleHiuma…用法假设后端提供的 swagger 地址是 http:255.255.255.255:3000/swagger-ui.html ,只需要取前面部分就可以了(ip 加端口:http:255.255.255.255:3000)一个 ip 的情况下: node generateIt.js --ip=http:255

2021-11-02 10:53:06 642

原创 Chrome 控制台切换成黑暗模式

按F12打开控制台方式1:点击,然后选择 Run command输入 dark theme方式2:windows按 ctrl + shift + p,mac按command + shift + p然后输入dark theme

2021-10-15 18:33:00 729

原创 Chrome 浏览器开启黑暗模式

方式1:在地址栏输入chrome://flags/注意:这是实验性功能的页面搜索Force Dark Mode for Web Contents然后将 Default 改成 Enabled 即可如图方式2:修改属性,在chrome浏览器图标 点击右键 - 【属性】 - 选择【快捷方式】在【目标】栏原本内容的最后空一格后输入【--force-dark-mode】,最后按下确认即可。但是标签栏、地址栏和书签栏等还是白色的,这就需要下载黑暗主题.

2021-10-15 17:29:01 604

原创 homebrew-core 更新失败 / clone失败 / fetch失败 的解决办法

先删除再下载cd /usr/local/Homebrew/Library/Taps/homebrewrm -rf homebrew-core执行以下命令就可以下载成功了(更换为国内镜像源)git clone git://mirrors.ustc.edu.cn/homebrew-core.git/ /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core然后把 brew 和 homebrew-core 的镜像地址也设为国内镜

2021-10-12 17:18:20 643

原创 MAC 多个JDK / JAVA环境的安装和配置

1. 查看本地安装的 JDK 所在位置,以及JAVA版本查看本地安装的 JDK 所在位置 命令:/usr/libexec/java_home -V会返回(所有的)JDK 的版本以及所在位置,一般都会在 /Library/Java/JavaVirtualMachines/ 目录下查看本地 JAVA 版本 命令:java -version2. 安装通过 Oracle 官网下载的 dmg 文件安装,或者通过 homebrew 安装安装完成可以打开 /Li...

2021-10-12 16:58:06 830

原创 React -- router的使用

基本路由的使用:import React from 'react'import { BrowserRouter as Router, // 浏览器路由,要放在应用程序的最外层组件中 Route, // 设置/匹配路由规则 Link, // 设置链接 Switch} from 'react-router-dom'// 组件function Home() { return <h2>Home</h2>}function About() { re

2021-04-02 18:52:32 176

原创 React -- context用法

关键API:React.createContext()创建context后,可以拿到Provider和Consumer,那么就可以提供数据和消费数据了// userContext.jsimport React, { Component } from 'react'const userContext = React.createContext('default value') // 提供默认值const UserProvider = userContext.Providerconst Us.

2021-04-02 17:49:08 200

原创 React -- ref的用法

需求:点击按钮让input文本获取焦点input文本框以及让文本框获取焦点的方法定义在input组件中在App组件中引入input组件,按钮定义在App组件中Input.js// Input.jsclass Input extends Component { constructor() { super() this.inputRef = React.createRef() this.focusInput = this.focusInput.bind(th.

2021-04-02 16:47:09 141

原创 RGB颜色值与十六进制颜色码转换(在线)

RGB颜色值与十六进制颜色码转换工具:https://littlehiuman.github.io/19-ColorValueChange/可以根据RGB颜色值转换成十六进制颜色码,也可以根据十六进制颜色码转换成RGB颜色值页面UI比较粗糙,但是能实现想要的功能。...

2021-03-31 08:29:39 1146

原创 vue-router的使用:定义路由、路由跳转、监听路由

分为:1. 定义路由2. 在组件内路由跳转3. 监听路由的两种方式定义路由包括:普通的路由定义、name的定义、路径参数的定义、嵌套路由、路由重定向、匹配所有的路由// 0. 首先要调用 Vue.use(VueRouter)// 1. 定义组件// 可以从其他文件 import 进来const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar.

2021-01-04 15:01:56 982

原创 JavaScript实现vue-router的路由跳转

vue-router有两种模式:history模式和hash模式。路由跳转路由跳转的方式有三种:go()、push()、replace()go()在两个模式下,使用的都是window.location.go()来实现的push和replace在两个模式下,实现有点不同。 push() replace() history模式 浏览器支持history.pushState的话,通过history.pushState()来实现; 否则,通过wind..

2020-12-31 14:51:40 487 1

原创 项目中地址跳转有误问题 / a标签跳转 / window.open() / location.href

当跳转的地址不是以http或者https开头的话,跳转的地址会拼接后面或者替换当前路由,导致跳转错误,比如:1.拼接在后面当前地址是:https://www.baidu.com/跳转的地址是:baidu.com得到的地址是:https://www.baidu.com/baidu.com2.替换当前路由当前地址是:file:///C:/Users/Administrator/Desktop/test.html跳转的地址是:baidu.com得到的地址是:file:///C:/U

2020-12-31 11:06:25 1018

原创 常见问题 / 遇到的问题的解决办法

GitHub中PR(Pull request)操作https://www.cnblogs.com/momo798/p/11599679.htmlaxios封装(二)队列管理https://www.cnblogs.com/small-coder/p/9133375.html

2020-12-30 16:06:02 89

原创 JavaScript获取css的值

1. 拿到元素的内联样式:elem.style.xxx2. 拿到元素的位置信息:getComputedStyle(elem)3. 拿到元素的计算样式:elem.getBoundingClientRect()

2020-12-25 11:42:34 117

原创 JavaScript判断变量的类型(判断基本类型、判断引用类型)

通过typeof来判断typeof undefined // undefined typeof 1 // number typeof '1' // string typeof true // boolean typeof function() {} // function // 以下类型需要别的方式判断typeof null // object typeof {} // object typeof [] // object通过instanceof来判断{} instance

2020-12-23 14:56:15 122

原创 用JS创建10个<a>标签,点击的时候弹出来对应的序号

利用闭包的方式for (var i = 0; i < 10; i++) { var aObj = document.createElement('a') aObj.innerText = 'a标签' + i aObj.onclick = (function (i) { return function () { alert(i) } })(i) document.body.appendChild(aObj)}利用块级作用域的方式for (

2020-12-23 14:37:52 699

原创 【工具】根据 swagger 生成 axios 请求配置文件 / api

根据后端提供的swagger生成配置文件(JavaScript文件)【简单的说,就是生成api目录】github地址在这里:github.com/littleHiuma…用法假设后端提供的swagger地址是http:255.255.255.255:3000/swagger-ui.html ,只需要取前面部分就可以了(ip加端口)一个ip的情况下:node generateIt.js --ip=http:255.255.255.255:3000多个ip的情况下(使用,来分割):nod..

2020-12-15 17:07:02 1289 2

原创 JavaScript 正则表达式 零宽断言

介绍:零宽断言的意思是(匹配宽度为零,满足一定的条件/断言)零宽断言用于查找在某些内容(但并不包括这些内容)之前或之后的东西,也就是说它们像\b,^,$那样用于指定一个位置,这个位置应该满足一定的条件(即断言)。分类:零宽断言分为两类:1. 正向零宽断言2. 负向零宽断言零宽断言分为四种:1. 正向零宽先行断言:x(?=y),表示:x 被 y 跟随时匹配 x2. 正向零宽后发断言:(?<=y)x,表示:x 跟随 y 的情况下匹配 x3. 负向零...

2020-12-15 17:06:47 846

原创 Mac定制终端:iTerm2 + zsh + powerline

原始界面:配置后的界面:安装iTerm2可以直接去官网下载:https://www.iterm2.com/下载后直接安装即可安装主题所有主题:https://iterm2colorschemes.com/我使用的是吸血鬼主题,具体下载方式,去官网:https://draculatheme.com/找到iTerm点进去以后会教你如何操作有git的话,就clone项目下来,如果没有用gi...

2020-12-15 17:06:36 758 6

原创 JavaScript中数组去重、对象去重的方法

ES6提供了新的数据结构:Set 和 Map,在写去重代码时方便了很多人,可以用更少的代码去实现去重。这两者都是构造函数,需要通过new去生成。这两者的区别就是:Set类似于数组,Map类似于对象数组去重const array = [1, 2, 3, 4, 5, 5, 5, 5]const set = new Set(array)const result = [...set] // Array.from(set)// 简写const result = [...new..

2020-12-15 17:05:42 172

原创 css 清除浮动的五个办法

在子元素都设置了浮动后,父元素会失去高度。而且会影响下面的元素,这时候就需要清除浮动:这时候就需要清除浮动:1. 在这些子元素的最后加一个元素来清除浮动2. 通过父类的伪元素:after来清除浮动3.给接下来的第一个元素增加 clear:both; 样式(即不希望受到影响的元素)4. 父元素增加overflow属性:overflow: auto;对于超出父元素范围的内容,父元素会进行调整,它的高度就会变得正常。5.父元素增加height属...

2020-12-15 17:03:55 68

原创 JavaScript+CSS+HTML 编写手风琴效果

效果图:可以通过https://littlehiuman.github.io/03-Accordion/查看效果。https://github.com/littleHiuman/littleHiuman.github.io求点star~~~代码如下:* { margin: 0; padding: 0;}.container { position: relative; width: 520px; height: 400px; overfl...

2020-12-15 17:03:17 243

原创 JavaScript 基本类型的类型转换

这里主要讲的是将其他的数据类型转换成Number、String、Boolean类型,欢迎补充~!转换成Number类型1. Number()函数,如:vara = "123"; a= Number(a);  1.1 如果是纯数字的字符串,则直接将其转换为数字;如果字符串中有非数字的内容,则转换为NaN;如果字符串是一个空串或者是一个全是空格的字符串,则转换为0  1.2 true转换为1,false转换为0  1.3 null转换为0;undefined转...

2020-12-15 17:02:45 91

原创 JavaScript 获取随机整数

Math.random()方法会返回介于 0(包含) ~ 1(不包含) 之间的一个随机数假如想要拿到0-10之间的数,只需要将该方法的值*10 即Math.random()*10;假如想要拿到0-20之间的数,同理,只需要将该方法的值*20 即Math.random()*20;那么,想要拿到0-n之间的数,n是整十倍的数,即Math.random()*n。想要拿到1-11之间的数呢?就是在0-10的基础上,加上1 即Math.random()*10+1;即 想要拿到m-n...

2020-12-15 17:01:19 7445

原创 HTML+CSS+JS(+Vue)写一个通讯录组件

求各位大大的Star(*/ω\*)。没有录屏,所以上传的是图片。后面已补充录屏效果。效果:(主要是参考小米Note3的通讯录的效果做的)主要功能:1. 滚动后,通讯录的模块标题会固定在顶部(图2)2. 下一个标题很接近时,将上一个标题推上去的效果(过程:图3、图4、图5)实现:1. 模块标题会固定在顶部:这个实现比较简单,监听滚动的距离,如果大于0(相对的0)就显示固定的标题。2. 推上去的效果:实际上是修改固定的标题的top值,导致的视觉错觉。当下一个标题距离顶部.

2020-12-15 17:00:30 722

原创 构造函数、原型对象prototype、实例、隐式原型__proto__的理解

(欢迎一起探讨,如果有什么地方写的不准确或是不正确也欢迎大家指出来~)PS:建议将构造函数中的方法都定义到构造函数的原型中,那么由该构造函数创建的实例的方法都会指向同一个方法。(在构造函数内部声明的话,每创建一个实例都会重新实例化函数,那么每个实例中的函数的指向是不同的;如果定义在全局作用域中,且有很多方法,这样毫无封装性可言。)一、属性和方法构造函数可以定义三种属性和方法:对象属性/对象方法:构造函数内定义的属性/方法静态属性/静态方法:构造函数的静态属性/方法原型属性/原型方法

2020-12-15 16:59:39 1040

原创 布局:上方菜单栏+下方内容

[size=small][color=blue][b]常见的菜单栏+内容界面。欢迎指点。效果图:[img]https://github.com/littleHiuman/littleHiuman.github.io/blob/master/show01.png?raw=true[/img]可以戳这里看效果[url]https://littlehiuman.github.io/m...

2017-03-10 09:35:02 310

原创 canvas写的地铁地图

根据的是百度提供的坐标,canvas的坐标是大的坐标在后面,所以跟实际生活方向相反。所以canvas里的北方在下方,实际生活中北方在上方。因为根据的是真实坐标,所以跟广州地铁提供的地图不一样。左侧地图一种写法,右侧地图另一种写法。左侧可以下拉菜单选择线路查看路线,还可以查询站名属于哪个路线;右侧是全地图。

2017-03-06 21:06:41 1407

原创 使用Webpack搭建Vue项目

[size=small][color=red][b]前提:1. 借助Node.js环境里的npm来安装,2. 设置好npm镜像,[/b][/color][/size][size=small][b][color=blue](比如淘宝的npm镜像:输入[quote]npm install -g cnpm –registry=https://registry.npm.taobao...

2017-02-15 18:53:42 145

原创 javascript 实现购物车页面

跟商城有关系的网站,难免会有购物车的结账界面。我用javascript实现了增加数量/减少数量,实时计算总金额,删除该商品,选中商品/反选商品/全选/全反选...的操作。欢迎指点!~

2017-02-06 18:46:48 4343 4

空空如也

空空如也

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

TA关注的人

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