评论 - lizhenqiu blog

#²⁴¹⁴

作者：广西南宁市

一项产品的成功说到底还是取决于用户，在此基础上的团队合作与执行才是巩固产品的驱动力，FB成功至今是因为抓住了用户的心。

文章：Facebook设计总监：我的产品设计年度总结发表时间：2016-07-05, 10:50:40

展开↯

#²⁴¹⁵

作者：广西南宁市

找回win10的照片查看器
找回win原来的图片查看器Windows10.rar

文章：常用html、demo代码发表时间：2016-07-05, 10:28:52

展开↯

#²⁴¹⁶

作者：广西南宁市

I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.
我今晨坐在窗前，世界如一个路人似的，停留了一会，向我点点头又走过去了。
--泰戈尔《飞鸟集》

文章：成功的故事只能倒叙着讲发表时间：2016-07-04, 16:49:04

展开↯

#²⁴¹⁷

作者：广西南宁市

Web前端
Javascript
添加cookie

function addCookie(objName,objValue,objHours,objDomain,objPath){
    var str = objName + "=" + escape(objValue);
    if(objHours > 0){ //为时不设定过期时间，浏览器关闭时cookie自动消失
        var date = new Date();
        var ms = objHours*3600*1000;
        date.setTime(date.getTime() + ms);
        str += "; expires=" + date.toGMTString();
        if(objDomain){
            str += ";domain="+objDomain;
        }
        if(objPath){
            str += ";path="+objPath;
        }
    }
    document.cookie = str;
}

Run code

Cut to clipboard

获取指定名称的cookie的值

function getCookie(objName){
  var arrStr = document.cookie.split("; ");
  for(var i = 0;i < arrStr.length;i ++){
    var temp = arrStr[i].split("=");
    if(temp[0] == objName) return unescape(temp[1]);
  }
}

Run code

Cut to clipboard

删除指定名称的cookie，可以将其过期时间设定为一个过去的时间

function delCookie(name){
  var date = new Date();
  date.setTime(date.getTime() - 10000);
  document.cookie = name + "=a; expires=" + date.toGMTString();
}

Run code

Cut to clipboard

是否存在某个class

function hasClass(node,classname){
  return node.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

Run code

Cut to clipboard

对节点增加class

function addClass(node,classname){
  if(!this.hasClass(node,classname)){
    node.className = (node.className+" "+classname).replace(/^\s+|\s+$/g,'');
  }
}

Run code

Cut to clipboard

对节点删除class

function removeClass(node,classname){
  node.className = (node.className.replace(classname,"")).replace(/^\s+|\s+$/g,'');
}

Run code

Cut to clipboard

数组复制技巧

方法一

var a = [1,2,3];
b = a.slice(0);

Run code

Cut to clipboard

方法二

var a = [1,2,3];
b = a.concat();

Run code

Cut to clipboard

打乱数字数组的顺序

numbers.sort(function(){ return Math.random() - 0.5});

Run code

Cut to clipboard

给数组创建一个随机项

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var randomItem = items[Math.floor(Math.random() * items.length)];

Run code

Cut to clipboard

数组追加

Array.prototype.push.apply(array1, array2);

Run code

Cut to clipboard

获得数组中的最大值

写法一

var a = [10,1,2,3,4,8,9];
Math.max.apply(null,a);

Run code

Cut to clipboard

写法二

Array.prototype.max = function() {
    return Math.max.apply({},this); 
}

Run code

Cut to clipboard

类数组转换成数组

写法一

var args = Array.prototype.slice.call(arguments, 0);

Run code

Cut to clipboard

写法二

var args = [].slice.call(arguments);

Run code

Cut to clipboard

字符串去重

"aagbdfcedskahkxxbhxbshb".replace(/(\w)(?=\w*\1)/gi,"");

Run code

Cut to clipboard

字符串反序列化成JSON

eval方式解析

function strToJson(str){
    var json = eval_r('(' + str + ')');        //或eval('('+Json+')')
    return json;
}

Run code

Cut to clipboard

new Function形式

function strToJson(str){
    var json = (new Function("return " + str))();
    return json;
}

Run code

Cut to clipboard

使用全局的JSON对象

function strToJson(str){
    return JSON.parse(str);
}

Run code

Cut to clipboard

获取某月天数

var day = new Date(2014,4,0);  //获取4月份的天数
var count = day.getDate();

Run code

Cut to clipboard

日期对象转换成时间戳

var d = +new Date(); //1466489912445

Run code

Cut to clipboard

跨浏览器DOM对象：DOMUtil

获取指定class名称的DOM对象

function getElementsByClassNamefunction(className,context,tagName){
    if(typeof context == 'string'){
        tagName = context;
        context = document;
    }else{
        context = context || document;
        tagName = tagName || '*';
    }
    if(context.getElementsByClassName){
        return context.getElementsByClassName(className);
    }
    var nodes = context.getElementsByTagName(tagName);
    var results= [];
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        var classNames = node.className.split(' ');
        for (var j = 0; j < classNames.length; j++) {
            if (classNames[j] == className) {
                results.push(node);
                break;
            }
        }
    }
    return results;
}

