JS原生第五篇（帅哥）

1.1 节点

1. 节点网页是有很多的节点组成的。

元素节点指的是：标签 li span

文本节点属性节点

父子兄弟父 parentNode nextSibling

孩子 childNodes nodeType == 1 来判断是否是元素节点

<ul>

<li>

最喜欢用的 children 只得到元素节点

1.获取节点属性 getAttribute（“title”）

2.设置节点属性 setAttribute (“class”,”one”)

3.删除节点属性 removeAttribute(“title”)；

4. 日期函数 Date();

声明: var date = new Date();

使用: 得到现在的年分 date.getFullYear();

月份: date.getMonth();

日子; date.getDate();

星期： date.getDay();

5. 定时器

定时器不需要人工操作按照一定的时间进行某种动作。

setInterval(“函数”,间隔时间 ) 每隔 n秒去执行一次函数

1.2 时钟案例

分两步进行的。

第一步：要得到现在的时分秒

但是这里面有一个小玄机。

比如现在是 9点整时针指向 9 是没错的

但是如果现在是 9点半时针应该指向的是 9到10 之间才对

所以，我们不但要得到现在的小时，还要得到已经过去了多少分

ms = date.getMilliseconds(); // 现在的毫秒数
s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s
m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟
h = date.getHours() % 12 + m / 60 ;

旋转角度原理

秒针一秒走多少度呢？

一圈 360 ° 一共有 60 秒每秒 6 °

分针一圈 360 一圈走 60次每次 6° 每分钟 6°

时针一圈 360 一共 12 个表盘没有24小时每个小时走 30°

完整代码：

1 <script>

2 var hour = document.getElementById("hour");

3 var minute = document.getElementById("minute");

4 var second = document.getElementById("second");

5 // 开始定时器

6 var s = 0,m = 0, h = 0, ms = 0;

7 setInterval(function() {

8 // 内容就可以了

9 var date = new Date(); // 得到最新的时间

10 ms = date.getMilliseconds(); // 现在的毫秒数

11 s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s

12 m = date.getMinutes() + s / 60; // 得到的是分数 45.6分钟

13 h = date.getHours() % 12 + m / 60 ;

14 // console.log(h);

15 // 旋转角度

16 // 一圈 360 ° 一共有 60 秒每秒 6 ° 现在是 s秒

17 second.style.WebkitTransform = "rotate("+ s*6 +"deg)";

18 // 变化旋转 deg 度

19 minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";

20 hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";

21 second.style.MozTransform = "rotate("+ s*6 +"deg)";

22 // 变化旋转 deg 度

23 minute.style.MozTransform = "rotate("+ m*6 +"deg)";

24 hour.style.MozTransform = "rotate("+ h*30 +"deg)";

26 },30);

27 </script>

1.3 按钮不可用

button 不可以用 disabled 不可用的意思

btn.disabled = “disabled” || btn.disabled = true;

灰色的

注意：

因为 button是个双标签所以要更改他的值，使用 innerHTML 的，不是value。
关闭定时器 clearInterval(定时器名称); 定时器不再进行

1.4 this

this 指向的是事件的调用者，或者是函数的使用者。

var btn.onclick = function() { this}

一般情况下，我们喜欢 var that = this;

var that = this; // 把 btn 对象给 that var _this = this;

1.5 定时器之 setTimeout()

时间去哪儿了类似于定时炸弹。。

setTimeout(“函数”, 时间 )

setInterval(fn,5000); 每隔 5秒钟，就去执行函数fn一次

setTimeout(fn,5000); 5秒钟之后，去执行 fn 函数，只执行一次

1.5.1 深层次的看待定时器区别

setInterval是排队执行的

假如间隔时间是1秒，而执行的程序的时间是2秒上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒

setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒.

1.6 5秒钟自动跳转页面

JS 页面跳转: window.location.href = ”http://www.itcast.cn” ; BOM

函数自己调用自己的过程我们称之为：递归调用自残

但是这样用，一定要加一个退出 if 的条件，不然成为死循环了。

目的就是为了，模拟使用 settimeout 来实现setinterval 的效果。

辞海 10万字 2500 汉字 1000次常用汉字

1.6.1 arguments 对象

function fn(a,b,c) { console.log(a+b+c); alert(arguments.length;)}

fn(1,3,4,6);

arguments.length; 返回的是实参的个数。

但是这个对象有讲究，他只在正在使用的函数内使用。

arguments.callee;

返回的是正在执行的函数。也是在函数体内使用。在使用函数递归调用时推荐使用arguments.callee代替函数名本身。

function fn() { console.log(arguments.callee); }

这个callee 就是： function fn() { console.log(arguments.callee); }

1.7 运算符

一元操作符 ++， -- + - +5 -6

逻辑操作符 ! && ||

基本运算符 +, -, *, /, %

关系操作符 >, <, >=, <=, ===, ==, !=, !==

= 赋值 == 判断 === 全等

条件操作符（三元运算符） ? :

赋值运算符 +=, -=, *=, /=, %=

a+=5 a= a + 5

逗号运算符 , var a=0,b=0;

1.7.1 运算符顺序

1 ()

2 !、-、++、-- (-10) 负号正号

3 *、/、%

4 +、- 10-5

5 <、<=、<、>=

6 ==、!=、===、!==、

7 &&

8 ||

9?:

10 =、+=、-=、*=、/=、%= 赋值

1+2*3

1.7.2 几个面试题

1. a&&b 结果是什么？

如果a 为假，则返回 a

如果a 为真，则返回 b

var aa = 0&&1;

alert(aa) // 0

var bb = 1&&0;

alert(bb); //0

var cc = 1&&10;

alert(cc); // 10

a||b

如果 a 为假则返回b

如果 a 为真则返回a

console.log(0||1);   1
console.log(1||0);   1
console.log(1||5);   1
console.log(5||1);   5

var a = 1 && 2 && 3;

console.log(a); 3

var b = 0 && 1 && 2;

console.log(b); 0

var c = 1 && 0 && 2;

console.log(c); 0

a+=3

a = a % 3;

1.8 字符串对象常用方法

我们工作中经常进行字符串操作。

1.8.1 转换为字符串

1. + “” 2+ “” = “2” 2+”ab” = “2ab”

2. String() 转换为字符串

3. toString（基数） ; 基数就是进制

var txt = 10;

txt.toString(2) 二进制 1010

1.8.2 获取字符位置方法

charAt，获取相应位置字符（参数：字符位置）

charCodeAt获取相应位置字符unicode编码（参数：字符位置）

var txt = “abcedf”;

比如， txt.charAt(4); 索引号一定是从0开始返回的结果是 d

我们根据我们输入的位数返回相应的字符。

unicode编码是我们字符的字符的唯一表示。