自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(121)
  • 资源 (4)
  • 收藏
  • 关注

原创 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图,ECharts立体柱状图属性

本文借助该链接做演示:链接地址1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图:2.ECharts实现立体柱状图、3D柱状图及属性①立体柱状图大概有三部分组成(主图、侧边图、顶部图)如图:②主要属性一(控制顶部图的偏移量、大小、高度等):如图:③主要属性二(控制主图的宽度、颜色、类型等):如图:④主要属性三(控制侧边图的宽度、颜色、类型等):如图:注意:以下操作是保证侧边的高度可以与顶部图相贴合如图:...

2021-04-14 16:39:40 33

原创 ECharts实现柱状图正负数显示在同一侧

想必大家工作中也有用到过ECharts,但是大部分的需求应该都是相对简单的展示,比如说使用柱状图时,当数值为正与负值时显示在两侧,如下这样(一左一右或一上一下):那么如果我想让他们无论正负均显示在同一侧呢?1、可参考如下简单示例:var data1 = [100, 200, 300, 400, 500, 600, 650]; // 真实值,用来控制柱状图的高低var data2 = [-100, 200, -300, 400, -500, 600, -650]; // 显示值,用来显示在柱.

2021-04-10 14:28:25 48

原创 JS格式化金钱(千分位加逗号、保留两位小数)

