2016年7月 – 爱梦小屋

如何让padding不影响width？box-sizing 帮到您

/*
*/
div{box-sizing:border-box}

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。

点击input，button会有外发光？我来帮你去掉

css

/*
*/

button{outline:inherit;}

input,textarea{-webkit-appearance:none;}

改变滚动条scroll样式

原文地址：php100

来源：WEB骇客

webkit-css部分

/*
*/
::-webkit-scrollbar {
		  width: 5px;
		  height:5px;
	} /* 这是针对缺省样式 (必须的) */
::-webkit-scrollbar-track {
		  background-color: #eee;
	} /* 滚动条的滑轨背景颜色 */

	::-webkit-scrollbar-thumb {
		  background-color: #666; 
	} /* 滑块颜色 */

	::-webkit-scrollbar-button {
		  display:none;
	} /* 滑轨两头的监听按钮颜色 */

	::-webkit-scrollbar-corner {
		  background-color: #eee;
	} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

来源：caliban

firefox办法

/*
*/
/* AGENT_SHEET */
/* 应用于所有情况 
@-moz-document url-prefix(chrome://), url-prefix(about:), 
url-prefix(file:///), url-prefix(http://), url-prefix(https://){
*/
/* 滚动条背景基本样式 */
scrollbar{
-moz-appearance: none !important;
background-color: transparent !important;/* 滚动条背景透明 */
background-image: none !important; /* 滚动条背景图案不显示 */
position: relative !important; /* 更改滚动条的定位方式为相对 */
overflow: hidden !important;
z-index: 999999999 !important; /* 把滚动条提到Z轴最上层 */
}

/* 滚动条按钮基本样式 */
scrollbar thumb{
-moz-appearance: none !important;
background-color: rgba(0,100,255,.25) !important;
border-radius: 0px !important;
border: 1px !important; /* 滚动条按钮边框 */
border-color: rgba(0,100,255,.1) !important;  /* 滚动条按钮边框颜色和透明度 */
}

/* 滚动条按钮:鼠标悬停与点击拖动时基本样式 */
scrollbar:hover thumb,
scrollbar thumb:hover,
scrollbar thumb:active {
background-color: rgba(0,100,255,.75) !important;
border: 0px !important;
}

/* 垂直滚动条 */
/* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
scrollbar[orient="vertical"]{ margin-left: -5px !important; 
min-width: 5px !important; max-width: 5px !important;
}

/* 垂直滚动条按钮的左边框样式 */
scrollbar thumb[orient="vertical"]{
border-style: none none none solid !important; 
}

/* 水平滚动条 */
/* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
scrollbar[orient="horizontal"]{ margin-top: -5px !important; 
min-height: 5px !important; max-height: 5px !important;
}

/* 水平滚动条按钮的上边框样式 */
scrollbar thumb[orient="horizontal"]{
border-style: solid none none none !important; 
}

/* 去除垂直与水平滚动条相交汇的角落 */
scrollbar scrollcorner{display: none ! important; }

/* 滚动条两端按钮不显示 */
scrollbar scrollbarbutton { display: none ! important; }
/* 滚动条两端按钮，需要先删掉上面一行 
scrollbarbutton{ -moz-appearance: none !important;
position: relative !important;
overflow: hidden !important;
background-color: rgba(0,100,255,.25) !important;
border: none !important; 
}
scrollbar:hover scrollbarbutton, scrollbar scrollbarbutton:hover{
background-color: rgba(0,100,255,.75) !important;
}
/* 竖滚动条两端按钮的高度 
scrollbar[orient="vertical"] scrollbarbutton {
max-height:10px !important; min-height:10px !important;
}
/* 横滚动条两端按钮的宽度 
scrollbar[orient="horizontal"] scrollbarbutton {
max-width: 10px !important; min-width: 10px !important;
}

  */

/*
} */

来源：http://www.w3cways.com/1670.html

IE浏览器css设置滚动条

滚动条样式	支持情况	支持浏览器版本	可否继承	描述
scrollbar-3dlight-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-highlight-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头左上边缘的颜色
scrollbar-face-color	IE特有属性	IE5.5+	y	设置滚动框和滚动条箭头的颜色
scrollbar-arrow-color	IE特有属性	IE5.5+	y	设置滚动条箭头的颜色
scrollbar-shadow-color	IE特有属性	IE5.5+	y	设置滚动框的和滚动条箭头右下边缘的颜色
scrollbar-dark-shadow-color	IE特有属性	IE5.5+	y	设置滚动条槽的颜色
scrollbar-base-color	IE特有属性	IE5.5+	y	设置滚动条主要构成部分的颜色
scrollbar-track-color	IE特有属性	IE5.5+	y	设置滚动条轨迹组成部分的颜色

