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指向空对象这一步.


以上.