yanzhihong23
- 浏览: 59172 次
- 性别:
- 来自: 上海
-
最新评论
-
yzq21056563：
感谢作者分享~请教下，web前端中文站里的 http://ww ...
多行文字溢出[...]的实现(text-overflow: ellipsis) -
yanzhihong23：
樱井智树 写道 楼主可以详细解释下原理么？乍一看经验不足真心不 ...
JS数组的去重与降维 -
樱井智树：
楼主可以详细解释下原理么？乍一看经验不足真心不怎么看得出来 ...
JS数组的去重与降维 -
yanzhihong23：
e421083458 写道十分感谢！试验成功了！发现没？！你是 ...
CSS 用图片替换checkbox样式 -
e421083458：
十分感谢！试验成功了！
CSS 用图片替换checkbox样式
文章列表
// 1. sheep produce next generation on 2th and 4th year
// 2. sheep dies on 5th year
// 3. calculate total amount on certain year
var sheepfold = [],
index = 0,
amount;
function Sheep() {
this.age = 1;
this.index = index++;
}
Sheep.prototype.grow = function() {
this.ag ...
<div my-directive
my-url="http://google.com"
my-link-text="Click me to go to Google"></div>
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
...
word-break
- 博客分类：
- css3
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
JS数组的去重与降维
- 博客分类：
- JavaScript
去重：
创建一个空数组和一个空对象，在for循环中，每次取出一个元素，检测是否已经是对象的key，如果不存在就加入到新建的数组中。
降维：
由于不能给this赋值，所以先将数组赋值给that。在for循环中，每次取出一个元素，检测是否是数组。如果是，把数组拆分成3个部分：当前元素之前所有元素组成的数组、当前元素（也是数组）、当前元素之后的所有元素组成的数组。用concat将这三个数组重新合并为一个新数组，由于for循环会index+1，把当前的index-1，保持index不变，重新做一次检测。因为当前元素这个数组里面的第一个元素也可能还是一个数组。
// 去重
...
两种交换排序：冒泡排序与快速排序
- 博客分类：
- JavaScript
冒泡排序
基本思想：把数组垂直排列，把各项的值当作气泡的重量。根据轻气泡不能在重气泡之下的原则，从下往上扫描数组：凡扫描到违反本原则的轻气泡，就使其向上“漂浮”。如此反复进行，直到最后两个气泡都是轻者在上，重者在下为止。
function bubbleSort(arr){
var len = arr.length, i, j, temp;
var exchange = false;
for(i = 0; i < len; i++){
exchange = false;
for(j = len-1; j > i; j--){
if(j & ...
计算CSS选择器的特性(选择器优先级)
- 博客分类：
- css3
下面是W3官方的描述
A selector's specificity is calculated as follows:
count the number of ID selectors in the selector (= a)
count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
count the number of type selectors and pseudo-elements in the selector (= c)
...
css selector 选择器
- 博客分类：
- css3
父子兄弟
a > b b必须是a的子元素
a + b b必须紧跟在其同胞标签a的后面
a ~ b b必须跟（不一定紧跟）在其同胞标签a的后面
* 有个非常有意思的用法，即非子选择符
a * b 任何是a孙子元素，而非子元素的b标签都会被选中
在HTML5中，属性值的引号可加可不加
UI伪类
链接伪类
a::link
a::visited
a::hover
a::active
如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期结果，建议大家可以这 么想：“LoVe? HA! ”
...
Web Workers 网页工人线程
- 博客分类：
- JavaScript
自JavaScript 诞生以来，还没有办法在浏览器 UI线程之外运行代码。网页工人线程API 改变了这种状
况，它引入一个接口，使代码运行而不占用浏览器UI线程的时间。作为最初的HTML 5 的一部分，网页
工人线程API 已经分离出去成为独立的规范（http://www.w3.org/TR/workers/ ）。
网页工人线程对网页应用来说是一个潜在的巨大性能提升，因为新的工人线程在自己的线程中运行
JavaScript。这意味着，工人线程中的代码运行不仅不会影响浏览器 UI，而且也不会影响其它工人线程中
运行的代码。
由于网页工人线程不绑定 UI线程，这也意味着它 ...
关于JS预解析一道题
- 博客分类：
- JavaScript
var i=10;
var j=3;
function a() {
console.log(i);//undefined
console.log(j);//3
var i = 2;
console.log(i);//2
};
a();
原来JS在执行过程之前，会对【var】和【function】定义做“预解析”。
解析引擎以块为单位级别，执行所有Var变量的创建，并赋予一个初始值undefined。
当a执行时，它的执行环境中有i的声明，所以不会使用作用域链上的全局变量i——这个i是初始化了，但是不用它。当运行第一个con ...
rem (root em)
- 博客分类：
- css3
rem ( root em) units
Type of unit similar to "em", but relative only to the root element, not any parent element. Thus compounding does not occur as it does with "em" units.
Here is an example. If we want to set the font-size of span under p to be 12px.
html { fon ...
对于单行文字, 很简单.
.oneLine {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持.
.twoLine {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-cla ...
hide keyboard
- 博客分类：
- JavaScript
var hideKeyboard = function() {
document.activeElement.blur();
$("input").blur();
};
非直角arrow(箭头) 的两种实现
- 博客分类：
- css3
1) rotate + skew
原理：箭头的两边就是一个透明div的border，通过skew扭转成需要的角度，再通过rotate把箭头摆正。
<div id="arrow">
<span></span>
</div>
#arrow{
-webkit-transform: rotate(-51deg);
width: 35px;
height: 35px;
}
#arrow span{
display: block;
-webkit-transform: ske ...
51cto上看到的一个前端面试题（http://developer.51cto.com/art/201206/345184.htm）
要实现的效果：
里面的要求是用js，顺便也加了css的实现。最关键的呢，就是z-index.
<head>
<style>
body{ margin:0; padding:0}
div{background:#CCCCCC; position:absolute}
#first{width:100px; height:150px}
#second{top:1 ...
ECMAScript 继承机制实现
- 博客分类：
- JavaScript
一直没明白call()，所以找个一下资料，终于呢，是理清了，简单点说呢，就俩字“继承”。
直接上代码了
function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
alert(this.color);
};
}
对象冒充
（object masquerading）
function ClassB(sColor, sName) {
this.newMethod = ClassA;
...