node.js 阻塞式、非阻塞式（同步、异步处理）

//input.txt内容

测试文字

阻塞式（同步）

var fs = require("fs");

var data = fs.readFileSync('input.txt');

console.log(data.toString());
console.log("程序执行结束!");

//输出
测试文字
程序执行结束!

非阻塞式（）

var fs = require("fs");

fs.readFile('input.txt', function (err, data) {
   if (err){
      console.log(err.stack);
      return;
   }
   console.log(data.toString());
});
console.log("程序执行完毕");

//输出
程序执行完毕
测试文字

获取监听器事件数量

var events = require('events');
var eventEmitter = new events.EventEmitter();

// 监听器 #1
var listener1 = function listener1() {
   console.log('监听器 listener1 执行。');
}

// 监听器 #2
var listener2 = function listener2() {
  console.log('监听器 listener2 执行。');
}

// 绑定 connection 事件，处理函数为 listener1 
eventEmitter.addListener('connection', listener1);

// 绑定 connection 事件，处理函数为 listener2
eventEmitter.on('connection', listener2);

var eventListeners = require('events').EventEmitter.listenerCount(eventEmitter,'connection');
console.log(eventListeners + " 个监听器监听连接事件。");

输出

2 个监听器监听连接事件。
监听器 listener1 执行。
监听器 listener2 执行。

屏幕滚动到所点之处

/*
*/
$("input").focus(function(even){
		var bu =($(document).scrollTop()-this.offsetTop<window.screen.availHeight/2)?-200:200;
		window.scrollTo(0,this.offsetTop+bu);
	})

隐藏select的三角

/* 
*/
select{
        appearance:none;
	-moz-appearance:none; 
	-webkit-appearance:none;
	line-height:100%;
}

mate自适应页面

原文地址：孤独大兔子

<meta name=”viewport” content=”” />

在content属性中主要包括以下属性值，用来处理可视区域。

viewport 语法介绍：
01      <!-- html document -->
02      <meta name="viewport"
03          content="
04          height = [pixel_value | device-height] ,
05          width = [pixel_value | device-width ] ,
06          initial-scale = float_value ,
07          minimum-scale = float_value ,
08          maximum-scale = float_value ,
09          user-scalable = [yes | no] ,
10          target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
11          "
12      />

width
控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height
和 width 相对应，指定高度。

target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。下面是 target-densitydpi 属性的取值范围

device-dpi –使用设备原本的 dpi 作为目标 dp。不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。高像素密度设备相应放大，像素密度设备相应缩小。这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
<value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

1 ???? 
2 ???? <meta name="viewport" content="target-densitydpi=device-dpi" />
3 ???? <meta name="viewport" content="target-densitydpi=high-dpi" />
4 ???? <meta name="viewport" content="target-densitydpi=medium-dpi" />
5 ???? <meta name="viewport" content="target-densitydpi=low-dpi" />
6 ???? <meta name="viewport" content="target-densitydpi=200" />

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。

initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。

maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。

user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。所有的缩放值都必须在0.01–10的范围之内。

例：

(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,user-scalable=no" />

(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

不用for就能循环/遍历？map() / apply() / forEach()

"We are champion"判断字符串中最长单词的长度

先上代码

/*
*/
var src="We are champion";
var arr=src.split(" ").map(function(even){retrun even.length});
console.log(Math.max.apply(this , arr))

然后才是废话

对象.map(callback(index,domElement))

对象可以是数组，或者jq数组，毕竟map()是jq的遍历函数

返回也是jquery数组，因此需要直接调用并输出请

/*
*/
src.split(" ").map(function(even){return even.length}).get().join(',');

//输出结果
2,3,8

对象.apply(this arr)

这个我还没理解……

对象.forEach()

Firefox 和Chrome 的Array 类型都有forEach的函数。使用如下：

/*
*/
arryAll.forEach(function(e){  
    alert(e);  
})

但是IE不支持

因为IE的Array 没有这个方法

所以要做兼容函数

/*
*/
//Array.forEach implementation for IE support..  
//https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach  
if (!Array.prototype.forEach) {  
    Array.prototype.forEach = function(callback, thisArg) {  
        var T, k;  
        if (this == null) {  
            throw new TypeError(" this is null or not defined");  
        }  
        var O = Object(this);  
        var len = O.length >>> 0; // Hack to convert O.length to a UInt32  
        if ({}.toString.call(callback) != "[object Function]") {  
            throw new TypeError(callback + " is not a function");  
        }  
        if (thisArg) {  
            T = thisArg;  
        }  
        k = 0;  
        while (k < len) {  
            var kValue;  
            if (k in O) {  
                kValue = O[k];  
                callback.call(T, kValue, k, O);  
            }  
            k++;  
        }  
    };  
}

月度归档： 2016年7月