自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

lichen

yp的忠实爱好者

  • 博客(79)
  • 资源 (1)
  • 收藏
  • 关注

原创 Electron打包的的优秀开源音乐项目

今天来介绍一个基于Electron的开源软件(音乐分享类型的)有很丰富的的壁纸而且这个软件还做了音乐推荐还有试听列表还有工具栏

2020-12-02 17:41:07 9795 70

原创 JavaScript高级编程-原型,原型链详解(附有图解)

首先要明白JavaScript是一种基于原型的面向对象语言。接下来先明白几个基本的概念。function 对象(函数)的原型是Function; function 函数是 Function的子对象,function函数是当前function函数原型的构造方法/构造函数;new一个对象的时候,new的是被实例化对象的原型(property),后面的小括号是自动调用构造方法;Function 是 Object 的子对象,JS中顶级对象是Object;JS没有原生对象Window,Win.

2020-12-02 15:15:24 254 26

原创 flex布局框架(必须掌握)

学习了这么多天的css,我们势必要有一个清晰的目标,就是熟练地掌握网页基本布局,其中flex是一个很好用的布局方式,就拿layui来说,他们的这种布局方式就很实用,广泛地应用在后台网页布局。其中分为header头部main内容部分,内容部分又分为左边的侧边栏和右边的内容区,左边和右边的都有滚动条在自己的内容区滚动。footer底部声明栏(有的会有,有的没有)大致的样子可以用这样的图片来概括:做出来的效果图(网页布局)是这样式的:布局思路是这样的:1 首先给header和footer一个固定

2020-11-28 11:00:32 400 21

原创 前端炫酷的动画效果库--AOS使用详解

导入<link rel="stylesheet" href="dist/aos.css" /><script src="js/jquery.min.js"></script><script src="dist/aos.js"></script>HTML<div aos="animation_name">属性aos-offset 是立刻触发动画还是在指定时间之后触发动画 200 120aos-duration 动画.

2021-01-07 09:39:00 82 1

原创 U盘的工作原理(读取和存储数据)

U盘设计“USB闪存盘”(以下简称“U盘”)是基于USB接口、以闪存芯片为存储介质的无需驱动器的新一代存储设备。U盘的出现是移动存储技术领域的一大突破,其体积小巧,特别适合随身携带,可以随时随地、轻松交换资料数据,是理想的移动办公及数据存储交换产品。U盘的结构基本上由五部分组成USB端口、主控芯片、FLASH(闪存)芯片、PCB底板、外壳封装。U盘的基本工作原理USB端口负责连接电脑,是数据输入或输出的通道;主控芯片负责各部件的协调管理和下达各项动作指令,并使计算机将U盘识别为“可移动磁盘”.

2021-01-04 17:40:14 110

原创 前后端分离和不分离到底有什么区别

前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这个过程是系统架构从小白到入门的必经之路。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。在互联网架构中的web服务器:一般指像nginx,apache这类的服务器,他.

2021-01-04 13:56:05 225 1

原创 云计算、集群通信、和分布式系统的关系

云计算云计算(cloud computing)是分布式计算的一种,指的是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序,然后,通过多部服务器组成的系统进行处理和分析这些小程序得到结果并返回给用户。云计算早期,简单地说,就是简单的分布式计算,解决任务分发,并进行计算结果的合并。因而,云计算又称为网格计算。通过这项技术,可以在很短的时间内(几秒钟)完成对数以万计的数据的处理,从而达到强大的网络服务。现阶段所说的云服务已经不单单是一种分布式计算,而是分布式计算、效用计算、负载均衡、并行计算、网络存.

2021-01-04 13:26:41 91

原创 无聊的小知识--数据中心为啥要建在山区

数据中心是什么:数据中心是全球协作的特定设备网络,用来在因特网络基础设施上传递、加速、展示、计算、存储数据信息。数据中心大部分电子元件都是由低直流电源驱动运行的。数据中心的产生致使人们的认识从定量、结构的世界进入到不确定和非结构的世界中,它将和交通、网络通讯一样逐渐成为现代社会基础设施的一部分,进而对很多产业都产生了积极影响。不过数据中心的发展不能仅凭经验,还要真正的结合实践,促使数据中心发挥真正的价值作用,促使社会的快速变革。数据中心能多耗电:作为互联网的物理基础,数据中心一直是个相对神秘的话题.

