JavaScript基础视频教程总结（131-140章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>131-140章总结</title> </head> <body> <pre> 131. 定时器的应用1 </pre> <style type="text/css"> #box1 { width: 100px; height: 100px; background-color: red; position: absolute; left: 0; } </style> <button id="btn01">点击按钮以后box1向右移动</button> <div class="" style="position: relative;height: 200px;"> <div id="box1"></div> </div> <script type="text/javascript"> console.log("第131"); var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); var timer1; btn01.onclick = function(){ clearInterval(timer1); timer1 = setInterval(function(){ var oldValue = parseInt(getStyle(box1,"left")); var newValue = oldValue + 10; if(newValue > 800){ newValue = 800; } box1.style.left = newValue + "px"; if(newValue == 800){ clearInterval(timer1); } },30); }; /* * 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj , name) { if(window.getComputedStyle){ //正常浏览器的方式，具有 getComputedStyle()方法 return getComputedStyle(obj , null)[name]; } else { //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } } </script> <pre> 132. 定时器的应用2 </pre> <div class="" style="position: relative;height: 200px;"> <button id="btn21">点击按钮以后box1向右移动</button> <button id="btn22">点击按钮以后box1向左移动</button> <br /><br /> <div id="box21" style="width: 100px;height: 100px;background-color: #ddd;position: absolute;"></div> </div> <script type="text/javascript"> console.log("第132"); var box21 = document.getElementById("box21"); var btn21 = document.getElementById("btn21"); var btn22 = document.getElementById("btn22"); //点击按钮以后，使box1向右移动（left值增大） btn21.onclick = function(){ move(box21 , 800 , 10); }; //点击按钮以后，使box1向左移动（left值减小） btn22.onclick = function(){ move(box21 , 0 , 10); }; //定义一个变量，用来保存定时器的标识 var timer2; //尝试创建一个可以执行简单动画的函数 /* * 参数： * obj:要执行动画的对象 * target:执行动画的目标位置 * speed:移动的速度(正数向右移动，负数向左移动) */ function move(obj , target ,speed){ // 关闭上一个定时器 clearInterval(timer2); // 获取元素目前的位置 var current = parseInt(getStyle(obj,"left")); //判断速度的正负值 //如果从0 向 800移动，则speed为正 //如果从800向0移动，则speed为负 if(current > target){ //此时速度应为负值 speed = -speed; } //开启一个定时器，用来执行动画效果 timer2 = setInterval(function(){ //获取obj的原来的left值 var oldValue = parseInt(getStyle(obj,"left")); //在旧值的基础上增加 var newValue = oldValue + speed; //判断newValue是否大于800 //从800 向 0移动 //向左移动时，需要判断newValue是否小于target //向右移动时，需要判断newValue是否大于target if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){ newValue = target; } obj.style.left = newValue + "px"; //当元素移动到0px时，使其停止执行动画 if(newValue == target){ //达到目标，关闭定时器 clearInterval(timer2); } },30); } </script> <pre> 133. 定时器的应用3 </pre> <div class="" style="position: relative;height: 300px;"> <div><button id="btn31">点击多次变化</button></div><br /> <div id="box31" style="position: absolute;width: 100px;height: 100px;background-color: #5197ff;"></div> </div> <script type="text/javascript"> console.log("第133"); //尝试创建一个可以执行简单动画的函数 /* * 参数： * obj:要执行动画的对象 * attr:要执行动画的样式，比如：left top width height * target:执行动画的目标位置 * speed:移动的速度(正数向右移动，负数向左移动) * callback:回调函数，这个函数将会在动画执行完毕以后执行 */ function moveAni(obj, attr, target, speed, callback) { //关闭上一个定时器 clearInterval(obj.timer); //获取元素目前的位置 var current = parseInt(getStyle(obj, attr)); //判断速度的正负值 //如果从0 向 800移动，则speed为正 //如果从800向0移动，则speed为负 if(current > target) { //此时速度应为负值 speed = -speed; } //开启一个定时器，用来执行动画效果 //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识 obj.timer = setInterval(function() { //获取box1的原来的left值 var oldValue = parseInt(getStyle(obj, attr)); //在旧值的基础上增加 var newValue = oldValue + speed; //判断newValue是否大于800 //从800 向 0移动 //向左移动时，需要判断newValue是否小于target //向右移动时，需要判断newValue是否大于target if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) { newValue = target; } //将新值设置给box1 obj.style[attr] = newValue + "px"; //当元素移动到0px时，使其停止执行动画 if(newValue == target) { //达到目标，关闭定时器 clearInterval(obj.timer); //动画执行完毕，调用回调函数 callback && callback(); } }, 30); } var btn31 = document.getElementById("btn31") btn31.onclick = function(){ moveAni(box31,"width",200,10,function(){ moveAni(box31,"height",200,10,function(){ moveAni(box31,"left",50,10,function(){ }) }) }) } </script> <pre> 134. 完成轮播图界面 </pre> <pre> 135. 完成点击按钮切换图片 </pre> <pre> 136. 完成轮播图 </pre> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 520px; height: 333px; margin: 20px; background-color: greenyellow; padding: 10px 0; position: relative; overflow: hidden; } #imgList{ list-style: none; position: absolute; left: 0px; } #imgList li{ float: left; margin: 0 10px; } #navDiv{ position: absolute; bottom: 15px; } #navDiv a{ float: left; width: 15px; height: 15px; background-color: red; margin: 0 5px; opacity: 0.5; filter: alpha(opacity=50); } #navDiv a:hover{ background-color: black; } </style> <!-- 创建一个外部的div，来作为大的容器 --> <div id="outer"> <!-- 创建一个ul，用于放置图片 --> <ul id="imgList"> <li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li> <li><img src="images/3.jpg"/></li> <li><img src="images/4.jpg"/></li> <li><img src="images/5.jpg"/></li> </ul> <!--创建导航按钮--> <div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> <script type="text/javascript"> console.log("第134,135,136"); var imgList = document.getElementById("imgList"); var imgArr = document.getElementsByTagName("img"); imgList.style.width = 520*imgArr.length+"px"; var navDiv = document.getElementById("navDiv"); var outer = document.getElementById("outer"); navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px"; var index = 0; var allA = document.getElementsByTagName("a"); allA[index].style.backgroundColor = "black"; for(var i=0; i<allA.length ; i++){ allA[i].num = i; allA[i].onclick = function(){ index = this.num; setA(); moveAni(imgList , "left" , -520*index , 20 , function(){ autoChange(); }); }; } //开启自动切换图片 autoChange(); //创建一个方法用来设置选中的a function setA(){ //判断当前索引是否是最后一张图片 if(index >= imgArr.length - 1){ //则将index设置为0 index = 0; //此时显示的最后一张图片，而最后一张图片和第一张是一摸一样 //通过CSS将最后一张切换成第一张 imgList.style.left = 0; } for(var i=0 ; i<allA.length ; i++){ allA[i].style.backgroundColor = ""; } allA[index].style.backgroundColor = "black"; }; //定义一个自动切换的定时器的标识 var timer4; //创建一个函数，用来开启自动切换图片 function autoChange(){ //开启一个定时器，用来定时去切换图片 timer4 = setInterval(function(){ //使索引自增 index++; //判断index的值 index %= imgArr.length; //执行动画，切换图片 moveAni(imgList , "left" , -520*index , 20 , function(){ //修改导航按钮 setA(); }); },1500); } </script> <pre> 137. 类(class)的操作 </pre> <style type="text/css"> .b1{ width: 100px; height: 100px; background-color: red; } .b2{ height: 300px; background-color: yellow; } </style> <div class=""> <button id="btn71">点击按钮以后修改box的样式</button> <br /><br /> <div id="box71" class="b1"></div> </div> <script type="text/javascript"> console.log("第137"); var btn71 = document.getElementById("btn71") var box71 = document.getElementById("box71") btn71.onclick = function(){ //addClass(box71,"b2") toggleClass(box71,"b2") } // 定义一个函数，用来向一个元素中添加指定的class属性值 // 参数: obj 要添加class属性的元素,cn 要添加的class值 function addClass(obj , cn){ //检查obj中是否含有cn if(!hasClass(obj , cn)){ obj.className += " "+cn; } } // 判断一个元素中是否含有指定的class属性值 function hasClass(obj , cn){ //判断obj中有没有cn class //创建一个正则表达式 //var reg = /\bb2\b/; var reg = new RegExp("\\b"+cn+"\\b"); return reg.test(obj.className); } // 删除一个元素中的指定的class属性 function removeClass(obj , cn){ //创建一个正则表达式 var reg = new RegExp("\\b"+cn+"\\b"); //删除class obj.className = obj.className.replace(reg , ""); } // toggleClass可以用来切换一个类 function toggleClass(obj , cn){ //判断obj中是否含有cn if(hasClass(obj , cn)){ //有，则删除 removeClass(obj , cn); }else{ //没有，则添加 addClass(obj , cn); } } </script> <pre> 138. 二级菜单完成基本功能 </pre> <pre> 139. 二级菜单过渡效果 </pre> <style type="text/css"> div.sdmenu { width: 150px; margin: 20px; font-family: Arial, sans-serif; font-size: 12px; padding-bottom: 10px; background: #eee; color: #fff; } div.sdmenu div { background: #bbb; overflow: hidden; } div.sdmenu div.collapsed { height: 25px; } div.sdmenu div span { display: block; position: relative; height: 15px; line-height: 15px; overflow: hidden; padding: 5px 25px; font-weight: bold; color: white; cursor: pointer; border-bottom: 1px solid #ddd; } div.sdmenu div span:before { content: ''; position: absolute; top: 7px; left: 10px; width: 0; height: 0; border-style: solid; border-width: 5px; border-color:#333 transparent transparent transparent; } div.sdmenu div.collapsed span:before { border-color: transparent transparent transparent #333; } div.sdmenu div a { padding: 5px 10px; background: #eee; display: block; border-bottom: 1px solid #ddd; color: #066; } div.sdmenu div a.current { background: #ccc; } div.sdmenu div a:hover { background: #066 ; color: #fff; text-decoration: none; } </style> <div id="my_menu" class="sdmenu"> <div> <span class="menuSpan">在线工具</span> <a href="javascript:;">图像优化</a> <a href="javascript:;">收藏夹图标生成器</a> <a href="javascript:;">邮件</a> <a href="javascript:;">htaccess密码</a> <a href="javascript:;">梯度图像</a> <a href="javascript:;">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">支持我们</span> <a href="javascript:;">推荐我们</a> <a href="javascript:;">链接我们</a> <a href="javascript:;">网络资源</a> </div> <div class="collapsed"> <span class="menuSpan">合作伙伴</span> <a href="javascript:;">JavaScript工具包</a> <a href="javascript:;">CSS驱动</a> <a href="javascript:;">CodingForums</a> <a href="javascript:;">CSS例子</a> </div> <div class="collapsed"> <span class="menuSpan">测试电流</span> <a href="javascript:;">Current or not</a> <a href="javascript:;">Current or not</a> <a href="javascript:;">Current or not</a> <a href="javascript:;">Current or not</a> </div> </div> <script type="text/javascript"> console.log("第138,139"); /* * 我们的每一个菜单都是一个div * 当div具有collapsed这个类时，div就是折叠的状态 * 当div没有这个类是，div就是展开的状态 */ //获取所有的class为menuSpan的元素 var menuSpan = document.querySelectorAll(".menuSpan"); //定义一个变量，来保存当前打开的菜单 var openDiv = menuSpan[0].parentNode; //为span绑定单击响应函数 for(var i=0 ; i<menuSpan.length ; i++){ menuSpan[i].onclick = function(){ //this代表我当前点击的span //获取当前span的父元素 var parentDiv = this.parentNode; //切换菜单的显示状态 toggleMenu(parentDiv); //判断openDiv和parentDiv是否相同 if(openDiv != parentDiv && !hasClass(openDiv , "collapsed")){ //切换菜单的显示状态 toggleMenu(openDiv); } //修改openDiv为当前打开的菜单 openDiv = parentDiv; }; } // 用来切换菜单折叠和显示状态 function toggleMenu(obj){ //在切换类之前，获取元素的高度 var begin = obj.offsetHeight; //切换parentDiv的显示 toggleClass(obj , "collapsed"); //在切换类之后获取一个高度 var end = obj.offsetHeight; //console.log("begin = "+begin +" , end = "+end); //动画效果就是将高度从begin向end过渡 //将元素的高度重置为begin obj.style.height = begin + "px"; //执行动画，从bengin向end过渡 moveAni(obj,"height",end,10,function(){ //动画执行完毕，内联样式已经没有存在的意义了，删除之 obj.style.height = ""; }); } </script> <pre> 140. JSON - JS中的对象只有JS自己认识，其他的语言都不认识 - JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别， 并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互 - JSON - JavaScript Object Notation JS对象表示法 - JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号 其他的和JS语法一致 JSON分类： 1.对象 {} 2.数组 [] JSON中允许的值： 1.字符串 2.数值 3.布尔值 4.null 5.对象 6.数组 </pre> <script type="text/javascript"> console.log("第140"); var arr = '[1,2,3,"hello",true]'; var obj2 = '{"arr":[1,2,3]}'; var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]'; /* * 将JSON字符串转换为JS中的对象 * 在JS中，为我们提供了一个工具类，就叫JSON * 这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON */ var json = '{"name":"孙悟空","age":18,"gender":"男"}'; /* * json --> js对象 * JSON.parse() * - 可以将以JSON字符串转换为js对象 * - 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回 */ var o = JSON.parse(json); var o2 = JSON.parse(arr); console.log(o.gender); console.log(o2[1]); var obj3 = {name:"猪八戒" , age:28 , gender:"男"}; /* * JS对象 ---> JSON * JSON.stringify() * - 可以将一个JS对象转换为JSON字符串 * - 需要一个js对象作为参数，会返回一个JSON字符串 */ var str = JSON.stringify(obj3); console.log(str); /* * JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错 */ var str3 = '{"name":"孙悟空","age":18,"gender":"男"}'; JSON.parse(str3); /* * eval() * - 这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回 * - 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块 * 如果不希望将其当成代码块解析，则需要在字符串前后各加一个() * - eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码， * 但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患 */ var str2 = "console.log('hello');"; var obj = eval(str2); </script> </body> </html>
所有基础课程链接：
1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章）
5. JavaScript基础视频教程总结（041-050章） 6. JavaScript基础视频教程总结（051-060章） 7. JavaScript基础视频教程总结（061-070章） 8. JavaScript基础视频教程总结（071-080章）
9. JavaScript基础视频教程总结（081-090章） 10. JavaScript基础视频教程总结（091-100章） 11. JavaScript基础视频教程总结（101-110章） 12. JavaScript基础视频教程总结（111-120章）
13. JavaScript基础视频教程总结（121-130章） 14. JavaScript基础视频教程总结（131-140章）
另外，欢迎关注我的新浪微博
