- 博客(53)
- 收藏
- 关注
RSS订阅翻译 WebRTC运行依赖协议
ICE协议交互式连接设施Interactive Connectivity Establishment (ICE) 是一个允许你的浏览器和对端浏览器建立连接的协议框架。在实际的网络当中，有很多原因能导致简单的从A端到B端直连不能如愿完成。这需要绕过阻止建立连接的防火墙，给你的设备分配一个唯一可见的地址（通常情况下我们的大部分设备没有一个固定的公网地址），如果路由器不允许主机直连，还得通过一台服务...
2020-04-17 16:10:03
423
1
原创 使用Promise封装ajax
基于原生js封装ajax（回调函数） const $ = { //get请求 get:function(url,fn){ let xhr = new XMLHttpRequest(); xhr.open('get',url,true); xhr.onreadystatechange=function(){ if(xhr.readyState===4&&...
2019-12-11 00:33:43
1865
原创 Promise用法和理解（Node篇）
解决问题：回调地狱（callback hell）引用很经典的一张图，可以看出回调地狱带来的不友好的书写方式
2019-12-09 13:04:43
954
原创 css属性sticky（粘性定位）固定导航
sticky（粘性定位）解释：粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。设置该属性的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。使用sticky实现固定导航头部在以前，我们实现的主要思路就是使用js监听页面滚动事件，然后判断导航距离顶部的距离，为其动态添加position:fixed属性，这样写起来相对麻烦，并且实现的效果也不...
2019-11-23 21:06:18
14698
原创 微信小程序如何使用字体图标
在小程序中该如何使用字体图标？以下Font Awesome为例1、第一步：我们需要进入Font Awesome官网下载字体图标的文件2、第二步：我们需要用到一个Transfonter生成工具。打开刚才下载的文件，在fonts文件夹找到fontawesome-webfont.ttf打开Transfonter官网，将fontawesome-webfont.ttf上传，选择base64编码，然...
2019-04-25 15:11:02
2253
原创 Git解决分支冲突
有时候合并分支并非一帆风顺，那么出现冲突怎么解决呢？首先我们创建一个新的分支test$ git checkout -b testSwitched to a new branch 'test'在test分支下新建一个文件index.txt，并输入一些内容#新建一个index.txt文件$ cd .>index.txt#编辑内容为hello vue$ vim index.tx...
2019-04-18 23:18:51
1120
原创 Git创建与合并分支
前言：之前我们都是在master主分支上操作的，其实Git是可以创建多个分支的，那么多个分支又该如何操作呢？创建分支git checkout -b 自定义分支名$ git checkout -b devSwitched to a new branch 'dev'#-b表示创建并切换到当前分支创建完成，查看当前分支git branch$ git branch* dev ma...
2019-04-17 22:58:26
144
原创 Git远程仓库基本配置
当我们在本地创建了Git仓库，我们如何和github仓库远程同步呢？1、首先需要在github中创建一个仓库1.1、填写仓库信息2、完成创建后就可以将本地的git仓库和github上的仓库关联了#注意：这里的地址要改成自己的地址$ git add remote origin git@github.com:SimpleZGJ/Vue-demo.git#查看当前关联的远程主机地址$...
2019-04-17 00:14:58
12571
原创 Git管理修改
为什么Git比其他版本控制系统设计得优秀？因为Git跟踪并管理的是修改，而非文件修改：比如新增了一行、删除了一行、更改了某些字符，这些都是一个修改为什么说Git跟踪管理的是修改？这时候，可以做个实验证明，例如修改某一文件（下述test.txt）内容然后将修改后的test.txt文件添加到暂存区Simple@Simple MINGW64 ~/Desktop/gitdir (mas...
2019-04-15 19:20:16
160
原创 Git工作区和暂存区
什么是工作区：就是我们平常可以看到的目录版本库（Repository）：在创建git仓库之后，此时文件夹下会自动生成一个.git目录，这个就是版本库，但不是工作区暂存区：版本库中会生成很多东西，其中最重要的就是称为stage（或者叫index）的暂存区，还有Git为我们自动创建的第一个分支master，以及指向master的一个指针叫HEAD例如：我们对已有的文件进行更改Simple@...
2019-04-15 00:26:20
309
原创 Vue过渡动画
在Vue中提供了多种过度动画效果在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js在Vue项目中，我们可以使用Vue封装的transition组件，这样就可以为任意元素和组件添加过度和动画先...
2019-04-08 22:24:54
717
原创 Git版本回退
查看当前仓库的状态$ git status例如：下述代码表示，当前文件被修改过，但是还没提交C:\Users\Simple\Desktop\gitdir>git statusOn branch masterChanges not staged for commit: (use "git add <file>..." to update what will be c...
2019-04-07 21:43:21
211
原创 Vue常用指令
vue声明式渲染：采用模板语法来声明式的将数据渲染进Dom<div id="app"> <h1>{{msg}}<h1></div>new Vue({ el:"#app", data:{ msg:"hello Vue", }});//渲染结果会将h1中的文本渲染成hello Vue指令：v-bind指令（简写为“:”）：用...
2019-04-03 23:13:01
1880
原创 ajax本地模拟跨域
本地模拟跨域编辑本地hosts文件(C:\Windows\System32\drivers\etc\hosts)可以新增两个域映射到本机地址127.0.0.1例如：127.0.0.1 a.test.com127.0.0.1 b.test.com测试跨域请求function crossAjax(){ let url="http://a.test.com:63342/模拟跨域/...
2019-04-03 00:29:31
2462
原创 Vue起步创建一个实例
1、script中直接引入引入之后vue会被注册为一个全局变量注：建议在开发时不要使用压缩版本，这样会没有错误的提示2、使用NPM安装$ npm install vue//简写为$ npm i vue
2019-04-01 23:01:24
759
原创 less深入
将属性作为变量使用.test{ color:#000; background-color:$color;}//编译后.test{ color:#000; background-color:#000;}//与变量一样，less在选择属性时，会将最后一个作为“最终”值.test{ color:#000; .inner{ background-color:$color;...
2019-04-01 00:32:49
166
原创 Git入门之创建版本库
首先什么是版本库呢？版本库又名仓库，英文名repository，相当于就是一个目录，这个目录里面的所有文件都可以被Git管理起来，每个文件的修改、删除，Git都能跟踪，以便任何时刻都可以追踪历史，或者在将来某个时刻可以再还原。开始创建版本库第一步：我们可以随意选择（创建）一个目录//创建一个目录（文件夹）$ mkdir test//切换到当前工作目录下$ cd test第二...
2019-03-29 23:44:05
178
原创 Git入门
什么是Git?Git是目前世界上最先进的分布式版本控制系统版本控制系统又分分布式和集中式集中式：版本库是集中存放在中央服务器的，集中式版本控制系统最大的毛病就是必须联网才能工作。分布式：分布式版本控制系统没有“中央服务器”，每个人的电脑上都是一个完整的版本库，这样工作的时候，就不需要联网了。和集中式版本控制系统相比，分布式版本控制系统的安全性要高很多。因为每个人电脑里都有完整的版本库，如...
2019-03-28 23:21:05
116
原创 使用canvas绘制随机验证码
理论基础：掌握使用canvas绘制线条和圆形以及绘制文字实现思路：先构建一个画布，设置一定的宽高（在canvas中设置和在style中设置是有区别的，建议直接在canvas标签中设置），封装一个生成随机数的方法，为线条和圆形的绘制设置随机的位置，既然是随机的，必然是有随机的区间，先获取画布的宽高，线条和圆的位置就是（0~画布的宽高区间）的随机位置，再定义一个随机字符，获取随机的索引值，即可...
2019-03-27 23:11:30
732
翻译 如何优化网站提升访问速度
前言：网站访问速度的重要性：网站的访问速度直接关乎网站的用户体验，对于一般的用户而言，如果网页打开响应时间过长，大部分用户都会选择离开，响应速度过慢甚至关乎一个网站的建设的成败！那么我们该怎么样来提升网站的访问速度呢？
2019-03-25 22:12:39
1160
原创 移动web开发之rem布局
理论基础：什么是rem?（fontsize of the root elelment）说白了就是字体单位，是指相对于根元素的字体大小的单位。rem的优点：相对于流式布局、响应式布局等布局方式，rem更为灵活，可以根据根不同屏幕尺寸上的根元素来等比例适配。rem的基准值（根元素的字体大小）而网页的根元素就是html,所以我们只需要改变html的字体大小，就可以改变rem的基准值。既然re...
2019-03-24 22:07:31
208
原创 快速入门less
什么是less?Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。更少可以运行在Node或浏览器端安装：安装Less的最简单方法是通过npm，node.js包管理器$ npm install -g less命令行用法：//命令行调用编译器$ lessc styles.less//输出编译的CSS$ lessc s...
2019-03-18 20:58:39
164
原创 Bootstrap之滚动监听
首先需要对监听的组件添加相对定位一般我们监听的都是body，所以直接给body一个相对定位 body { position: relative;}给监听的组件添加 position: relative; 之后，通过 js代码启动滚动监听插件$('body').scrollspy({ target: '链接标签的id/类名' })实例：
2019-03-14 23:04:24
3135
原创 Flex 布局语法
理论基础：什么是Flex 布局？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。使用时需要将指定的容器添加display:flexFlex 布局常用属性：
2019-03-13 22:30:50
94
原创 移动web之响应式设计
理论基础：适配问题：屏幕尺寸不一样解决方案：百分比，自适应布局，叫做流式布局，同时还需要对移动端的viewport视口进行设置才能达到目的流式布局的特点：非固定像素，内容向两侧填充视觉窗口：viewport是移动端特有的，看成是一个虚拟的区域，用来承载网页，其关系：浏览器承载viewport,而viewport承载网页适配方案的要求：1、网页的宽度必须与浏览器保持一致2、默认显示的...
2019-03-11 19:34:38
205
原创 使用canvas绘制时钟
理论基础：掌握canvas绘制圆形，以及绘制扇形的弧度计算（涉及三角函数），掌握canvas的动画基础和绘制图片》了解更多<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&
2019-03-10 23:17:17
343
原创 使用canvas绘制饼状图
理论基础：绘制饼状图之前，需要对操作canvas的方法有一定的了解绘制的过程中还会涉及到数学中的弧度计算和三角函数…分析：1、确定从圆心伸出去的线=半径+伸出去的距离(自定义)2、对边 即y轴方向的长度=斜边* sin(角度)3、临边 即x轴方向的长度=斜边 * cos(角度)4、伸出去点的横纵坐标x=原点横坐标+(半径+超出饼状图的长度)*cos(角度)y=远点纵坐标+(半径...
2019-03-07 21:29:03
6141
原创 关于html5本地储存
首先，什么是 HTML 本地存储？本地存储（LocalStorage），web 应用程序可以将用户在浏览器中输入的数据进行本地储存。html本地存储：优于cookies在h5出来之前，数据只能储存在cookie中，本地储存相较于cookie更加安全，并且本地存储限制要大得多（至少5MB）&gt; 关于html5的本地储存对象：window.localStorage 存储永久数据win...
2019-03-06 21:44:50
1702
原创 仿QQ TIM官网视差滚动效果
理论基础：实现视差滚动，主要需要用到一个视差滚动的插件stellar.js，其次就是常规的布局，stellar.js是基于jq的插件，所以我们在使用之前需要提前导入jq文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g
2019-03-04 22:26:10
1074
1
原创 重写HTML5视频播放器界面
理论基础：熟知对HTML5视频的各种事件方法以及属性…关于事件方法和属性没有太多可说的，关于字体图标库可以参考font-awesome，下面直接贴代码…
2019-03-03 21:18:31
4130
2
原创 css3关于animate动画的使用
关于animate动画语法：animate：动画名称 花费时间 运动曲线 等待时间 播放次数(无限播放) 是否反向播放animation-name 规定需要绑定到选择器的 keyframe 名称。。animation-duration 规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function 规定动画的速度曲线。animation-delay 规定在...
2019-02-28 21:04:56
2695
转载 关于跨域的解决方案
跨域的理论基础：首先清楚什么是跨域？跨域是指一个域下的文档或者脚本加载或者请求另一个域的资源，包括脚本请求，资源加载，链接跳转…我们通常所谓的跨域问题是指浏览器由于同源策略所造成的不能请求到另一个域下的数据或者资源…如何解决跨域问题？在后台设置响应头，允许跨域header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问–>允许所有的语言...
2019-02-27 22:04:42
161
原创 ajax入门基础
理论基础：什么是ajax?ajax是用来做数据交互使用的原理：通过XmlHttpRequest对象来向服务器发送异步请求的，从而从服务器中获得数据，然后用js来操作Dom来更新页面（简单来说：用于后台与服务器交换数据，这就能实现可以在不重新加载整个网页的情况下，对网页的部分进行更新）ajax核心：就是js对象XmlHttpRequest特点：异步加载，局部刷新异步：一次一推，前...
2019-02-25 21:43:47
102
原创 jquery封装简易手风琴插件
理论基础：基于jquery封装插件，首先我们要清楚封装的代码应该写在哪里？毫无疑问，写在原型中...写入原型的好处：数据共享，节省空间那么既然知道是写在原型中，那怎么将封装的代码写入原型呢？首先再jq文件中找到如下代码
2019-02-21 21:50:34
255
原创 jquery模拟直播弹幕效果
理论知识：实现效果主要涉及jq对节点的操作，以及动画函数的使用…思路：获取到评论文本框的值，对文本内容进行处理动态创建一条弹幕，将创建的弹幕动态的添加到需要显示的页面，并同时创建一条新的评论消息，动态添加到评论列表利用数组将每次添加的弹幕保存起来，使用定时器让所有的弹幕循环动态的展示出来大体上的思路就是这样，下面直接贴代码
2019-02-19 22:47:50
785
原创 jquery的入门
为什么要学jquery？原生js不好的地方，例如：1、代码冗余2、需要遍历，很麻烦3、兼容性问题（最头疼的）4、添加动画很麻烦5、事件会被覆盖…那么使用jq有哪些优点？1、方便快捷，简单粗暴2、不需要遍历：具有“隐式迭代”的特点，自动的遍历3、操作动画简单4、没有兼容性问题5、事件不会覆盖…那么学js干嘛？jq源于js，原生js是一切库/框架的理论基础，只有熟练的...
2019-02-18 19:23:13
133
原创 js高级之正则表达式
理论基础：正则表达式：也叫规则表达式，按照一定的规则组成一个表达式作用：匹配字符串的组成：由元字符或者限定组成的一个式子常用元字符：
2019-01-23 13:12:32
207
原创 js高级之闭包
首先，我们要清楚什么是闭包？闭包的概念：函数a中有一个函数b,而这个函数b可以访问函数a的变量，此时就形成的闭包即 闭包就是能够读取其他函数的内部的变量闭包就是函数内部和函数外部链接起来的桥梁 function f1(){ var num=100; function f2() { console.log(num); ...
2019-01-22 13:04:46
252
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人