2021-01-04 13:10:33 1046 2

原创 PaaS、IaaS 、SaaS、Bass、Fass、无服务的理解与区别

云计算(cloud computing)关于云计算的定义有多种说法,现阶段广为接受的是美国国家标准与技术研究院(NIST)定义:云计算是一种按使用量付费的模式,这种模式提供可用的、便捷的、按需的网络访问, 进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这些资源能够被快速提供,只需投入很少的管理工作,或与服务供应商进行很少的交互。从技术上看,大数据与云计算的关系就像一枚硬币的正反面一样密不可分。大数据必然无法用单台的计算机进行处理,必须采用分布式计算架构。它的特色在于对海量数据.

2021-01-04 12:56:55 1969 4

原创 原生AJAX实现登录功能

function Interface() { var xmlhttp; if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //.

2021-01-03 16:07:29 102

原创 硬盘的种类、区别、运行原理

硬盘的种类可分为:1、固态硬盘(SSD),采用闪存颗粒来储存;2、机械硬盘(HDD),采用磁性碟片来储存;3、混合硬盘(HHD),是把磁性硬盘和闪存集成到一起的一种硬盘。硬盘是电脑主要的储存媒介之一,由一个或者多个铝制或者玻璃制的碟片组成。碟片外覆盖有铁磁性材料。硬盘有机械硬盘(HDD)和固态硬盘(SSD)之分。机械硬盘即是传统普通硬盘,主要由:盘片,磁头,盘片转轴及控制电机,磁头控制器,数据转换器,接口,缓存等几个部分组成。机械硬盘:磁头可沿盘片的半径方向运动,加上盘片每分钟几千转的高速旋.

2020-12-27 22:35:20 118 1

原创 装箱拆箱--java的自动装箱和拆箱

一、什么是自动装箱拆箱很简单,下面两句代码就可以看到装箱和拆箱过程1 //自动装箱2 Integer total = 99;3 4 //自动拆箱5 int totalprim = total;简单一点说,装箱就是自动将基本数据类型转换为包装器类型;拆箱就是自动将包装器类型转换为基本数据类型下面我们来看看需要装箱拆箱的类型有哪些:这个过程是自动执行的,那么我们需要看看它的执行过程:复制代码1 public class Main {2 public static voi.

2020-12-27 21:59:01 29

原创 IntelliJ IDEA多光标操作的快捷键

按住alt+shift,然后用鼠标左键点击文本,可以让光标在多个位置出现选中多个矩形按住 Ctrl+Shift+Alt,用鼠标选则多行文本,可以每处选择都是整齐的矩形。按一下 Alt+Shift+Insert,可以切换成矩形选择状态。与ctrl+alt+shift不同的是,Alt+Shift+Insert切换的矩形选择状态,可以选空白的地方。...

2020-12-27 19:28:13 75

原创 高内聚,低耦合的实现方式

高内聚低耦合,是软件工程中的概念,是判断软件设计好坏的标准,主要用于程序的面向对象的设计,主要看类的内聚性是否高,耦合度是否低。目的是使程序模块的可重用性、移植性大大增强。通常程序结构中各模块的内聚程度越高,模块间的耦合程度就越低。内聚是从功能角度来度量模块内的联系,一个好的内聚模块应当恰好做一件事,它描述的是模块内的功能联系;耦合是软件结构中各模块之间相互连接的一种度量,耦合强弱取决于模块间接口的复杂程度、进入或访问一个模块的点以及通过接口的数据。...

2020-12-27 14:51:52 117 3

原创 textarea取消右下角的两道斜线和聚焦显示的线框(input也一样)

我们先来看看一开始不取消的样子:我们可以加入下面的的css属性取消默认的样式: resize: none;/* 取消默认的右下角的两道斜线 */ outline: none;/* 取消默认聚焦的蓝色线框 */加入之后就是这个鬼样子:PS:不加入resize: none,我们可以拖动改变文本框的大小:...

2020-12-25 13:15:26 89 4

转载 图片怎么存储到数据库里

我们存储图片到数据库里一般有两种方式将图片保存的路径存储到数据库(文件路径或者ftp路径)将图片以二进制数据流的形式直接写入数据库字段中(base64)FTP:FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机,它们依照FTP协议提供服务。 FTP是File Transfer Protocol(文件传输协议)。顾名思义,就是专门用来传输文件的协议。简单地说,支持FTP协议的服务器就是FTP服务器。关于图片或者文件在数据库.

2020-12-24 12:07:26 110 5

原创 JavaScript中的类数组(arguments)

今天来看看js中的arguments(类数组)我们可以先看一个例子:定义⼀个函数,传⼊两个及以上参数且均为数字类型时返回其和,否则抛出异常提示“参数⽆效”题解如下:<script> function sum() { var count = arguments.length; if (count >= 2) { var total = 0; for (v.

2020-12-20 17:04:53 68

转载 XSS及CSRF攻击防御

一、概念:XSS攻击全称跨站脚本攻击(Cross Site Scripting);CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF;二、XSS什么是 XSS ?XSS (Cross Site Scripting),即跨站脚本攻击,是一种常见于 Web 应用中的计算机安全漏洞。恶意攻击者往 Web 页面里嵌入恶意的客户端脚本,当用户浏览此网页时,脚本就会在用户的.

2020-12-20 13:54:04 109

原创 IP协议--如何通过ip地址找到你

IP 地址是什么IP地址(Internet Protocol Address)是指互联网协议地址,又译为网际协议地址IP地址是IP协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物理地址的差异IP 地址(Internet Protocol address, IP address) 在 TCP/IP 协议栈中,起着至关重要的作用。IP 地址 不仅能唯一标识与之关联的主机,还能够指出该主机在网络中的位置,以方便我们在网络中找到该主机IP协议IP协议.

2020-12-17 23:19:31 238

原创 mac修改用户头像时显示照片图库未找到图片

我们重装系统,导入时间机器的备份后,会有两个照片图库。或者不小心把原来的照片图库删了,之后再重新创建照片图库。这两种情况在修改用户头像的时候(包括修改苹果ID账号的头像)都会发现找不到默认的照片图库路径了,就会在照片选项中显示未找到这张是能找到的,找不到的话就是显示图片未找到!我们可以打开照片图库,找到偏好设置点击下图中“用作系统照片图库”,再次修改头像的时候,照片就会显示出来,我们就可以用自己的照片作为头像了!...

2020-12-17 18:54:36 343 5

原创 web前端的无聊小知识--预加载和懒加载

预加载是指在页面加载完成之前,提前将所需资源下载,之后使用的时候从缓存中调用;懒加载是延迟加载,按照一定的条件或者需求等到满足条件的时候再加载对应的资源预加载增加了服务器压力,换来的是用户体验的提升,典型例子是在一个图片较多的网页中,如果使用了预加载就可以避免网页加载出来是时,图片的位置一片空白(图片可能还没加载出来),造成不好的用户体验;懒加载的作用减少不要的请求,缓解了服务器压力懒加载的原理原理:原理很简单,先把img的src指向空或者一个小图片,图片真实的地址存储在img一个自定义的属性里,&l

2020-12-17 13:03:19 61 2

原创 http无聊的小知识

HTTP 简介HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)HTTP三点注意事项:HTTP是无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。HTTP是媒体独立的:这意味着,.

2020-12-16 20:18:48 62 5

原创 mac调整启动台应用程序图标排列(几行几列)

今天来聊一个关于mac的话题,windows用户可以止步了!我们在使用mac时会发现启动台里面的应用程序只能拉动排列,或者文件夹分类,没有其他的设置和修改图标排列方式,今天来看看如何修改启动台app图标的排列方式(修改为几行几列)其实大家找了一圈配置后会发现,启动台在电脑上是没有相关设置的,那么我们怎样才能修改呢,我们原始的图标排列是横7个应用,竖5个应用、这时候我们需要用到电脑的后台操作程序-终端(terminal)首先打开终端(terminal)并输入:defaults write com..

2020-12-16 16:40:53 192 2

原创 JS事件委托详解

今天来讲js中的事件委托!!!事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown、mousedown、mouseup、keyup、keypress)的函数委托到另一个元素;会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。那么为什要用事件委托呢在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性.

2020-12-16 11:27:11 71 3

原创 JS中DOM对象的属性及方法

今天整理了JavaScript Dom中的属性方法什么的

2020-12-12 13:50:09 66 6

原创 JS特效四:拖拽效果(显示实时的坐标!)

今天来讲一个很常用的拖拽功能,主要是利用一点css,js和jquery,很简单但同时也很重要,掌握好才是最关键的!下面来看下效果图:这里可以看到,在鼠标hover的时候会有一个透明度的变化和一个盒子阴影!并且在右下角会实时的显示出小方块移动时横纵坐标的变化!可以看到有一个盒子阴影在鼠标单击按住的时候会变红,然后可以拖动小块随意移动我们在看代码之前可以先了解下jquery中的基本知识(选择器,css控制器什么的)和offset()和clientX,clientY。思路很简单,就是分别监听鼠标.

2020-12-09 20:53:05 383 5

原创 CSS的动画特效(animation)

今天来讲一下css中很实用的一个效果-动画(animation)。动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数(很官方的回答)。为了方便大家和我自己理解这个概念,我们可以想像一下准备拍电影的时候,我们需要一个电影名吧,需要设置电影的时间吧。而且拍电影就是一帧一帧,叫做关键帧。所以我们设置动画的时候要讲清楚电影名(animation-name),电影时长(animation-duration),电影啥时候开始(animation-delay),播放或者暂停(a.

2020-12-09 19:22:25 383 4

原创 CSS3的过渡效果

今天来讲的是很重要的一个CSS属性-过渡(transition),有了这个属性,你的页面将会变得特别美观,用户体验感极强,来让我们看看怎么使用!首先来看看过渡究竟是什么CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:规定您希望把效果添加到哪个 CSS 属性上规定效果的时长其次来看看有哪些属性可以使用:transition 复合属性,用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的 CSS 属性的名称tra.

2020-12-09 14:28:17 101 3

原创 JS特效三:波纹小球(绝对炫酷!)

今天来讲一个JS的特效,主要用到的是定时器和选择器,也算是一个比较基础的但同时也是效果很炫的一个特效。老规矩,先来看看效果!样式效果1.这是一开始的时候2.鼠标点击一个小球3.随着时间慢慢变化4.像波纹一样的传播5.后续的小球会慢慢变小视频还没过审核,过了我会发在评论区。设计思路1.首先是先用js生成一个15行15列的div矩阵,并添加到父级container中,然后设置小div的margin: 8px;和border-radius: 50%;,让这些小的div呈现为圆形,并且.

2020-12-09 11:23:10 889 10

原创 CSS3 转换、文本阴影

突然发现以前的CSS特效用到了很多转换过渡什么的,今天集中来讲一下!喜欢CSS特效的可以点这里CSS 2D转换转换是使元素改变形状、尺寸和位置的一种效果。您可以使用 2D 转换来转换您的元素。通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,有以下这些属性:translate() 方法通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数transform: translate(50px,100px).

2020-12-08 11:49:08 2153 13

原创 细说JS中的深拷贝与浅拷贝

1.js中的深拷贝与浅拷贝2.js中的数据类型3.内存中的栈堆的概念理解

2020-12-06 15:17:25 930 8

原创 JS特效三:LightBox(轮播图+图片弹窗)

今天的特效是一个很常用的图片查看。结合了轮播图和图片弹窗,所以这两个没有理解的,还是先去看看。然后再来理解这个哦!首先我们看下效果:首先是查看图片的初始网页(注意图片hover的时候有阴影)这是点进去图片进入的图片查看,然后还有轮播图效果!最后就是按钮的hover效果其中要说明的就是上一张和下一张的这个属性:user-select: none;这个是防止用户在复制的时候复制走这个符号!然后就是js代码比之前两个多一点,不过认真理解还是很简单的,希望大家多思考,多练习。详细的.

2020-12-06 00:22:05 175 7

原创 TCP/IP 和 TCP/IP的 三/四次握手

什么是TCP/IP首先来说,TCP/IP协议是浏览器与服务器链接因特网的协议。浏览器使用TCP/IP协议进入服务器,服务器使用TCP/IP协议来发送HTML文件到浏览器。TCP/IP的作用TCP/IP(Transmission Control Protocol / Internet Protocol)是一个让已连接因特网的计算机进行互相通信的协议。这个协议控制的不仅仅是计算机接入因特网,也有其他电子设备,以及他们之间如何传输数据。TCP/IP的三次握手目的:为了对每次发送的数据量进行跟踪与协.

2020-12-05 16:33:39 2346 8

原创 从字符编码的角度来谈谈为什么联通干不过移动

MySql中utf-8和utf-8mb4的区别字符集和字符编码的关系字符集编码的历程

2020-12-05 12:32:41 186 12

原创 JavaScript中BOM、DOM、Document的爱恨情仇

老规矩,先来美图一张!然后来说说今天的主要对象,JavaScript,哦,这个不能叫对象,严格意义上来说,它是**基于原型的面向对象语言**!那么JavaScript是由什么组成呢?JavaScript的实现包括以下3个部分,根据宿主(浏览器)的不同,具体的表现形式也不尽相同。1、核心(ECMAScript):描述了JS的语法和基本对象。2、文档对象模型 (DOM):处理网页内容的方法和接口。DOM 是 W3C 的标准; [所有浏览器公共遵守的标准]。DOM 是为了操作文档出现的 API,doc.

2020-12-03 20:18:28 448 11

原创 JS特效二:图片弹窗

今天来看一个商品后台页面设计时常用的js效果,图片弹窗。就是在鼠标点击小图片的时候,会以一个弹窗的形式放大图片,方便我们查看细节,而且还有很多动效在里面。我们先来看看效果图:这是鼠标在图片外,就是一张小图,加了一点圆角当鼠标移到图片上的时候就会有阴影效果和透明度变化点击小图片就是这样的了,可以查看大图设计思路也很简单,就是先写出来基本的html和css布局,这里说下&times是一个叉号。然后js里面设置两个点击事件,每个点击事件通过方法改变一些元素的css样式。代码里的.

2020-12-03 13:13:38 2597 23

原创 CSS特效十:信息提示框

今天来讲一个信息提示框,可以在上下左右四个方向展示,先给大家看看效果图(文末有彩蛋!!!):其中的重点就是一个尖角的展示:我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志,箭头是由边框组成的,但组合起来后提示工具像个语音信息框。在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。注意:border-width 属性指定了箭头的大小。如果你修改它,也要修改 margin-left 值。这样箭.

2020-12-02 21:05:40 546 13

原创 CSS特效九:小图下拉查看大图和信息

今天来讲一个淘宝京东等商城里面经常用到的小图hover查看大图和信息的css特效,先来看图片展示:如果可以的话,还可以设置阴影和延迟特效啥的,想看的话可以看之前的几个css特效案例!设计思路也很简单,就是先隐藏下面的大图,然后小图hover的时候显示就好了!详细的注解也在源码里有。附上源码:<!DOCTYPE html><html><head> <title>下拉图片</title> <meta char.

2020-12-02 20:33:32 568 20

原创 VScode使用小技巧-如何快速选择一样的元素

我们在使用VScode编辑器的时候,会经常遇到要同时改好多个一样的单词的情况,一个一个的去改,不是要改到猴年马月吗?所以今天来说说如何方便快捷的处理这种情况!这是几种使用多光标的方法:1.上述图中一个一个选择的情况下可以使用command + Dmac本或者windows电脑的control + D2.像这种不均匀分布的情况下,可以按住 alt 键,然后鼠标点击每个想要选中的元素。3.像这种选择一列的情况下,可以按shift+alt,再使用鼠标拖动,也可以出现竖直的列光标,同时可以选中多列。

2020-12-02 20:09:06 283 21

原创 CSS特效八:开关按钮

今天来讲下css中的开关按钮这个特效,在实际开发和平常的网页中都很常见。大家先来看看实现的效果:这是开关按钮全部选中的时候这是开关按钮全部关闭的时候,其中切换的时候会有一些动画特效。实现的原理步骤如下:1.先设置一个label包裹一个checkbox元素和一个子div,其中checkbox设置为不显示2.子代div有一个before元素:这里要注意下!3.虽然checkbox不显示,但是当点击的时候还是会有属性改变,因此我们可以利用这个属性改变设置一些值。详细的步骤都在源码里,源码有.

2020-12-02 19:35:04 1611 28

ACE前端模板-一个UI框架,很方便

一个很实用的UI框架,基于BootStrap,使用方法很简单,下载好源码之后,一边打开浏览器查看样式,一边打开编译器查看代码,看到合适的,喜欢用的组件之后,直接复制源码就可以了,样式可以自己设置。

2020-11-30

空空如也

空空如也

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

TA关注的人 TA的粉丝

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