day01-自定义属性应用
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> li { list-style:none; 114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; } </style> <script> window.onload = function (){ var aLi = document.getElementsByTagName('li'); // var onOff = true; // 只能控制一组！ for( var i=0; i<aLi.length; i++ ){ aLi[i].onOff = true; aLi[i].onclick = function (){ // alert( this.style.background ); // 背景不能判断 // color red #f00 // 相对路径 if ( this.onOff ) { this.style.background = 'url(img/active.png)'; this.onOff = false; } else { this.style.background = 'url(img/normal.png)'; this.onOff = true; } }; } }; </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
day02-自定义属性应用-按钮控制一组应用的变化
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload = function (){ var aBtn = document.getElementsByTagName('input'); var arr = [ 'A', 'B', 'C', 'D' ]; for( var i=0; i<aBtn.length; i++ ){ aBtn[i].num = 0; aBtn[i].onclick = function (){ // alert( arr[ this.num ] ); this.value = arr[ this.num ]; this.num++; if( this.num === arr.length ){ this.num = 0; } }; } }; </script> </head> <body> <input type="button" value="0" /> <input type="button" value="0" /> <input type="button" value="0" /> </body> </html>
初始值都是0，点击一次变成a,再次点击，b..c,d,a.....
day03-自定义属性索引值的应用
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload = function (){ var aBtn = document.getElementsByTagName('input'); var aP = document.getElementsByTagName('p'); // 想建立“匹配”“对应”关系，就用索引值 var arr = [ '莫涛', '张森', '杜鹏' ]; for( var i=0; i<aBtn.length; i++ ){ aBtn[i].index = i; // 自定义属性（索引值） aBtn[i].onclick = function (){ // alert( arr[ this.index ] ); this.value = arr[ this.index ]; aP[ this.index ].innerHTML = arr[ this.index ]; }; } }; </script> </head> <body> <input type="button" value="btn1" /> <input type="button" value="btn2" /> <input type="button" value="btn3" /> <p>a</p> <p>b</p> <p>c</p> </body> </html>
day04-图片切换实例
<!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 { 400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; } #pic img { 400px; height:500px; } #pic ul { 40px; position:absolute; top:0; right:-50px; } #pic li { 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; 400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; } </style> <script> window.onload = function (){ 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; var oldLi = null; for( var i=0; i<arrUrl.length; i++ ){ oUl.innerHTML += '<li></li>'; } oldLi = aLi[num]; // 初始化 oImg.src = arrUrl[num]; oSpan.innerHTML = 1+num+' / '+arrUrl.length; oP.innerHTML = arrText[num]; aLi[num].className = 'active'; for( var i=0; i<aLi.length; i++ ){ aLi[i].index = i; // 索引值 aLi[i].onclick = function (){ oImg.src = arrUrl[ this.index ]; oP.innerHTML = arrText[ this.index ]; oSpan.innerHTML = 1+this.index + ' / '+arrText.length; /* <li class="active"></li> <li></li> <li></li> <li></li> */ // 思路一：全部清空，当前添加 for( var i=0; i<aLi.length; i++ ){ aLi[i].className = ''; } this.className = 'active'; /* // 思路二：清空上个，当前添加 oldLi.className = ''; oldLi = this; this.className = 'active'; */ }; } }; </script> </head> <body> <div id="pic"> <img src="" /> <span>数量正在加载中……</span> <p>文字说明正在加载中……</p> <ul></ul> </div> </body> </html>
重构：
<!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 { 400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; } #pic img { 400px; height:500px; } #pic ul { 40px; position:absolute; top:0; right:-50px; } #pic li { 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; 400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; } </style> <script> window.onload = function (){ 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 i=0; i<aLi.length; i++ ){ aLi[i].className = ''; } aLi[num].className = 'active'; } fnTab(); for( var i=0; i<aLi.length; i++ ){ aLi[i].index = i; // 索引值 aLi[i].onclick = function (){ num = this.index; fnTab(); }; } }; </script> </head> <body> <div id="pic"> <img src="" /> <span>数量正在加载中……</span> <p>文字说明正在加载中……</p> <ul></ul> </div> </body> </html>
day05-qq列表
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> ul , h2 { padding:0; margin:0; } li { list-style:none; } #list { 240px; border:1px solid #333; margin:0 auto; } #list .lis {} #list h2 { height:30px; line-height:30px; text-indent:20px; background:url(img/ico1.gif) no-repeat 5px center #6FF; color:#000; } #list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; } #list ul { display:none; } #list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; } #list ul .hover { background:#6FF; } </style> <script> window.onload = function (){ var oUl = document.getElementById('list'); var aH2 = oUl.getElementsByTagName('h2'); var aUl = oUl.getElementsByTagName('ul'); var aLi = null; var arrLi = []; for( var i=0; i<aH2.length; i++ ){ aH2[i].index = i; aH2[i].onclick = function (){ for( var i=0; i<aH2.length; i++ ){ if( i != this.index ){ aUl[i].style.display = 'none'; aH2[i].className = ''; } } if( this.className == '' ){ aUl[this.index].style.display = 'block'; this.className = 'active'; } else { aUl[this.index].style.display = 'none'; this.className = ''; } }; } for( var i=0; i<aUl.length; i++ ){ aLi = aUl[i].getElementsByTagName('li'); for( var j=0; j<aLi.length; j++ ){ arrLi.push( aLi[j] ); } } for( var i=0; i<arrLi.length; i++ ){ arrLi[i].onclick = function (){ for( var i=0; i<arrLi.length; i++ ){ if( arrLi[i] !=this ){ arrLi[i].className = ''; } } if( this.className == '' ){ this.className = 'hover'; }else{ this.className = ''; } }; } }; </script> </head> <body> <ul id="list"> <li class="lis"> <h2>我的好友</h2> <ul> <li>张三</li> <li>张三</li> <li>张三</li> <li>张三</li> </ul> </li> <li class="lis"> <h2>企业好友</h2> <ul> <li>李四</li> <li>李四</li> <li>李四</li> <li>李四</li> <li>李四</li> </ul> </li> <li class="lis"> <h2>黑名单</h2> <ul> <li>张小三</li> <li>李小四</li> </ul> </li> </ul> </body> </html>
