javascript-初级-day03自定义属性

day01-自定义属性应用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { list-style:none; width: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>

View Code

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 { 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>
<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 { 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>
<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>

View Code

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 { width: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>

本文链接：https://www.cnblogs.com/q1359720840/p/10428599.html

javascript-初级-day03自定义属性

javascript-初级-day03自定义属性的更多相关文章

随机推荐

热门专题

目录导航