我们日常开发中经常会遇到比较大的数值,需要对其进行格式化,既方便了阅读又使页面更加的优雅。比如说 999999999,直接阅读很不直观,格式化后 999,999,999或者999,999,999.00第一种方式:我们可以使用正则来处理function formatPrice(price) { return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');}第二种方式:也可以不使用正则,进行优雅的处理function for.

2021-03-30 10:14:02 85

原创 【已解决】error: RPC failed; curl 28 OpenSSL SSL_read: Connection was reset, errno 10054 fatal: expected

有时候我们在GitHub上clone一些项目的时候,会出现error: RPC failed; curl 28 OpenSSL SSL_read: Connection was reset, errno 10054 fatal: expected flush after ref listing错误。此时执行git config --global http.sslVerify "false"然后再clone即可...

2021-03-16 17:03:15 1373 3

原创 【已解决】Error:Cannot find module ‘xxx\xxx\node_modules\npm\bin\npm-cli.js‘

以下报错,解决方案:打开node.js官网,根据报错的路径,重新下载安装到该路径即可

2021-03-05 15:27:51 1247

原创 摄像头视频画面接入,使用iframe标签嵌入到页面中(海康威视、萤石)

有的时候,我们需要获取到摄像头的实时监控视频,并且把画面嵌入到页面当中,此时,可以使用萤石平台实现我们的需求。1、进入到该平台,有一系列详细的步骤及参数介绍。例:url:监控地址,包含验证码、设备序列号、通道号、清晰度、播放类型autoplay:1-开启自动播放,未显示字段-关闭自动播放audio:1-开启音频,未显示字段-关闭音频accessToken:访问令牌,播放监控地址的必要参数live后缀:预览rec后缀:回放autoplay:1-开启自动播放,未.

2021-02-19 09:57:09 643 1

原创 使用HTML5的classList可以像jQuery一样去操作DOM节点的CSS类

① 在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。② 使用classList,我们还可以用它来判断某个节点是否被赋予了某个CSS类。③ Element.classList 是一个只读属性,返回一个元素的类属性的实时 DOMTokenList 集合。④ 相比将 element.className 作为以空格分隔的字符串来使用,classList 是一种更方便的访问元素的类列表的方法。新增CSS类使用add

2021-02-09 09:29:09 107

原创 vue选中或点击输入框,边框高亮;vue选中或点击元素,当前元素背景高亮

1、vue 选中或点击输入框,边框高亮①:输入框动态绑定一个class,例login-box-focus,如下::class="{ 'login-box-focus': loginBoxIsTrue }"②:输入框添加一个聚焦(focus)及失焦(blur)事件,如下:@focus="focusUserName()"@blur="blurUserName()"③:data给个默认参数及值,例如loginBoxIstrue,用来绑定到class,如下:data() { return {

2021-02-08 10:28:33 309

原创 Ant Design Vue下拉选择框增加可搜索功能(Ant Design Vue Select选择器)

Ant Design Vue下拉选择框增加可搜索功能打开Ant Design Vue官网,找到Select选择器(点击进入),见如下示例:其中:①:showSearch属性使框框变为可搜索;②:option-filter-prop="children"便是绑定下拉选项中的内容可被搜索(<a-select-option>)③:实现。期待与您一起探讨关于Ant Design Vue或VUE或原生JS等等前端技术哦~...

2021-02-05 10:11:02 852

原创 CSS3的动画及3D转换(animation、transform、rotate3d 、perspective等)【总结】

目录1. 动画① 创建② 属性③ 关键帧2. 3D① transform转换② rotate3d③ translate3d④ perspective⑤ transform-style1. 动画① 创建 @keyframes // 创建动画语法:@keyframes animationname {keyframes-selector {css-styles;}}keyframes-selector // 动画持续时间的百分比例:@keyframes myMove{ 0% {to

2020-07-01 20:26:20 2088 4

原创 一张脑图带你领略React的独特魅力

因为这张脑图,我成了别人眼中的巨佬!

2020-06-22 11:07:09 775 2

原创 移动端布局之—媒体查询及先响应式网站设计(总结)

媒体查询概念:可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式;使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成;媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式例:@media 设备类型 and (设备特征){ d

2020-06-11 19:50:50 2765 11

原创 前端开发者不得不知道的41个常用的网站,因为这41个网站我成了别人眼中的巨佬

只要点进来,你就已经成功了一半,非标题党,满满干货啊!

2020-05-13 10:59:01 14055 36

原创 vue项目中使用高德地图的api实现城市的定位

今天女朋友突发奇想,让我帮她做一个可以对所在城市进行自动定位的一个小功能。我二话没说,打开电脑就是一顿操作,操作记录如下(贼拉拉详细,无论小白还是大白,都可看得懂):使用Vue-CLI构建一个Vue项目。在src目录下的views目录里创建一个City.vue(名字自取)在src目录下的router目录下的index.js文件中增加如图所示内容(path值可自取,component值则要对应第2步创建的文件夹名)如下图:打开浏览器,搜索“高德api”,点击进入如未注册,点击右上

2020-05-10 19:55:39 7632 42

原创 MySQL的安装(超详细,附教程、安装包)

文末附所需安装包链接。如下为安装步骤:1、双击mysql-installer-community-5.7.12.0.msi,开始安装,直到遇到如下界面:2、点击Finish,进行MySQL配置:3、Developer Machine(开发测试类,mysql 占用很少资源)”、“Server Machine(服务器类型,mysql 占用较多资源)”、“Dedicated MySQL...

2020-05-10 10:09:00 18465 30

原创 浅谈:CSS3的渐变以及2D转换
原力计划

目录CSS3渐变线性渐变径向渐变重复线性渐变重复径向渐变CSS3的2D转换transformrotate() 方法skew() 方法scale() 方法translate() 方法CSS3过渡transitionpointer-eventsbackface-visibilityCSS3渐变CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现...

2020-05-07 21:22:15 4321 24

原创 CSS3选择器 | 每个前端开发者必须要掌握的技术
原力计划

目录属性选择符伪类选择符CSS3属性CSS3自适应属性选择符如果能够灵活运用属性选择器,目前为止需要依靠id或class名才能实现的样式 完全可以使用属性选择器来实现。E[att] {} : 选择具有att属性的E元素E[att="val"]{}: 选择具有att属性且属性值等于val的E元素E[att~="val"]{}:用于选取属性值中包含指定词汇的元素E[att|="val...

2020-05-06 19:20:29 6327 36

原创 使用Vuex、Vue路由、axios的经验汇总
原力计划

博客说明:文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!目录一、Vuex二、Vue路由三、axios一、Vuex安装npm i axios --save使用axios.get('/user?ID=12345') .then(function (response) { console.log(re...

2020-05-01 10:36:47 4886 50

原创 用html和css为女朋友做了个幸福摩天轮,她很开心,我很骄傲
原力计划

幸福摩天轮,够爱你就来

2020-04-27 21:46:06 12724 82

原创 女朋友生日,不要礼物,非要我给她讲解VUE的生命周期钩子函数,最后直夸我讲的详细又透彻!
原力计划

VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁四个模块。注:在组件的整个生命周期内,钩子函数都是可被自动调用的,且生命周期函数的执行顺序与书写的顺序无关目录*图示1.beforeCreate2*.created3.beforeMount4*.mounted5.beforeUpdate6*.updated7.bef...

2020-04-25 18:03:23 8610 88

原创 ES6数组方法find()、findIndex()的总结
原力计划

本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下:①JavaScript 内置对象之-Array②ES5新增数组方法(例:map()、indexOf()、filter()等)③ES6新增字符串扩张方法includes()、startsWith()、endsWith()1. find()该方法主要应用于查找第一个符合条件的数组元素,即...

2020-04-22 13:21:19 10497 57

原创 使用Vue-CLI创建Vue项目

在看本文之前,请确保电脑上已经装了node,关于node的安装和使用可参考node的安装与使用专栏1 . 利用Vue-CLI初始化构建Vue项目时,我们将会获得一个初始的文件夹结构,如下所示:2 . 安装Vue-CLInpm install -g @vue/cli或yarn global add @vue/cli例:3 . 使用vue --version或vue -V指令,查...

2020-04-21 21:45:33 5722 28

原创 周末休息,用原生JS和CSS给女朋友做了个弹弹球小游戏,她沉迷其中、无法自拔

上次帮一个粉丝写了这个纯HTML加CSS实现3D立体动态相册,女朋友看到了,说我就没有给她写过这些小玩意,哄她开心。蛤,听了这话我就很难过。我对她说,等着,马上为你量身定做一个去,你爱玩游戏,整好今天周末给你做个小小的游戏,让你耍一耍~哈哈哈哈,我太机智了。效果如下:css部分代码:<style> #main{ width: 600px; ...

2020-04-19 21:04:24 15157 73

原创 不光教女朋友学会了Yarn,还让她明白了Yarn与npm的区别
原力计划

在进行正文之前,首先提供Yarn的三大网址,祝你练成Yarn功大法:Yarn官网、中文官网、Yarn Github地址在安装Yarn之前,我们要确保已经成功安装了Node.js,关于Node.js的安装,可参考:Node.js的安装Yarn的特点Yarn的中文官网是这样介绍的:速度超快:Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用...

2020-04-17 21:16:23 9722 58

原创 当面试官问你关于Node.js的开发框架Express时,你怎么回答 ?(文末附Postman插件链接)
原力计划

前言:       在前些日子,也就是今年的 2 月至 4 月,一个由 ECMA 成员名义发起,阿里巴巴、腾讯等公司领衔的Node.js 开发者 2020 年度报告结果出炉。       调查结果显示越年轻的使用者越愿意在 SSR 场景中使用 Node....

2020-04-15 21:37:49 11253 71

原创 教零基础女朋友学MongoDB:MongoDB的下载、安装、配置、使用;18岁以下单身男慎入!(Windows)
原力计划

前言:        温馨提示:该“前言”部分单身男性慎看,如有女朋友,则可忽略此温馨提示。不过话又说回来,对于我们这行来说,找个女朋友,应该不是问题!        众所周知,昨天周日,忙了一周了也该出去放松一下了,约上另一半压个马...

2020-04-13 22:14:21 8299 61

原创 解决:无法加载文件 C:\Program Files\.. 因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com /fwlink。及Express的简单安装

有时我们在运行PowerShell脚本的时候,会突然遇到这个问题:无法加载文件 C:\Program Files\nodejs\node_global\express.ps1, 因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com /fwlink/?LinkID=135170 中的 about_Execution_Policies。 +Category...

2020-04-10 17:34:57 11247 67

原创 浅析嵌入式 JS 模板引擎之EJS

EJS是一套既简单又高效的嵌入式 JS模板语言,可以帮我们利用普通的 JS 代码生成 HTML 页面。其历史悠久,曾一度得到些许大佬的青睐,现在虽然没有vue、react这些项目流行,但其还是有一定的使用场合和学习价值的。EJS后缀名为"ejs"EJS 支持我们把JS代码直接写在标签内EJS 能够缓存 JS函数的中间代码,使执行速度得到极大的提升EJS 调错极其简单:因为它所有错误都是...

2020-04-09 20:55:44 8216 36

原创 不懂JS的实用工具库Lodash,怎么敢说自己会JS ?
原力计划

Lodash是一个可以提高开发者效率、提高原生JS方法性能的 JavaScript 第三方实用工具库;Lodash特点就是一致性、模块化、高性能。业界赫赫有名,其不需要引入其他第三方依赖,我们在使用的过程中可以直接调用Lodash帮我们封装好的方法;(其模块化特别适用于:创建符合功能的函数、遍历 array(数组)、object (对象)和 string(字符串)等)Lodash使用了一个...

2020-04-07 21:25:44 7659 48

原创 纯HTML加CSS实现3D立体动态相册【超简单、附源码】

近日,收到一男粉丝私信,具体如下:PS:在跟他聊天过程中,我不该笑的,哪个男同胞没有这么让人心疼的一刻呢。所以,在此祝愿他能早日哄好他的女朋友,加油,奥利给~~~于是,在他的万般焦急等待下,为他量身定做的动态相册出炉了,鉴于时间紧任务重,实现的功能比较单一,但是他已经很满足了,我也很欣慰!先来看一下效果:具体代码如下:<!DOCTYPE html><html&gt...

2020-04-05 13:47:28 16338 97

原创 常用的JS数组去重方法大全
原力计划

写在前面:我们要想使用数组去重,那就必须对数组有一定的了解,关于JS数组的一些方法以及使用,可参考:①JavaScript 内置对象之-Array②ES5新增数组方法③浅谈JavaScript中ES6新增的Set和Map结构以及Array.from方法下面进入正题:利用JS的数组实现去重的目的       &n...

2020-04-04 13:43:45 8542 59

原创 手把手教学妹安装TortoiseGit(小乌龟)与GitHub的关联使用【图文并茂,超详细】
原力计划

写在前面:最近有些粉丝看了我这篇文章【git安装与使用】,对我说:git命令和操作好难啊。我说:没事,熟能生巧,你多用就好了,常用的也没有多少哦。他:不嘛不嘛,人家就不用嘛~我:以上内容纯属虚构,如有雷同,纯属巧合。真实场景如下所示:大家注意,我要开始了!git的客户端工具有很多,比如:TortoiseGit、GitHub for Desktop、SourceTree等…...

2020-04-02 11:34:09 6674 65

原创 解决:Another git process seems to be running in this repository, e.g. an editor opened by 'git commit'

相信有时候大家在操作Git的过程中会突然显示:Another git process seems to be running in this repository, e.g.an editor opened by 'git commit'. Please make sure all processesare terminated then try again. If it still fai...

2020-03-27 18:24:00 5881 46

原创 浅谈node环境下的Sass以及gulp工具下的Sass
原力计划

目录一、Sass简介二、Sass的解析器1. node环境下的Sass解析器2. gulp工具下的Sass解析器三、Sass语法1. 注释2. 变量3.嵌套4.导入@import5.混合器6.@if 判断7.循环8.继承一、Sass简介我们都知道虽然可以用CSS开发网页样式,但是没法用它编程。所以,在程序员眼里,写CSS显得很麻烦。因为它没有变量,也没有条件语句,只是一行行单纯的描述,写起...

2020-03-25 20:27:00 8081 62

原创 浅谈gulp的使用、gulp的常用插件、gulp基本操作以及gulp的常用项目流程操作
原力计划

写在前面:因为gulp是一个基于node的工具,所以我们需要先安装node,具体可见【node的安装及配置】目录一、gulp简介二、gulp基本使用1. 创建项目2. gulp的安装3. gulp配置文件4. 定义指令三、gulp常用插件四、gulp常用项目流程操作及部分插件使用方法一、gulp简介gulp 是一个基于node的自动化打包构建工具,前端开发者可以使用它来处理常见任务:...

2020-03-24 20:30:14 7470 31

原创 面试官竟然问我JavaScript中var、let和const有什么区别这样简单的问题?
原力计划

这几天逛CSDN论坛,发现在一些前端模块发的问题大都是因为var、let和const搞不清楚导致的,今天我来浅析下,希望对看到这篇博客的童鞋有所帮助~What we know is that…(英语作文万能开头) :在JavaScript中有三种声明变量的方式:var、let、const。目录1.var2. let3. const1.var(1)var定义的变量在之后可以修改,如果不初始...

2020-03-23 20:57:01 10890 42

原创 解决:'ping' 不是内部或外部命令,也不是可运行的程序 或批处理文件。【实用】

在【我的电脑】右键 > 【属性】 > 【高级系统设置】 > 【环境变量】 > 【系统变量】 > 【path】 > 【编辑】 > 添加:C:\Windows\System32 > 【确定】...

2020-03-23 14:01:45 5130 17

原创 Windows下CMD常用命令符的基本操作(包括Linux常用指令)【科普贴】
原力计划

目录1. 打开CMD窗口2. 命令(1)切换盘符(2)切换目录(cd)(3)清除当前屏幕显示(csl)(4)查看文件(dir)(5)`删除文件(rm-rf*)`(6)查看网络是否通畅(ping)(7)查看网络链接状态(netstat)(8)查看当前电脑的IP信息(ipconfig)(9)查看当前电脑信息(systeminfo)(10)创建文件夹(md)(11)移除文件夹(rd)(12)复制文件夹...

2020-03-23 13:50:17 13936 24

原创 跟面试官扯了半小时的CSS的flex弹性布局,都在这里了。【看完你会更加透彻】
原力计划

目录1. CSS3怪异盒模型2. flex基本概念3. 弹性布局属性4. CSS3多列5. 响应式1. CSS3怪异盒模型在说flex布局之前,再来回顾一下CSS3的怪异盒模型。(1)标准盒模型的总大小=width/height+padding+border+margin;怪异盒模型的总大小=width/height+margin.(2)box-sizing属性:可以给box-si...

2020-03-22 20:45:49 9888 27

原创 npm install express -g或npm install express报错之解决方案

小朋友,你是否也有好多问号??不要慌,问题不大在键盘上按下win + x ,选择命令提示符(管理员)这样就好啦:注意啦,注意啦:在win8或者win10下,win+R不是以管理员身份来运行的。在开始菜单中选择CMD窗口以管理员身份运行即可。...

2020-03-22 17:24:14 5537 22

TeamViewer.zip

TeamViewer是一款极其好用的远程控屏软件。操作简单,使用免费,安装即可使用,只需要给对方提供用户名和随机生成的密码即可连接。

2020-04-19

jquery文档.zip

jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

2020-04-19

Navicat8_For_MySql的一些用法汇总.docx

Navicat8_For_MySql的一些用法汇总,使用简单,方便操作。主要包含使用navicat8实现创建数据库和导入数据,以及使用 Navicat 8 给 MySQL 写存储过程的几点注意。

2020-04-19

tomcat8.5.zip

Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选。

2020-04-19

空空如也

空空如也

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

TA关注的人 TA的粉丝

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