web前端
关注
分享
扫一扫
shidaping
这个作者很懒，什么都没留下…
展开
-
websocket测试工具wscat的使用
npm全局安装npm install wscat -g使用wscat -c ws://www.test.com/websocket注意https请使用wss://原创 2021-03-10 14:19:15 · 3059 阅读 · 0 评论 -
如何在chrome中調试android应用中的webview
1.确保您的手机android系统在4.4以上。2.连接数据线到您的电脑和手机3.开启手机的开发者模式和usb調试4.在android应用中开启webview调试配置 WebViews 进行调试必须从您的应用中启用 WebView 调试。要启用 WebView 调试，请在 WebView 类上调用静态方法 setWebContentsDebuggingEnabl原创 2017-07-05 10:04:02 · 648 阅读 · 0 评论 -
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 · 726 阅读 · 0 评论 -
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 · 981 阅读 · 0 评论 -
手机上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 · 1493 阅读 · 2 评论 -
emoji正则表达式
直接上代码：var emojiReg = /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/;原创 2017-05-19 13:00:14 · 13544 阅读 · 2 评论 -
express中设置cookie的httpOnly属性防御xss攻击
大部分是xss攻击（跨站脚本攻攻击），都是尝试在客户的浏览器中注入脚本，然后获取cookie发送到黑客指定的地址。因为服务端的session都是通过一个记录seesionId的cookie来识别的。黑客拿到了cookie, 自然就能够伪造身份，进而获取到权限。cookie的httpOnly属性意味着，浏览器中不能通过document.cookie访问到这个cookie，从而达到防御xss攻击的目的原创 2017-05-16 10:08:05 · 6095 阅读 · 0 评论 -
在flex中使用text:ellipsis
在flex中使用text:ellipsis时，发现不起作用，代码如下： *{ padding: 0; margin: 0; box-sizing: border-box; } .flex{ display: flex;原创 2017-05-12 10:38:02 · 3489 阅读 · 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 · 2777 阅读 · 0 评论 -
stf(smart test farm) 网页多安卓设备管理器
什么是stf？讲得通俗一点，就是可以把多台安卓设备连接到一台服务器上，然后在这台服务器上，做一个web server, 其他电脑就可以在网页中直接操控所有的安卓设备了。这对于安卓开发者，由其是移动web开发者，来测试自己开发的内容真是太方便了。github 地址：https://github.com/openstf/stf官网：http://openstf.io/原创 2017-04-28 10:01:26 · 1203 阅读 · 0 评论 -
在移动设备中使用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 · 4624 阅读 · 0 评论 -
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 · 4781 阅读 · 0 评论 -
在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 · 10310 阅读 · 0 评论 -
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 · 6941 阅读 · 0 评论 -
html使用position:relative制作引导层
我们经常会遇到这样一种需求，就是在页面上加一个引导层，来告诉用户如何在页面上进行操作。这主需要在一个fixed的蒙层上实现精准定位。如何实现呢？我们就要利用position:relative了。position:relative是相对于自身进行定位，而且支持z-index。看下代码：<!DOCTYPE html><html><head> <title></title> <style>原创 2018-01-16 10:29:15 · 1308 阅读 · 0 评论 -
canvas中的save和restore方法的作用
save方法可以理解为暂存当前画笔的状态，接下来对画笔的操作都不会被保存下来，直到restore方法被调用。讲得通俗一点，就是说，调用save方法，就是把当前的笔放笔架上，换一支笔，调用restore方法时，再把刚才放到笔架上的笔再拿下来用。我们来看一个例子。<!DOCTYPE html><html><head> <title></title> <style> #myCanvas{原创 2017-12-04 10:44:11 · 1046 阅读 · 0 评论 -
高德地图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 · 71724 阅读 · 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 · 17422 阅读 · 0 评论 -
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 · 15693 阅读 · 1 评论 -
css3 animation 实现帧动画
先上代码： .ani-container{ width: 125px; height: 275px; background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAHAAcAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUf原创 2017-10-09 14:32:45 · 33495 阅读 · 0 评论 -
利用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 · 1526 阅读 · 0 评论 -
js中两个等号和三个等号的区别
js中两个等号会进行类型转換，先转化为同类型的基础数据类型，再比较。而三个等号不会进行类型转换，如果类型不同就会直接返回false,复合类型必须是两个引用的内存是一个，才会返回true。这里我们主要想探讨一下两个等号时这个类型转換是怎么运作的。首先，如果两边都是基础数据类型，直接转換成同类型进行比较。例如'' == 0前面是个string 后面是个number，所以会把string原创 2017-08-23 15:35:23 · 1085 阅读 · 0 评论 -
iphone上实现1px的border
最近在做手机网页时，设计师ui review的时候，跟我说我写的边框不对，他要的是1px而我写的是两相素。但是我明明就是写的1px, 后面查了一下资料，发现iphone上是可以写小数的！也是说0.5px才是retina屏幕上的真正1px！（设计师真是相素眼，没事不要惹设计师！）.test{ border: 0.5px solid grey;}原创 2017-09-05 10:55:46 · 1325 阅读 · 0 评论 -
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 · 3094 阅读 · 0 评论 -
改变浏览器滚动条样式
仅限webkit系。/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar { width: 6px; height: 6px; background-color: @orange;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track { -webkit-box-shadow: ins原创 2017-03-02 16:39:25 · 368 阅读 · 0 评论 -
preventDefault()、stopPropagation()、return false 之间的区别
可能在你刚开始学习关于jQuery事件处理时，看到的第一个例子就是关于如何阻止浏览器执行默认行为，比如下面这段演示click事件的代码$("a.toggle").click(function () { $("#mydiv").toggle(); return false; // Prevent browser from visiting `#` })转载 2017-03-01 09:59:00 · 676 阅读 · 0 评论 -
js打开新窗口被浏览器拦截的解决方法
在js中使用window.open打开新窗口时会被很多浏览器拦截。但是我们知道使用a元素的跳转是不会被拦截的。这就给我们提供了解决这个问题的黑科技。代码如下：function openLink(url, target) { var a = document.createElement('a'); a.setAttribute('href', url); a.setA原创 2016-05-25 10:36:27 · 1758 阅读 · 0 评论 -
css3之background-clip
background-clip是css3中一个很有用，但容易被忽视的一个属性。定义background-clip 属性规定背景的绘制区域。讲得通俗一点，此属性规定背景是不能存在于border和padding中。可选项border-box，背景被裁剪到边框盒。也就是说border上会有背景（背景会延伸到border）。padding-box,背景被裁剪到内边距框。也就是说原创 2015-12-08 18:53:38 · 618 阅读 · 0 评论 -
div包含img时height增大的问题
先看例子 section{ display: table; } div{ width:100px; height:100px; background:red; display: table-cell; } img{ width:100px; height:100px; }原创 2015-12-09 13:24:39 · 928 阅读 · 0 评论 -
js获取url中参数的方法
注意：hash值（即#号后面的）后面的参数也可以获取。如：http://www.baidu.com#bbbbb?a=1。getParam('a')会得到1。原创 2015-12-24 15:07:28 · 472 阅读 · 0 评论 -
bower简单使用，安装位置及bowerrc文件
1.bower简介bower是一款优秀的前端包及依赖管理工具，借鉴了npm。官网 http://bower.io/2.bower简单使用首先，使用npm install bower -g安装bower（node安装略过）。然后，使用bower init 初始化当前工程的bower。此操作会在当前目录下生成bower.json文件。关于bower.json的详细信息，请自行查阅相原创 2015-12-06 22:49:27 · 14347 阅读 · 0 评论 -
css中的overflow需要注意的问题
html中经常会碰到内容超出一个元素的显示范围。overflow就是用来控制超出内容的显示方式。它有以下几个可选项：visible(默认值)hiddenautoscrollinheritvisible为默认值，内容会全部显示，但是会在元素框之外。 hidden为隐藏超出的内容。auto为内容超出时自动出现滚动条，否则不显示滚动条。scroll为始终显示滚动条。css3中还有原创 2015-12-01 09:17:42 · 970 阅读 · 0 评论 -
css优先级和权重
1.css权重级：id选择器为100class选择器为10元素选择器为1这如何理解呢？ 优先级等于所有选择器权重相加。例如：#test.test 的优先级就为110， #test span的优先级就为101，前者大于后者，所有前者优先。示例 div#test { color:red; } div.test{ color:orange;原创 2015-11-21 13:58:33 · 687 阅读 · 0 评论 -
jquery移动设备上的滑动事件
原码：$.fn.onTouchUpOrDown = function(handler_up, handler_down) { var element = $(this); var start_client_y; var end_client_y; element[0].addEventListener('touchstart', function(event原创 2015-11-19 10:16:45 · 809 阅读 · 0 评论 -
javascript中的值传递和引用传递
javascript中的值传递和引用传递是初学者常犯的错误。先举个简单例子。var a=[1];var b=a;b.push(2);console.log(b);//[1,2]console.log(a);//[1,2]此例中，a为一个数组，b为一个引用传递。修改b的同时，也修改了a。反过来也一样。object也为引用传递。再看一例var a={c:1};原创 2015-10-16 00:57:28 · 647 阅读 · 0 评论 -
css自动隐藏内容，并使用‘...’代替
我们经常会碰到这样一个问题，为了美观，我们需要将一些文字固定在一定的宽度内，并使用...结尾。其实css中自带这一功能。先来看一个例子。 #div1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:200px; } 中国是世界四大文明古国之一，有原创 2015-10-26 00:11:57 · 894 阅读 · 0 评论 -
node express使用qr-image生成二维码
生成二维码，可以使用jquery的qrcode插件。但是使用html5 canvas或svn生成，在有的手机上无法保存，而且也无法兼容对html5支持不好的浏览器。此处我们使用node express后端直接生成二维码。var express = require('express');var app = express();var qr_image = require('qr-imag原创 2015-10-16 00:39:00 · 9128 阅读 · 0 评论 -
CSS命名BEM规范
css命名是前端开发经常遇到的问题，不同的开发人员css命名规范不同，不好合作，也不好维护。这里介绍一下css命名的BEM规范，即‘Block__Element--Modifier’(模块__元素--修饰符规范。BEM的命名规范是模块名加上双下划线（__），加上元素名，加上双短横线（--），最后加上修饰符。内部用短横线连接，举例说明：// button.btn{ border: none转载 2016-07-07 17:05:54 · 647 阅读 · 0 评论 -
PageSpeed Insights网页性能测试工具
PageSpeed Insights是google出品的一款网页性能测试工具，并提供网页性能优化建议，针对移动端网页还有单独的建议。可谓是前端开发者的神器。其也原创 2017-02-28 09:59:49 · 4579 阅读 · 0 评论 -
css多排省略
有时我们会有这样一种需求，就是一段文本过长，然后我们需要只显示2排或3排，然后最后显示...省略。如何用css实现呢? 传说中，黄帝是大约4500多年前，生活在黄河流域原始部落的部落联盟首领。他提倡种植五谷，驯养牲畜，促使这个部落联盟逐步强大。他曾率领部落打败黄河上游的炎帝部落和南方的蚩尤部落。后来炎帝部落和黄帝部落结成联盟，在黄河流域长期生活、繁衍，构成了以原创 2016-12-22 12:05:28 · 506 阅读 · 0 评论