前端
文章平均质量分 53
完美主义
这个作者很懒,什么都没留下…
展开
-
谷歌与火狐的CSS:hover差异
#f { width: 200px; height: 200px; background-color: red; position: absolute; z-index: 0; } #f:hover { z-index: -2; } #s { width: 200px; height: 200px; background-color: black;原创 2013-09-11 13:16:31 · 1255 阅读 · 0 评论 -
学习Angular2-typescript编译
前端这个方向,对于新事物的接受能力和速度决定了你在整个行业的位置。ng2还没有发布官方稳定版本,但是我觉得对于我来说这个时候是最好的蓄力时机,于是开始了ng2的学习之路。接触ng2之前也接触过一个avalon的东西,但是不知道是不是哪里相克,就是不顺利,后来想想,都是大同小异,不如学学更具参考性的ng2.ng2支持typescript和es5,6开发,当然官方文档目前只有ts的,为了更原创 2015-11-13 16:59:39 · 7614 阅读 · 0 评论 -
手机端网页监测是否打开键盘
做H5页面经常会遇到页面有输入功能的 例如这种的: ps:测试机仅有一台mi4c 最开始想,键盘弹出应该占用了浏览器的窗口,所以弹出键盘时页面的可用高度一定是变化的,换句话说就是弹出键盘导致浏览器的高度被压缩。 所以通过对比输入框获取焦点前后浏览器窗口高度的变化,可以判断出键盘是否弹出。document.documentElement.clientHeight // ==>640docum原创 2016-05-03 17:15:27 · 5432 阅读 · 0 评论 -
TODO-2:浏览器唤醒APP
h5唤醒app原创 2016-09-13 16:09:19 · 568 阅读 · 0 评论 -
linux 下使用"n"配置使用淘宝镜像
n 是 nodejs 版本管理器,鉴于国内网络环境,作如下配置用起来才会便捷。# ~/.bashrc 或 ~/.zshrc# 使用淘宝 nodejs 镜像,注意末尾的'/'不能省略export NODE_MIRROR=https://npm.taobao.org/dist/# 建议 linux 用户配置 nodejs 安装目录,切换版本不用 root 权限export N_PREFIX=$HOM原创 2016-10-29 12:16:12 · 3255 阅读 · 1 评论 -
TODO-3:css relative and absolute
css中很多属性都是很近似的,平时在项目中使用并不会太在意两者之间的区别,之前在css定位上吃过亏,这次细致的解析一下。css position: fixed | static | absolute | relative | center | page | stickystatic 和 fixed 的概念很简单,这里不做详细解释。center page sticky 属于css3新增属性。relat原创 2016-11-14 11:42:02 · 401 阅读 · 0 评论 -
使用 npm 私有仓库安装依赖遇到的坑
最近项目部署的时候时常遇到访问 npm 官方仓库网络抽疯的现象,决定尝试一下公司内部新搭建的私有仓库(使用的 cnpm)。切换个仓库这么简单的事没想到遇到两个大坑,记录一下:tarball url 指向不正确问题:用npm i --registry=https://rnpm.xxxxx.com xxx 命令安装时,结果却到 r.cnpmjs.org 这个域下面下载tar包。 原因:仓库的regis原创 2016-11-17 17:14:25 · 9257 阅读 · 1 评论 -
react with JSX for {if…else…}
在react中用jsx渲染dom的时候经常会遇到if条件判断,然而在jsx中竟是不允许if条件判断的。一下有几种判断方式,可以根据自己的应用场景,挑选适合的。方案一:class HelloMessage extends React.Component { render (){ let userMessage; if (this.props.loggedIn) { us原创 2016-05-30 15:13:49 · 22133 阅读 · 1 评论 -
TODO-4:nodejs 实现一部漫画爬取
很早之前一直很喜欢听一些有声评书,当时为了找这些音频也是煞费苦心。但是找的过程中也发现,我每次下载音频的时候都是在重复同样的操作,所以也想过是不是可以用程序实现。那时候并没有很强的意念去实现是这个工具,所以只是停留在了想的层面。前不久无意发现一部感觉不错的动漫《镇魂街》,看了动画片之后觉得不过瘾,又发现官方的漫画版还挺有看头的,于是又从头开始后撸漫画,但是发现一页一页的翻翻找找好累,所以又想着把这些原创 2017-01-03 15:23:09 · 2086 阅读 · 0 评论 -
博客搬家啦
心血来潮,让博客换个新家 点我点我顺便求个粉 快来快来原创 2017-01-06 15:08:22 · 330 阅读 · 0 评论 -
微信-Android 浏览器刷新有缓存?
前端刷新网页的方法有很多种:1:history.go(0) 浏览器的history对象,go 跳转到指定位置的页面。2:location.reload(true); 重新渲染当前页面,参数为真时是从服务器端重新渲染,并响应页面,参数为假时则优先获取缓存。3:location.replace(location); 替换当前页面的连接4:location.assign(location); 导航原创 2017-06-23 18:10:36 · 1104 阅读 · 0 评论 -
TODO-1:6种数组去重方法-面试题
前两天看到有一个人在总结面试的时候写到问到了数组去重,说是方法很多。一时手痒把我能想到的都写出来了。1、最传统的方法,“链式”检索,这个方法虽说是双层for循环嵌套,但是能够保留数组原有的顺序,对于有顺序要求的可以用这个,而且可以兼容低版本浏览器。let ary = [2,324,35,2,36,1,2,5,3,51,31,2,5,2,24,5,46,789,0,'2','2'];function原创 2016-09-01 13:10:34 · 639 阅读 · 0 评论 -
正则匹配中文以及一些常用正则表达式
正则表达式用于字符串处理、表单验证、日志数据分析等场合,实用高效。现将自己走网上搜索并总结的常用方法收集了一下:匹配中文字符的正则表达式: [\u4e00-\u9fa5]注:匹配中文还真是个头疼的事,有了这个表达式就好办了匹配双字节字符(包括汉字在内):[^\x00-\xff]注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)匹配空白行的正则转载 2015-04-17 12:18:26 · 609 阅读 · 0 评论 -
fullPage 使用总结
相对iScroll,fullPage更显的小巧实用。毕竟我们好像对于产品的需求没有那么高,特别是如果只是为了要展示好看的内容,这个会是更好的选择。相对于iScroll好用的地方:1,翻页的时候或者跳转之后希望能回到之前的页面;2,页面切换的状态有很多,比如翻页方向,翻页前,翻页后;3,分页导航;4:顶部导航和footer。总之,这个的定制性稍强一点吧。使用之前需要注意的问题:fullP原创 2015-03-24 16:54:50 · 2160 阅读 · 2 评论 -
JQuery 与 JS 里 submit() 的区别
ASP.NET 的服务器控件回发是使用这一段JS代码:var theForm = document.forms['form1'];if (!theForm) { theForm = document.form1;}function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (原创 2013-09-30 17:41:11 · 1092 阅读 · 0 评论 -
神奇的编码
看下面一段代码:到另一个页面去function pass(v) { alert(unescape(decodeURI(escape(v))));}本来以为传一个字符串参数给js函数,然后js函数里就可以得到这个字符串,但是IE下的运行结果却是:乱码!换Chrome浏览器:这次不是乱码了,但依然叫人郁闷,不是我想象的结果。怎么会这样呢?是浏览原创 2013-09-22 19:42:35 · 856 阅读 · 0 评论 -
Jquery鼠标控制图片轮播,animate()动画队列,stop()清除队列
Jquery实现图片轮播,轮播思路如下.box { width: 200px; height: 200px; overflow: hidden; position: relative; border: 1px solid blue;}.imgList { display: block; width:1400px; position: relative; lef原创 2013-10-25 19:09:15 · 3057 阅读 · 0 评论 -
div可以输入内容,屏蔽浏览器自动的input样式
今天设计一个发表动态的窗口样式,发现当鼠标点击input时浏览器自动加上的样式和网站整体风格很不一致,虽然浏览器这种智能功能很先进但是有时候不免会影响设计整体的一致性。然后就想着不用input作为输入框是不是可以,换成了以为可以避免浏览器的“智能”功能,没想到浏览器太智能了,效果是一摸一样的,我只能去找度娘了,后来发现是我的css还是储备不够啊(自我检讨中)css中有这原创 2013-11-08 16:32:58 · 962 阅读 · 0 评论 -
html meta 你真的知道吗?
meta是用来在HTML文档中模拟HTTP协议的响应头报文。可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。对于目前有多版本的ie浏览器,当浏览器切换到其他版本时,往往不会如我们所愿采用标准的文档规则渲染,于是提前设定一下是很有必要的这个可以帮助我们告诉浏览器应该以什么样的标准的渲染,当然目前来说都有ie11了我们是不是应该原创 2013-12-20 15:20:46 · 752 阅读 · 0 评论 -
sublime text jade 语法高亮
我比较喜欢用轻量型的文本编辑器,sublime text 是一个典型的并且非常受欢迎的文本编辑器,虽然他并不是免费的,但是我们对于国人的聪明头脑来说这都不是事儿。它强大的语法高亮真是让人爱不释手但是……jade它目前还没有支持,不过呢,github上还是有很多大牛已经给出了出色的插件了为了方便,我建议:先打开sublime text --首选项-->浏览程序包-->让后我们在这里git原创 2014-01-04 14:01:35 · 3634 阅读 · 0 评论 -
margin 负边距
关于负margin的原理http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812(尊重原创)总结来说就是:1.margin负边距会对文档流产生影响,并且方向为向左或向上;2.左右负边距会改变对象的宽度;3.负边距对脱离文档流的定位有影响。以下几个应用示例一、左右列固定,中间列自适应(类似QQ空间的三列布局)转载 2013-12-20 14:11:04 · 1131 阅读 · 0 评论 -
手机端巧用input[date]
应用场景:生命计算器,允许用户输入自己的出生年月,根据用的数据计算出相关的过去和未来100岁的数据。分析:这个应用主要两个点。1,用户的输入是自由的;2,Date的运用;3,浮点数和整数的处理。技术点不多,也不难,算是巩固一下javascript的Date,Math两个对象。一、用户的输入允许用户输入,必然会有数据的准确性验证。可以有两个选择。1,用户的手动输入;2,提供日期选择器。原创 2015-03-25 20:17:55 · 6346 阅读 · 0 评论 -
微信内置浏览器对于video的duration和redayState支持程度
之前接到一个在微信页面中添加背景音乐的需求,想都没想,查了几个相关的事件和属性上来就开始coding。随后悲剧了。。。测试的时候很多人说,我的怎么不能加载完了就自动播放音乐呢?后来发现ios在这个方面有专门的限制,在没有用户交互的时候是不能自动播放的。后来不得已根据产品设计添加了触发播放的事件。但是,新的需求又来了,前段时间风靡一时的朋友圈语音,也让我不少费心了,一个是自动播放,一个是对于原创 2015-03-03 17:23:35 · 4633 阅读 · 0 评论 -
移动端实现 iphone android 小图标 文字排版
情景描述:在手机浏览器中展示一些数据,这些数据前面都小图标,要求:小图标和文字水平对齐。效果图问题分析:对于图文横排的问题,有很多的解决办法,但是究其根本还是将图片和文字放在同一行上进行展示。实现方案:方案一:写法上很简单,但是这个的兼容性有很大问题。.m-icon{display:inline-block; vertical-align:middle; paddi原创 2015-03-11 17:04:46 · 1797 阅读 · 0 评论 -
iScroll使用总结
iScroll官方宣传的就是在网页上实现app的滑动效果。在使用iScroll之前首先需要了解一下它的一些特点,iScroll github地址:https://github.com/cubiq/iscroll。iScroll为一些不同的需求创建了对应的文件,iscroll.js文件包含基本的组件,iscroll-lite.js则是精简型的,专为实现滑动功能,其他不支持。同时还支持页面放大原创 2015-03-23 15:38:19 · 3052 阅读 · 4 评论 -
元素拖拽
/* * touchScroll * param:el,evt * evt:{start:function(){},move:function(){},end:function(){}}*/(function(window,document,undefined){ var hasTouch = 'ontouchstart' in window, hasPoi原创 2015-04-02 16:32:16 · 671 阅读 · 0 评论 -
CSS:font-szie
作为前端程序员对font-size这个属性肯定是再熟悉不过,相信这是我们使用频率最高的属性之一了。但是之前接到一个需求涉及到字体的适配,发现我好像对这个本应该很熟悉的属性好像有点陌生,于是花了点时间看了一下CSS的英文文档,虽然是一个简单的知识点,但是收获还是很大的。font-size语法/* <absolute-size> values */font-size: xx-sma...原创 2018-12-21 14:13:04 · 253 阅读 · 0 评论