自定义属性之图片切换实例——代码简化、函数合并——JS学习笔记2015-5-30(第43天)
2015-05-30 23:18
447 查看
鉴于for循环的重要性,今天再来回顾下什么时候想到使用for循环:
1、重复执行某些代码;2、每次执行的时候有个数字在变化;
说道代码简化,函数合并
这里要去观察自己的代码,当发现自己写的代码,在功能上存在相似的代码段时,看看他们能不能合并
也就是函数的使用思想,就是被用来重复调用;让程序的整体代码变得简洁;
和合并的过程中,注意调试效果,看看有没有影响到原来效果的执行;
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> ul { padding:0; margin:0; } li { list-style:none; } body { background:#333; } #pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; } #pic img { width:400px; height:500px; } #pic ul { width:40px; position:absolute; top:0; right:-50px; } #pic li { width:40px; height:40px; margin-bottom:4px; background:#666; } #pic .active { background:#FC3; } #pic span { top:0; } #pic p { bottom:0; margin:0; } #pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; } </style> </head> <body> <div id="pic"> <img src="" /> <span>数量正在加载中……</span> <p>文字说明正在加载中……</p> <ul></ul> </div> <script type="text/javascript"> var oDiv = document.getElementById('pic'); var oImg = oDiv.getElementsByTagName('img')[0]; var oSpan = oDiv.getElementsByTagName('span')[0]; var oP = oDiv.getElementsByTagName('p')[0]; var oUl = oDiv.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ]; var arrText = [ '小宠物', '图片二', '图片三', '面具' ]; var num = 0; for( var i=0; i<arrUrl.length; i++ ){ oUl.innerHTML += '<li></li>'; } function fnTab(){ // 初始化 oImg.src = arrUrl[num]; oSpan.innerHTML = 1+num+' / '+arrUrl.length; oP.innerHTML = arrText[num]; for(var j=0; j<arrUrl.length; j++){ aLi[j].className = ''; //这里的for循环,是为了合并同样的代码段而添加出来的,本身这个步奏没有多大意义 } aLi[num].className = 'active'; } fnTab(); // 函数需要调用才会执行; for( var i=0 ;i<aLi.length; i++){ aLi[i].index = i; // 建立索引值要放到点击事件的外部,否则是无法发生作用的; aLi[i].onclick = function(){ num = this.index // 观察跟上面的代码段,发现这个this.index跟num的值是一样的,所以把this.index的值赋给num,下面的代码段几乎就跟初始化一样了 fnTab(); } } </script> </body> </html>
View Code
相关文章推荐
- javascript笔记(一)
- a标签的href与onclick中使用js的区别
- JSON入门学习案例笔记
- javascript基础
- 【开发-Web】Jsp与Servlet的区别?
- JavaScript 开发的45个经典技巧
- JS静态变量和静态函数
- javascript判断IE6 7 8 9
- Gson-JsonParser解析Json字符串
- JS成员函数声明位置优化
- IDF实验室-简单的js解密
- [LeetCode][JavaScript]3Sum
- javascript常见的设计模式
- arcgis for javascript API3.13 加载天地图卫星影像
- JS 屏蔽键盘与鼠标事件
- JavaScript继承
- javascript客户端检测技术
- 字符串转化为Json格式的数据--(记录四)
- AJAX
- JavaScript 使用穷举方式实现内容简繁转换