Run code

Cut to clipboard

获取选中文本内容

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();    
    }else if (document.getSelection) {
        return document.getSelection();
    }else if (document.selection) {
        return document.selection.createRange().text;
    }
}

Run code

Cut to clipboard

跨浏览器获取可视窗口大小

function getWindow () {
    if(typeof window.innerWidth !='undefined') {
        return{
            width : window.innerWidth,
            height : window.innerHeight
        }
    }else{
        return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}

Run code

Cut to clipboard

通用事件兼容框架：EventUtil

取消浏览器默认行为

function stopDefault( e ) {
    if ( e && e.preventDefault ){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
    return false;
}

Run code

Cut to clipboard

阻止事件冒泡

function stopBubble(e){
    if (e && e.stopPropagation) {
        e.stopPropagation();
    }else if (window.event) {
        window.event.cancelBubble = true;
    }
}

Run code

Cut to clipboard

模拟触发点击事件

function simulateClick(el) {
  var evt;
  if (document.createEvent) { // DOM Level 2 standard
    evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    el.dispatchEvent(evt);
  } else if (el.fireEvent) { // IE
    el.fireEvent('onclick');
  }
}
createEvent(eventType)

Run code

Cut to clipboard

参数描述
eventType 想获取的 Event 对象的事件模块名。
返回值

返回新创建的 Event 对象，具有指定的类型。

抛出

如果实现支持需要的事件类型，该方法将抛出代码为 NOT_SUPPORTED_ERR 的 DOMException 异常。

说明

该方法将创建一种新的事件类型，该类型由参数 eventType 指定。注意，该参数的值不是要创建的事件接口的名称，而是定义那个接口的 DOM 模块的名称。

下表列出了 eventType 的合法值和每个值创建的事件接口： eventType 的合法值和每个值创建的事件接口：

参数	事件接口	初始化方法
HTMLEvents	HTMLEvent	iniEvent()
MouseEvents	MouseEvent	iniMouseEvent()
UIEvents	UIEvent	iniUIEvent()

Run code

Cut to clipboard

用该方法创建了 Event 对象以后，必须用上表中所示的初始化方法初始化对象。
对象深度克隆

Object.prototype.clone = function () {
    var newObj = {};
    for (var i in this) {
        console.log("i = " + i)
        if (typeof(this[i]) == 'object'|| typeof(this[i]) == 'function') {
            newObj[i] = this[i].clone()
        } else {
            newObj[i] = this[i]
        }
    }
    return newObj
}

Run code

Cut to clipboard

简单的克隆：

方法一

obj = eval(uneval(o));

Run code

Cut to clipboard

方法二(系列化对象)

obj= JSON.parse(JSON.stringify(o));

Run code

Cut to clipboard

数组深度克隆

Array.prototype.clone = function () {
    var newArray = []
    for (var i = 0; i < this.length; i++) {
        if (typeof(this[i]) == 'object' || typeof(this[i]) == 'function') {
            newArray[i] = this[i].clone()
        } else {
            newArray[i] = this[i]
        }
    }
    return newArray
}

Run code

Cut to clipboard

函数深度克隆

Function.prototype.clone = function () {
    var that = this;
    var newFunc = function () {
        return that.apply(this, arguments);
    };
    for (var o in this) {
        newFunc[o] = this[o];
    }
    return newFunc;
}

Run code

Cut to clipboard

电子邮箱

/^[0-9a-z][0-9a-z\-\_\.]+@([0-9a-z][0-9a-z\-]*\.)+[a-z]{2,}$/i

Run code

Cut to clipboard

固定电话

/^0[0-9]{2,3}[2-9][0-9]{6,7}$/

Run code

Cut to clipboard

手机号码

/^(\+?0{0,2}86([\ |\-])?)?1[3|4|5|7|8][0-9]{9}$/

Run code

Cut to clipboard

ip地址

/^((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d)(\.((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d)){3}$/

Run code

Cut to clipboard

域名

/^([a-zA-Z0-9][-a-zA-Z0-9]{0,62}\.)+([a-zA-Z]{0,63})\.?$/

Run code

Cut to clipboard

HTML5标签兼容

(function(){
  var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure, footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','), 
            i= e.length;
  while(i--){
        document.createElement(e[i]);
  }
})();

Run code

Cut to clipboard

横屏监听

var updateOrientation =function(){
    if(window.orientation=='-90'|| window.orientation=='90'){
        console.log('为了更好的体验，请将手机/平板竖过来！');
     }else{
        console.log('竖屏状态');
    }
};
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";// 监听事件
window.addEventListener(orientationEvent,updateOrientation);

Run code

Cut to clipboard

根据AMD规范写插件

;(function () {
    'use strict';
    function pluginName(layer, options) {
        var something;
        options = options || {};
        this.layer = layer;
        this.param1 = options.param1||'';
    }
    var privateField = '';
    pluginName.prototype.fun1 = function(){

    }
    /**
     * Factory method for creating a object
     */
    pluginName.attach = function(layer, options) {
        return new pluginName(layer, options);
    };
    if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {

        // AMD. Register as an anonymous module.
        define(function() {
            return pluginName;
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = pluginName.attach;
        module.exports.pluginName = pluginName;
    } else {
        window.pluginName = pluginName;
    }
}());

Run code

Cut to clipboard

http://passer-by.com/front-end-note/

Run code

Cut to clipboard

文章：全站变灰，悼念代码发表时间：2016-07-04, 16:46:31

展开↯

#²⁴¹⁸

作者：广西南宁市

CSS

reset.css
clearfix
placeholder
文本省略号
重置默认行为
重置按键样式
横竖屏判断
全站变灰

文章：全站变灰，悼念代码发表时间：2016-07-04, 16:38:43

展开↯

#²⁴¹⁹

作者：广西南宁市

设备竖屏时调用该段css代码：

@media all and (orientation : portrait){

}

Run code

Cut to clipboard

设备横屏时调用该段css代码：

@media all and (orientation : landscape){

}

Run code

Cut to clipboard

文章：全站变灰，悼念代码发表时间：2016-07-04, 16:38:07

展开↯

#²⁴²⁰

作者：广西南宁市

去除表单自动填充颜色(Chrome浏览器)

input:-webkit-autofill {
  background-color: #FAFFBD;
  background-image: none;
  color: #000;
}

Run code

Cut to clipboard

去除按键圆角(iPhone)

-webkit-appearance:none;

Run code

Cut to clipboard

去除搜索按键(Chrome浏览器)

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{
  -webkit-appearance: none;
}

Run code

Cut to clipboard

去除数字输入框增减按键(Chrome浏览器)

input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
}

Run code

Cut to clipboard

去除date类型文本框多了个叉叉清除内容的效果(Chrome浏览器)

::-webkit-clear-button {
    -webkit-appearance: none;
 }

Run code

Cut to clipboard

去除按键虚线框(Firefox浏览器)

button::-moz-focus-inner,input::-moz-focus-inner{

}

Run code

Cut to clipboard

改变password类型input框的默认样式(IE浏览器)

::-ms-reveal{display: none; }
::-ms-reveal{background-color:#f0f3f9; }

Run code

Cut to clipboard

设置默认线框距离

input {outline-offset: 4px ;}

Run code

Cut to clipboard

input字体垂直居中

font-family: Tahoma,Arial, Helvetica,"Microsoft YaHei";

Run code

Cut to clipboard

文章：全站变灰，悼念代码发表时间：2016-07-04, 16:37:18

展开↯

#²⁴²¹

作者：广西南宁市

禁用鼠标

pointer-events: none;

Run code

Cut to clipboard

禁止文本选中

-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;

Run code

Cut to clipboard

自定义文本选择

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

Run code

Cut to clipboard

禁用输入法

ime-mode:disabled;

Run code

Cut to clipboard

隐藏IE10默认在input框输入内容后显示“X”按钮

pointer-events: none;

Run code

Cut to clipboard

文章：全站变灰，悼念代码发表时间：2016-07-04, 16:36:08

展开↯

#²⁴²²

作者：广西南宁市

文本超出省略号

display:block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Run code

Cut to clipboard

多行文本超出省略号

display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;

Run code

Cut to clipboard

文章：全站变灰，悼念代码发表时间：2016-07-04, 16:35:02

展开↯

#²⁴²³

作者：广西南宁市

Chrome浏览器(webkit)

::-webkit-input-placeholder {
  color: #999;
}

Run code

Cut to clipboard

注：webkit下在文本框获取焦点后不显示placeholder，以便使其与其他浏览器表现一致

:focus::-webkit-input-placeholder {
  color: transparent !important;
}

Run code

Cut to clipboard

Firefox浏览器

/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
  color: #999;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
  color: #999;
}

Run code

Cut to clipboard

IE浏览器

/* Internet Explorer 10+ */
:-ms-input-placeholder {
  color: #999;
}

Run code

Cut to clipboard

文章：全站变灰，悼念代码发表时间：2016-07-04, 16:34:18

展开↯

#²⁴²⁴

作者：广西南宁市

常用的清除浮动方法:

方案一

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

Run code

Cut to clipboard

方案二

.clearfix:before, .clearfix:after {
  content:"";
  display:table;
}
.clearfix:after{
  clear:both;
  overflow:hidden;
}
.clearfix{
  zoom:1;
}

Run code

Cut to clipboard

文章：全站变灰，悼念代码发表时间：2016-07-04, 16:33:11

展开↯

#²⁴²⁵

作者：广西南宁市

YUI的方案重置css代码reset.css

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

Run code

Cut to clipboard

文章：全站变灰，悼念代码发表时间：2016-07-04, 16:15:16

展开↯

#²⁴²⁶

作者：广西南宁市

永远带着最大的善意思考问题

文章：我看过一个故事发表时间：2016-07-04, 11:35:57

展开↯

#²⁴²⁷

作者：广西南宁市

英国脱欧

文章：我看过一个故事发表时间：2016-07-04, 10:53:10

展开↯

#²⁴²⁸

作者：广西南宁市

「在吗？」其实是「TEST」的现代汉语译文。

文章：我看过一个故事发表时间：2016-07-04, 10:50:20

展开↯

#²⁴²⁹

作者：广西南宁市

老婆带爸妈出去吃饭绝对遇到富豪了，他们快吃完了一个男人走过来说：你们不用买单，吃完直接走吧，我坐这里结账。原来那男的一家在外面等着，队伍还好长，老婆等不及了……第一次知道人可以这样有钱。

文章：我看过一个故事发表时间：2016-07-04, 10:48:28

展开↯

#²⁴³⁰

作者：广西南宁市

一件事有千百种结果，我通常会陷入最坏的那一种，无法自拔。

文章：我看过一个故事发表时间：2016-07-04, 09:33:31

展开↯

#²⁴³¹

作者：北京市

根据种种定理，一个人如果绕着树做光速运动，那么他就能和自己做交易。

文章：我身边有个这样的人发表时间：2016-07-03, 11:59:31

展开↯

#²⁴³²

作者：北京市

20岁的贪玩,造就了30岁的无奈。30岁的无奈,导致了40岁的无为! 40岁的无为,奠定了50岁的失败。50岁的失败,酿造了一辈子的碌碌无为! 古语云: 三十不立,四十不富,五十而衰靠子助。请不要在该奋斗的年纪选择了安逸。你不努力,想拉你一把,都找不到你的手在哪里。

文章：我身边有个这样的人发表时间：2016-07-02, 19:48:00

展开↯

Records:2787 128/147 «‹124 125 126 127 128 129 130 131 132 ›»