1.2 复习 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.3 时钟案例 分两步进行的。 第一步: 要得到现在的 时 分 秒 但是这里面有一个小玄机 。 比如现在是 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)"; 25 26 },30); 27 </script> 1.4 按钮不可用 button 不可以用 disabled 不可用的意思 btn.disabled = “disabled” || btn.disabled = true; 灰色的 注意: 1. 因为 button是个双标签 所以要更改他的值, 使用 innerHTML 的,不是value。 2. 关闭定时器 clearInterval(定时器名称); 定时器不再进行 1.5 this this 指向的是 事件的调用者 ,或者是函数的使用者。 var btn.onclick = function() { this} 一般情况下,我们喜欢 var that = this; var that = this; // 把 btn 对象 给 that var _this = this 1.6 定时器之 setTimeout() 时间去哪儿了 类似于定时炸弹 。。 setTimeout(“函数”, 时间 ) setInterval(fn,5000); 每隔 5秒钟,就去执行函数fn一次 setTimeout(fn,5000); 5秒钟之后,去执行 fn 函数, 只执行一次 1.6.1 深层次的看待定时器区别 setInterval是排队执行的 假如 间隔时间是1秒, 而执行的程序的时间是2秒 上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒 setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒. 1.7 5秒钟自动跳转页面 JS 页面跳转: window.location.href = ”http://www.itcast.cn” ; BOM 函数自己调用自己的过程 我们称之为 : 递归调用 自残 但是这样用,一定要加一个退出 if 的条件,不然成为死循环了。 目的就是为了,模拟使用 settimeout 来实现setinterval 的效果。 <script> var demo = document.getElementById("demo"); var count = 5; var speed = 1000; setTimeout(goIndexPage,speed); // 1秒钟之后去执行 goIndexPage这个函数 function goIndexPage() { count--; demo.innerHTML = "<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>"; if(count <= 0) { // 如果 count 小于 0 就到了时间了 我们应该跳转页面 window.location.href = "http://www.baidu.com"; } else { setTimeout(goIndexPage,speed); // 递归调用 自己调用自己 } } 辞海 10万字 2500 汉字 1000次常用汉字 1.7.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.8 运算符 一元操作符 ++, -- + - +5 -6 逻操作符 ! && || 基本运算符 +, -, *, /, % 关系操作符 >, <, >=, <=, ===, ==, !=, !== = 赋值 == 判断 === 全等 条件操作符 (三元运算符) ? : 赋值运算符 +=, -=, *=, /=, %= a+=5 a= a + 5 逗号运算符 , var a=0,b=0; 1.8.1 运算符顺序 1 () 2 !、-、++、-- (-10) 负号 正号 3 *、/、% 4 +、- 10-5 5 <、<=、<、>= 6 ==、!=、===、!==、 7 && 8 || 9?: 10 =、+=、-=、*=、/=、%= 赋值 1+2*3 1.8.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 2. 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.9 字符串对象常用方法 我们工作中经常进行字符串操作。 1.9.1 转换为字符串 1. + “” 2+ “” = “2” 2+”ab” = “2ab” 2. String() 转换为字符串 3. toString(基数) ; 基数就是进制 var txt = 10; txt.toString(2) 二进制 1010 1.9.2 获取字符位置方法 charAt,获取相应位置字符(参数: 字符位置) charCodeAt获取相应位置字符unicode编码(参数: 字符位置) var txt = “abcedf”; 比如, txt.charAt(4); 索引号一定是从0开始 返回的结果是 d 我们根据我们输入的 位数 返回相应的 字符 。 unicode编码 是我们字符的字符的唯一表示 。