0x0A

Summer Training Day 11.

画钟
this


clock


ummmmm..
没什么可说的,css设置好html,body,canvas位置关系之后,剩下的就是js.
先画底圆,然后刻度,然后秒分时针,最后中间点.计时器setIinterval(function,1000);
1秒一次,内部先clear再draw.一开始先draw一次让网页刷新就有东西.
具体实现利用了许多数学的东西,简单但麻烦.


强烈推荐colorhunt配色网站
以及Webgradients渐变色网站


this

this的四种用法:

直接调用.

this指向全局对象.

1
2
3
4
5
 var x = 1;
 function test(){
   consloe.log(this.x);
 }
 test(); // 1(非严格模式下)

this.x就是window.x.
改一改:

1
2
3
4
5
6
 var x = 1;
 function test(){
   this.x = 0;
 }
 test();
 console.log(x); //0,改了全局x.

高难度直接调用:

1
2
3
4
5
6
7
8
9
10
11
12
var name = "the window";
var object = {
name : "my object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
console.log(object.getNameFunc()()); //"the window"(非严格模式下)

第一个return返回的是函数,即object.getNameFunc()接收的是一个匿名函数( 记object.getNameFunc()为a ),第二个括号a()相当于直接调用.
a()里面的this当然是指向全局.
若要访问object内部的name.

1
2
3
4
5
6
7
8
9
10
11
12
13
var name = "the window";
var object = {
name : "my object",
getNameFunc : function(){
var that = this; //此时this指向object
return function(){//这个return匿名函数是全局调用的,但是里面是之前保存的that不是this,故输出my object.
return that.name;
};
}
}; //另外,在构建闭包(匿名函数)全局调用getNameFunc的时候访问了内部变量that,此时that仍然引用着object.
console.log(object.getNameFunc()()); //"my object"

或者更简单地:

1
2
3
4
5
6
7
8
9
10
11
12
var name = "the window";
var object = {
name : "my object",
getNameFunc : function(){
return this.name;//毫无悬念地指向object
}
};
console.log(object.getNameFunc()); //"my object"
(object.getNameFunc = object.getNameFunc)(); //"the window"
//为什么这里又输出the window?原因是这是赋值表达式,赋值后是函数本身,相当于a(),全局调用.


方法调用.

作为对象方法调用.

1
2
3
4
5
6
7
8
function test(){
  console.log(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
//这里m变成test方法.

call,apply,bind

显而易见地改变了this的值指向新值.

new

使用new的具体步骤中有改变this指向空对象这一步.



以上.