全站变灰，悼念代码

发布时间：2016-07-04, 16:12:38 分类：HTML | 编辑 off 网址 | 辅助

正文 675字数 388,985阅读

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

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

标签: 全站1 变灰1 悼念1

有过 9 条评论 »

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

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

reply | quote | #¹

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

常用的清除浮动方法:

方案一

.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

reply | quote | #²

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

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

reply | quote | #³

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

文本超出省略号

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

reply | quote | #⁴

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

禁用鼠标

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

reply | quote | #⁵

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

去除表单自动填充颜色(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

reply | quote | #⁶

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

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

@media all and (orientation : portrait){

}

Run code

Cut to clipboard

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

@media all and (orientation : landscape){

}

Run code

Cut to clipboard

reply | quote | #⁷

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

CSS

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

reply | quote | #⁸

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

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

reply | quote | #⁹

Records:9 1/1 «‹1 ›»

lizhenqiu blog

全站变灰，悼念代码

相关日志

有过 9 条评论 »

留下評論