zh_rey-优快云博客

原创 Mac更换Brew国内中科大镜像源

// 替换brew.git:cd "$(brew --repo)"git remote set-url origin https://mirrors.ustc.edu.cn/brew.git// 替换homebrew-core.git:cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git// 替

2021-01-08 14:20:54 2242 1

原创 MySQL常用方法（判断筛选）

MySQL常用方法查询逗号分隔的字符串包含某个字符串FIND_IN_SET(id, str)判断两个逗号分隔的字符串是否有合集str1 regexp replace(str2, ',', '|')

2020-10-16 14:25:46 658 1

原创 Vue二次封装组件，并传递props和v-on事件

有的时候我们全局引用UI框架（类似于ElementUI）的时候，有些简单的组件我们想进行二次封装，并确保能传递所需的props和事件，这时候就需要用到vue实例上的两个属性:$props和$listeners,最后全局注册组件覆盖掉原始的就好了。<template> <el-inputs v-model="currentValue" v-bind="$props" v-on="$listeners"></el-inputs></template>&l

2020-06-13 17:17:55 4402

原创 Linux 常用命令

查看服务器当前开放端口netstat -aptn

2019-12-12 13:33:52 227

原创 Mac Terminal (终端) 使用ssh快速登录远程服务器

平常我们使用终端连接远程服务器的时候每次都要输入IP （换成服务器的IP地址和用户名）ssh user@127.0.0.1 -p 22然后还要输入密码，有的时候记不住还要去找一下密码，很麻烦。接下来介绍一下使用公钥来链接远程服务器，避免每次输入IP和密码创建rsa key首先查看本地有没有公钥和私钥ls .ssh有的话会有 id_rsa id_rsa.pub 这两个文件夹...

2019-11-20 10:51:16 6725 4

原创常用功能JS收藏（提升代码逼格）

获取URL的查询参数let query = {};location.search.replace(/([^?&=]+)=([^&]+)/g, (_,k,v) => query[k]=v);生成随机字符串// 生成长度为11的随机字母数字字符串Math.random().toString(36).substring(2);过去或未来几天的时间集合// 创建过去...

2019-07-16 11:52:31 234

原创通过css3的filter滤镜改变png图片的颜色

本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影，然后将原始图片隐藏起来，从而达到改变图片颜色的目的先看效果图接下来是代码<p><strong>原始图标</strong></p><i class="icon icon-del"></i><p&gt...

2019-07-04 14:35:58 4546

原创 Vue打包后放到服务器出现Loading chunk {n} failed 错误的解决办法

这个报错的主要原因是因为vue通过webpack打包生成多个模块js文件，我们把build后的文件上传到服务器，这时是第一次上传，我们访问时不会出现该报错。但是正常的项目都会需要更新迭代，当我们再次打包后某些js文件就会改变，再上传到服务器后，由于浏览器缓存问题，用户在访问的时候还会再访问之前的js文件，这是就会出现Loading chunk {n} failed这种报错。哪怕我们解决浏览器的缓...

2019-03-31 22:25:08 14910 18

原创 node安装及默认prefix（全局）和cache（缓存）文件夹地址修改（windows）

node安装及默认prefix（全局）和cache（缓存）文件夹地址修改（windows）官网上下载node最新版本 https://nodejs.org/en/本示例按照默认的安装地址来讲（可根据实际情况修改安装地址）C:\Program Files\nodejs默认安装npm及添加环境变量但是npm的默认全局模块的下载地址是 C:\Users\Administrator\AppData...

2018-10-16 10:36:46 14451

原创 Google跟踪代码管理器跟踪页面点击行为(GTM)

Google跟踪代码管理器跟踪页面点击行为首先前往后台创建账号容器后台地址入口创建完成之后将拿到的追踪代码添加到网站中前往Google Analytics后台创建账号后台地址入口之后拿到跟踪ID 如：UA-123456789-1在跟踪代码管理器中新建代码其他更多设置、高级设置根据自己需求进行设置，我这里直接默认不填了添加代码触发条件，创建触发器然后...

2018-08-28 15:53:58 12288 6

原创 node版本管理工具nvm安装（Windows）

node版本管理工具nvm安装（Windows）一、用nvm-noinstall.zip安装nvm_noinstall.zip下载 https://github.com/coreybutler/nvm-windows/releases把nvm_noinstall.zip解压到本地磁盘（例如：C:\nvm）右键以管理员的身份运行install.cmd . 直接回车,C盘...

2018-08-18 17:42:33 658

原创基于jQuery的自定义Video视频播放组件（兼容IE6~8）

