Article Detail

全站变灰，悼念代码

html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: gra...

HTML 阅读 40.2万 2 分钟阅读 2016-07-04 16:12

html{
    filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"grayscale\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: gray;
    -webkit-filter: grayscale(1);
}

Comments 评论区

广西南宁市 2016-07-04 16:15

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}

#⁰

广西南宁市 2016-07-04 16:33

常用的清除浮动方法:

方案一

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

方案二

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

#⁰

广西南宁市 2016-07-04 16:34

Chrome浏览器(webkit)

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

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

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

Firefox浏览器

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

IE浏览器

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

#⁰

广西南宁市 2016-07-04 16:35

文本超出省略号

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

多行文本超出省略号

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

#⁰

广西南宁市 2016-07-04 16:36

禁用鼠标

pointer-events: none;

禁止文本选中

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

自定义文本选择

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

禁用输入法

ime-mode:disabled;

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

pointer-events: none;

#⁰

广西南宁市 2016-07-04 16:37

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

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

去除按键圆角(iPhone)

-webkit-appearance:none;

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

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

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

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

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

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

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

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

}

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

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

设置默认线框距离

input {outline-offset: 4px ;}

input字体垂直居中

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

#⁰

广西南宁市 2016-07-04 16:38

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

@media all and (orientation : portrait){

}

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

@media all and (orientation : landscape){

}

#⁰

广西南宁市 2016-07-04 16:38

CSS

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

#⁰

广西南宁市 2016-07-04 16:46

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;
}

获取指定名称的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]);
  }
}

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

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

是否存在某个class

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

对节点增加class

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

对节点删除class

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

数组复制技巧

方法一

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

方法二

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

打乱数字数组的顺序

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

给数组创建一个随机项

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

数组追加

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

获得数组中的最大值

写法一

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

写法二

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

类数组转换成数组

写法一

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

写法二

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

字符串去重

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

字符串反序列化成JSON

eval方式解析

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

new Function形式

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

使用全局的JSON对象

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

获取某月天数

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

日期对象转换成时间戳

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

跨浏览器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;
}

获取选中文本内容

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;
    }
}

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

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

通用事件兼容框架：EventUtil

取消浏览器默认行为

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

阻止事件冒泡

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

模拟触发点击事件

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)

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

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

抛出

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

说明

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

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

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

用该方法创建了 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
}

简单的克隆：

方法一

obj = eval(uneval(o));

方法二(系列化对象)

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

数组深度克隆

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
}

函数深度克隆

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;
}

电子邮箱

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

固定电话

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

手机号码

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

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}$/

域名

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

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]);
  }
})();

横屏监听

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);

根据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;
    }
}());

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

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。