- 博客(116)
- 收藏
- 关注
RSS订阅原创 离线安装大全
tar打包解压打包文件夹 test，命名为test.tartar -cvf test.tar test/解包文件夹tar -xvf test.tar离线安装dockerdocker下载地址 https://download.docker.com/linux/centos/离线安装yum包
2022-02-08 09:55:42
3258
原创 websocket测试工具wscat的使用
npm全局安装npm install wscat -g使用wscat -c ws://www.test.com/websocket注意https请使用wss://
2021-03-10 14:19:15
2768
原创 git add . 后如何恢复
git add .执行了上面的操作如何恢复，可利用restore实现git restore --staged .
2020-07-17 15:48:13
3686
原创 mac上显示.开头的文件
第一种方法是在finder中按下command+shift+.键。 第二种方法是在命令行输入如下命令defaults write com.apple.Finder AppleShowAllFiles YES
2018-07-19 09:44:39
9495
原创 iphoneX h5安全区域的问题
因为iphoneX有刘海和虚拟home键，所以便有了安全区的概念。刘海和虚拟home键所在的地方是不安全的，如果上面有内容，可能被遮挡或是不能操作。 我们可以使用viewport-fit来解决这个问题。 例：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user...
2018-07-12 15:36:08
6805
原创 sublimelinter的排错以及npm peerDependency的处理办法
sublimelinter是sublimeText中用于代码规范提示的重工具，如果代码不符合规范，它会提示出来。但是在一个项目目，经常不能正常工作，这里探讨一下怎么解决这些问题。打开sublimelinter的debug模式在sublimeText中找到tools>sublimelinter>debug mode，勾选即可。打开sublimeText的控制输出台...
2018-04-14 10:26:12
572
原创 html使用position:relative制作引导层
我们经常会遇到这样一种需求，就是在页面上加一个引导层，来告诉用户如何在页面上进行操作。这主需要在一个fixed的蒙层上实现精准定位。如何实现呢？我们就要利用position:relative了。position:relative是相对于自身进行定位，而且支持z-index。看下代码：<!DOCTYPE html><html><head> <title></title> <style>
2018-01-16 10:29:15
1237
原创 canvas中的save和restore方法的作用
save方法可以理解为暂存当前画笔的状态，接下来对画笔的操作都不会被保存下来，直到restore方法被调用。讲得通俗一点，就是说，调用save方法，就是把当前的笔放笔架上，换一支笔，调用restore方法时，再把刚才放到笔架上的笔再拿下来用。我们来看一个例子。<!DOCTYPE html><html><head> <title></title> <style> #myCanvas{
2017-12-04 10:44:11
955
原创 ubuntu上安装最新的docker社区版
如果安装有老的docker先删除老的版本 sudo apt-get remove docker docker-engine docker.io 新的社区版本叫docker-ce了 先更新包信息 sudo apt-get update 安装libltdl7 sudo apt-get install libltdl7 下载最新版本的安装包（其他版本可以在docker下载地址找到） wge
2017-11-22 14:40:02
2064
原创 ubuntu安装openssh-server开启远程连接
先进行update sudo apt-get update 然后安装openssh-server sudo apt-get install openssh-server 查看是否安装成功 sudo ps -e | grep sshd
2017-11-22 14:17:47
830
原创 高德地图AMap.Map is not a constructor问题解决
这个问题说的是AMap.Map不是一个构造函数。原因就有于有一部分代码没有执行完毕。这是因为amap js里面有一部分是异步加载的，或者是我们在js中手动加载amap js导致的。amap js提供了一个callback回调，把创建地图的代码放在回调里即可。需要先创建一个全局函数，具体代码如下： window.init = function(){ var map =
2017-11-15 10:06:15
69817
1
原创 css高度从0到auto的transition动画
如题，想实现css高度从0到auto的transition动画，发现直接写没有效果。查了一下，发现可以用max-height解决，代码如下。 .container{ line-height: 30px; text-align: center; width: 100px; position: relative; }
2017-11-02 10:59:03
17172
原创 js计算鼠标当前相对于某个元素的位置
先上代码： #mydiv{ border:1px solid grey; width: 400px; height: 200px; } var bindEvent = function(dom, eventName, listener){ if(dom.attachEvent) { dom.attachEvent('o
2017-10-13 18:21:24
15269
1
原创 css3 animation 实现帧动画
先上代码： .ani-container{ width: 125px; height: 275px; background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAHAAcAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUf
2017-10-09 14:32:45
19856
原创 webpack中postcss-loader不支持行内注释的解决办法
postcss-loader不支持行内注释，写行内注注注释会报unknown word错误。解决办法加上postcss-strip-inline-comments这个parser。npm install postcss-strip-inline-comments安装，然后在postcss.config.js中加入：module.exports = { parser: 'postcss-
2017-09-28 15:22:22
4873
3
原创 利用history.pushState实现前端路由
link1 link2 var view = document.getElementById('router-view'); function linkTo(link){ switch(link) { case 1: { window.history.pushState({a:1}, 'mylink1
2017-09-23 16:09:29
1460
转载 cl问题lnk1104 uuid.lib
今天想要将cl命令配置到命令行中使用，在网上找了一下资料，按照http://www.oschina.net/question/234345_42135的方法配置完以后，使用cl命令编译c++代码的时候，总是提示fatal error LNK1104: cannot open file 'uuid.lib'然后在网上搜了很多帖子，都是指出这个问题，但是没有成功的解决方案的。我结合
2017-09-09 16:32:44
2147
原创 iphone上实现1px的border
最近在做手机网页时，设计师ui review的时候，跟我说我写的边框不对，他要的是1px而我写的是两相素。但是我明明就是写的1px, 后面查了一下资料，发现iphone上是可以写小数的！也是说0.5px才是retina屏幕上的真正1px！（设计师真是相素眼，没事不要惹设计师！）.test{ border: 0.5px solid grey;}
2017-09-05 10:55:46
1275
原创 js中两个等号和三个等号的区别
js中两个等号会进行类型转換，先转化为同类型的基础数据类型，再比较。而三个等号不会进行类型转换，如果类型不同就会直接返回false,复合类型必须是两个引用的内存是一个，才会返回true。这里我们主要想探讨一下两个等号时这个类型转換是怎么运作的。首先，如果两边都是基础数据类型，直接转換成同类型进行比较。例如'' == 0前面是个string 后面是个number，所以会把string
2017-08-23 15:35:23
1008
原创 在webpack的less中使用绝对路径import
假设项目目录结构如下 webpack中 resolve.modulesDirectories= [ path.join(__dirname, 'node_modules'), path.join(__dirname, 'src'),]在a.less中写上@import 'style/b.less';发现会报错，找不到b.less.正确写法应
2017-08-15 17:28:44
10188
原创 使用mochajs进行js测试
mochajs是一款流行的nodejs测试工具。git地址：https://github.com/mochajs/mocha。npm install mocha --save-dev安装。在工具目录下创建test目录。在test目录下创建test.js（mocha会自动寻找test目录下所有js文件），编写测试代码：var assert = require('assert');d
2017-08-07 10:20:50
866
原创 js中使用console.time显示程序运行耗时
在js中可以使用console.time和console.timeEnd来监测程序的运行耗时，以便优化性能。代码如下console.time('aa');for(var i=0;i<1000;i++){console.log(i);};console.timeEnd('aa')最后打印出aa:120ms表示aa之间的代码共耗时120ms
2017-08-04 10:43:43
4566
原创 如何在chrome中調试android应用中的webview
1.确保您的手机android系统在4.4以上。2.连接数据线到您的电脑和手机3.开启手机的开发者模式和usb調试4.在android应用中开启webview调试配置 WebViews 进行调试必须从您的应用中启用 WebView 调试。要启用 WebView 调试，请在 WebView 类上调用静态方法 setWebContentsDebuggingEnabl
2017-07-05 10:04:02
536
原创 nginx代理服务器
使用nginx搭建代理服务器非常方便，代码如下：server { listen 8080; resolver 8.8.8.8; location /{ #auth_basic 'restricted'; #auth_basic_user_file /etc/nginx/auth/pass_file; proxy_pas
2017-07-03 11:00:26
942
原创 css毛玻璃效果
毛玻璃效果即是背景虚化效果，在css中用blur实现。 .blur { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); filter: progid: DXImageTransform.Microsoft.B
2017-06-26 09:58:01
655
原创 手机上rem大小单位的设置
html5中rem表示以根元素为基础的倍数值，比如html的font-size为14px,那么1rem代表14px,2rem代表28px。通常设计师给出的设计稿都是640相素或者750相素，刚好是iphone5或者iphone6p的宽度。为了和设计稿保持一致，并保证不同手机的兼容性。我们需要用js计算html的font-size。代码如下。 (function(){
2017-06-21 09:58:15
1446
2
原创 emoji正则表达式
直接上代码：var emojiReg = /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/;
2017-05-19 13:00:14
13442
2
原创 express中设置cookie的httpOnly属性防御xss攻击
大部分是xss攻击（跨站脚本攻攻击），都是尝试在客户的浏览器中注入脚本，然后获取cookie发送到黑客指定的地址。因为服务端的session都是通过一个记录seesionId的cookie来识别的。黑客拿到了cookie, 自然就能够伪造身份，进而获取到权限。cookie的httpOnly属性意味着，浏览器中不能通过document.cookie访问到这个cookie，从而达到防御xss攻击的目的
2017-05-16 10:08:05
5999
原创 在flex中使用text:ellipsis
在flex中使用text:ellipsis时，发现不起作用，代码如下： *{ padding: 0; margin: 0; box-sizing: border-box; } .flex{ display: flex;
2017-05-12 10:38:02
3395
1
原创 通过babel-register在nodejs端使用es6
nodejs对es6的支持并不好，像class, import这些关键字，react的jsx都无法使用。但是babel可以将这些都转化为es5。此处讲讲如何在node端使用babel。babel-register可以理解成一个小插件，将es6的东西转成es5。使用很简单，只需要在文件中加入require('babel-register');即可。它还可以接收一个babel的配置作为参数
2017-05-08 10:05:52
16592
1
原创 css 修改placeholder的颜色
直接上代码： input::-webkit-input-placeholder { color: #ccc; } input::-moz-input-placeholder { color: #ccc; } input::-ms-input-placeholder { color: #cc
2017-04-28 13:27:53
2731
原创 stf(smart test farm) 网页多安卓设备管理器
什么是stf？讲得通俗一点，就是可以把多台安卓设备连接到一台服务器上，然后在这台服务器上，做一个web server, 其他电脑就可以在网页中直接操控所有的安卓设备了。这对于安卓开发者，由其是移动web开发者，来测试自己开发的内容真是太方便了。github 地址：https://github.com/openstf/stf官网：http://openstf.io/
2017-04-28 10:01:26
1152
原创 js创建style元素的方法
js创建style元素： var style = document.createElement('style'); style.type="text/css"; style.appendChild(document.createTextNode("body{color: red;}")); document.body.appendChi
2017-03-28 14:49:23
3015
原创 mysql 地理位置从近到远查询排序
表设计：create table geo( id int primary key auto_increment, lat float, lng float);查询语句：SELECT id, ( 6371 * acos( cos(radians(32)) * cos( radians( lat ) ) * cos(radians( lng
2017-03-20 14:51:25
4818
原创 在移动设备中使用js调用陀螺仪api
此为开发vr全景，所用到的：window.addEventListener('deviceorientation', function(event) { var alpha = event.alpha; // var beta = event.beta; var gamma = event.gamma; var n
2017-03-13 11:31:08
4517
转载 Java多线程-实例解析
Java多线程实例 3种实现方法Java中的多线程有三种实现方式：1.继承Thread类，重写run方法。Thread本质上也是一个实现了Runnable的实例，他代表一个线程的实例，并且启动线程的唯一方法就是通过Thread类的start方法。2.实现Runnable接口，并实现该接口的run()方法.创建一个Thread对象，用实现的Runnable接口的对象作为参数实例化Thre
2017-03-06 01:16:07
368
原创 改变浏览器滚动条样式
仅限webkit系。/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar { width: 6px; height: 6px; background-color: @orange;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track { -webkit-box-shadow: ins
2017-03-02 16:39:25
333
转载 React入门教程 - 组件生命周期
每一个React组件在加载时都有特定的生命周期，在此期间不同的方法会被执行。组件加载: componentWillMountcomponentWillMount()componentWillMount会在组件render之前执行，并且永远都只执行一次。由于这个方法始终只执行一次，所以如果在这里定义了setState方法之后，页面永远都只会在加载前更新一次。
2017-03-01 10:36:10
280
转载 preventDefault()、stopPropagation()、return false 之间的区别
可能在你刚开始学习关于jQuery事件处理时，看到的第一个例子就是关于如何阻止浏览器执行默认行为，比如下面这段演示click事件的代码$("a.toggle").click(function () { $("#mydiv").toggle(); return false; // Prevent browser from visiting `#` })
2017-03-01 09:59:00
628
原创 PageSpeed Insights网页性能测试工具
PageSpeed Insights是google出品的一款网页性能测试工具，并提供网页性能优化建议，针对移动端网页还有单独的建议。可谓是前端开发者的神器。其也
2017-02-28 09:59:49
4221
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人