demo下载链接之前用过video.js插件写过视频组件，但是自己一般仅仅是播放个视频，里面有好多功能用不到，改着不太方便，于是就自己用jQuery封装了一个插件，控制器之类的样式是可以自定义的，支持中英文切换，废话不多说，下面上图。高版本浏览器video样式注：如果遇到进度条不能拖动的情况，不是兼容性问题，是webkit内核的浏览器在本地播放视频设置video播放时间(video...

2018-06-26 11:46:19 4459 2

原创随页面滚动定位的侧边栏div悬浮框js插件

由于平常写网站的时候经常遇到有一个侧边栏悬浮框，需要伴随网页的滚动让其一直处于窗口的可见区域，于是就写了一个基于jQuery的通用的小插件方便以后开发。如果项目不适用jQuery，可以下载源码将里面jQuery方法替换成原生js就好了点击下载scrollFixed源码具体效果如下图所示本插件充分考虑了实际开发当中的各种需求，其中主要包括：1、页面自适应2、避免公共固定头部和尾部的影响3、当主体区域...

2018-04-28 17:20:12 5242

原创 VK第三方登录（JavaScript SDK）

利用 JavaScript SDK 部署网页版“VK登录” 官方文档1、首先到我的应用页面创建新应用2、在设置里编辑相关URL3、在网站上加载VK<button type="button" id="login">登录</button><script type="text/javascript" src="//vk.com/js/api/openapi.js?1.

2018-02-27 14:19:20 25412

转载 2017年度最佳 JavaScript 和 CSS 开源库推荐！

Tutorialzine 每个月都会公布一次当月新增的 JS 和 CSS 库。2018 新年之际，该网站整理出了 2017 年最受用户欢迎和喜爱的一些 JS 和 CSS 库，供大家学习和参考。JavaScript 本地存储库 localForage传送门：https://www.oschina.net/p/localforagelocalForage 是一个 JavaScript 库，提升了应用程...

2018-02-24 14:24:22 5892

转载 JavaScript有用的代码片段和trick

浮点数取整const x = 123.4545;x >> 0; // 123~~x; // 123x | 0; // 123Math.floor(x); // 123注意：前三种方法只适用于32个位整数，对于负数的处理上和Math.floor是不同的。Math.floor(-12.53); // -13-12.53 | 0; // -12生成6位数字验证码// 方法一('0...

2018-02-23 13:43:22 351

原创 shake.js监测手机摇一摇

下面是shake.js代码(function(global, factory) { if (typeof define === 'function' && define.amd) { define(function() { return factory(global, global.document); }); } els

2018-01-24 20:48:43 4599 6

原创 Google第三方登录（JavaScript SDK）

网页使用google账号实现第三方登录详细Demo下载本demo示例利用JavaScript SDK实现了Facebook、google、LinkedIn第三方登录，可以获取用户的基本信息，并且同时包括官方登录按钮和自定义登录按钮代码示例。1、创建Google API控制台项目和客户端ID首先前往Google API 控制台选择或者创建一个项目选择...

2018-01-09 16:55:12 20039 23

原创 Facebook第三方登录（JavaScript SDK）

利用 JavaScript SDK 部署网页版“Facebook 登录” 官方文档详细demo下载本demo示例利用JavaScript SDK实现了Facebook、google、LinkedIn第三方登录，可以获取用户的基本信息，并且同时包括官方登录按钮和自定义登录按钮代码示例。1.选择您的应用设置在应用面板中选择您的应用。然后选择是否允许

2018-01-09 14:59:48 23818 5

转载 JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）

这里是javascript中制作滚动代码的常用属性页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;window.innerHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.off

2018-01-04 08:59:33 181704 9

原创 LinkedIn第三方登录（JavaScript SDK）

在网站上插入领英第三方登录API详细demo下载本demo示例利用JavaScript SDK实现了Facebook、google、LinkedIn第三方登录，可以获取用户的基本信息，并且同时包括官方登录按钮和自定义登录按钮代码示例。1、初始化SDK 在领英开发者平台的 My APP 里创建一个应用，并新增域名并取得应用ID然后在页面head里初始化SDK<...

2017-12-22 11:25:13 5057 3

原创原生js实现jQuery常用方法的封装

/*jQuery封装*///$window.$ = HTMLElement.prototype.$ = function(selector) { var elems = (this == window ? document : this).querySelectorAll(selector); return elems.length == 0 ? null : elems.length ...

2017-12-10 17:14:46 4764

原创 IE8版本以下浏览器升级提醒

Detect your browser use a low versionDetect your browser use a low version, in order to ensure that let you have the best browsing experience,please upgrade your browserClick to download the latest ve

2017-12-09 14:32:02 1640

原创将本地代码上传到github

1、建立git仓库 cd到你的本地项目根目录下，执行git命令 git init 2、将项目的所有文件添加到仓库中 git add . 删除文件 git rm -r --cached file如果想添加某个特定的文件，只需把 . 换成特定的文件名即可 3、将add的文件commit到仓库 git commit -m "注释语句" 4...

2017-11-26 21:16:21 290

原创通过vue-cli安装vue.js

1、首先安装npm和git2、全局安装vue-clinpm install -g vue-cli3、创建一个基于webpack的vue模板（后面是自定义项目名）vue init webpack my-project依次填入相关信息生成如下目录4、进入当前目录cd vue-project5、安装node组件相关依赖npm install6、运行vue项目npm run dev默认监听地址http:/...

2017-11-26 15:33:54 1134

原创 js实现点击div外部隐藏弹出框

body{ background-color:#999999;}#myDiv{ background-color:#FFFFFF; width:250px; height:250px; display:none;}This is a div;var myDiv = $("#myDiv");$(function (){ $("#btn").c

2017-11-10 09:40:15 3162

原创 ES6模板字符串编译示例

let template = ` `;function compile(template){ const evalExpr = //g; const expr = //g; template = template .replace(evalExpr, '`); \n echo( $1 ); \n echo(`') .replace(ex

2017-10-30 10:31:51 1228

原创 web开发中常用css兼容代码（包括移动端）

持续更新中。。。1、select去除下拉按钮 select::-ms-expand { display: none; }select{ -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;} -webkit-appearance: none; -mo...

2017-10-28 11:50:37 930

翻译 pjax实现页面局部刷新跳转

简介pjax是一个jQuery插件，使用ajax和pushState技术提供快速的浏览体验与真正的永久链接、网页标题、以及浏览器的后退前进按钮操作。pjax通过抓取HTML从您的服务器通过Ajax和更换容器页面上的HTML内容会与Ajax。然后更新无需重新加载你的网页的布局或任何资源使用pushstate浏览器的当前URL（JS，CSS），提供了一个快速的外观，全页面加载。但它确实就是Aj

2017-10-18 17:23:19 5873

原创侧边栏弹出导航插件

下面介绍一款自己优化完善的侧边栏弹出框插件（基于jQuery）1、首先需要有一个下面的HTML框架。可以放在DOM中的任意位置。<div class="menu-modal"> <div class="menu-bg"></div> <div class="menu"> <!-- 里面放导航内容 --&am

2017-10-13 11:45:10 2332

原创 video.js API 详解

videojs github官网地址官方文档地址这里简单的对官方的英文参数列表做了一个简单说明，并写了一Jquery的适配调用$(document).ready(function () { var player = $("video[data-video='example_video_1']").videoJs({ /**

2017-10-12 16:00:34 19622

原创 ES6基础语法

1、let生命一个只在let所在代码块内生效的变量2、conset声明一个只读的常量。一旦声明，常量的值就不能改变。

2017-10-11 15:17:26 241

原创 gulp常用插件

1、gulp-less // less编译2、gulp-clean-css // css压缩3、gulp-uglify // js压缩4、gulp-imagemin //图片压缩.pipe(imageMin({ optimizationLevel: 4, //类型：Number 默认：3 取值范围：0-7（优化等级）

2017-10-10 17:13:15 676

原创 gulp常用API

1、gulp.src(globs[, options])options.buffer类型： Boolean 默认值： true如果该项被设置为 false，那么将会以 stream 方式返回 file.contents 而不是文件 buffer 的形式。这在处理一些大文件的时候将会很有用。**注意：**插件可能并不会实现对 stream 的支持。options.read类型

2017-10-10 16:47:19 486

原创各社交网站页面分享代码链接

Facebook：http://www.facebook.com/sharer.php?u=分享地址Twitter ： https://twitter.com/intent/tweet?url=分享地址&via=分享人（可以@）&text=分享内容Google+ : https://plus.google.com/share?url=分享地址新浪微博：http://service.we

2017-09-30 14:32:46 16655 1

原创 js判断PC端或是移动端

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { alert('手机端')}...

2017-09-30 14:30:34 10977 7

原创 js函数节流（Throttle）

在浏览器 DOM 事件里面，有一些事件会随着用户的操作不间断触发。比如：重新调整浏览器窗口大小（resize），浏览器页面滚动（scroll），鼠标移动（mousemove）。也就是说用户在触发这些浏览器操作的时候，如果脚本里面绑定了对应的事件处理方法，这个方法就不停的触发。而当事件处理比较复杂的时候浏览器不断执行计算，从而导致浏览器性能降低甚至卡死，影响用户体验。下面我们就针对这一情况做函数的节...

2017-09-30 10:59:54 4124

原创获取input上传文件名

function changeName(e){ var span = document.getElementById('span'); span.innerHTML = e.currentTarget.files[0].name;}e.currentTarget.files[0] 是一个对象文件名 name类型 type大小（字节）size上次修改时间 lastMod

2017-09-29 16:02:56 6080 2

转载面向对象、构造函数、原型与原型链详解

一、对象的定义二、工厂模式三、构造函数四、原型五、原型链六、继承七、总结

2017-09-27 23:28:54 449

原创 npm常用插件

本文持续更新中。。 1、rimraf 用于删除文件夹npm install -g rimraf（全局安装）先定位目标文件夹的父级目录，然后命令行输入rimraf ***（***为需要删除的文件夹名称）例如： rimraf node_modules2、browser-sync Browsersync能让浏览器实时、快速响应您的文件更改（html、js、cs...

2017-09-25 21:58:58 1308