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>

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>

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>

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

JavaScript初级面试题
前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型: ...
Javascript初级学习总结
首先,在Html页面输出,使用document.write('内容'); <html> <head> <title></title> <scrip ...
javascript根据元素自定义属性获取元素，操作元素
写在前面:给某个或多个元素自定义属性data-tar,想获取data-tar='123'的元素来进行进一步的操作,如何实现? function getElementByAttr(tag,attr,va ...
妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
javascript中的自定义属性
标签的自定义属性: 在开发中,有时需要在标签上添加一些自定义属性用来存储数据或状态. 设置了自定义属性的标签,就是在这个标签上添加了这个属性,浏览器中的html结构中可以看到. 使用点语法(如oWra ...
FCC的javascript初级算法题解答
FCC上的javascript基础算法题前一阵子做的基础算法题,感觉做完后收获还蛮大的,现在将自己的做法总结出来,供大家参考讨论.基本上做到尽量简短有效,但有些算法还可以继续简化,比如第七题若采用正 ...
JavaScript初级学习
1. JavaScript的介绍前身是LiveScript+JavaScript JavaScript(js)是一个脚本语言基于浏览器的脚本语言基于对象,面向对象的一个编程语言 2. EcmaS ...
关于JavaScript初级的知识点一（持续更新）
自己刚开始接触JS这是自己一个多月以来的一些总结和回顾. 一.什么是js? js是一种弱类型的脚本语言,是HTML的3大组成部分之一.HTML标签 CSS样式 JS脚本. 二.js的5种基本数据类型 ...
JavaScript初级教程（Jquery）
序,学习前端页面编程技术,JS是不得不学的一门技术,目前JS不仅可以作为前端编程语言,在服务器端也有了一定发展,例如NodeJS.废话不多书,本篇博客主要介绍JS作为前端语言,怎样获得和改变HTML标 ...

随机推荐

python进阶（21）typing模块--类型提示支持
typing介绍 Python是一门弱类型的语言,很多时候我们可能不清楚函数参数的类型或者返回值的类型,这样会导致我们在写完代码一段时间后回过头再看代码,忘记了自己写的函数需要传什么类型的参数,返 ...
Scrum Meeting 12
第12次例会报告日期:2021年06月03日会议主要内容概述: 介绍了现有进度,wpb介绍了jwt的用法以及部署的swagger的测试用法. 一.进度情况我们采用日报的形式记录每个人的具体进度, ...
netty中使用protobuf实现多协议的消息
在我们使用 netty 的过程中,有时候为了高效的传输数据,经常使用 protobuf 进行数据的传输,netty默认情况下为我们实现的 protobuf 的编解码,但是默认的只能实现单个对象的编解码 ...
搬运2：早期写的探究printf
目录: 1. 关于printf格式化输出 2. printf的一般形式 3. 转换说明 4. 格式化输出的意义 5. 转换说明修饰符 6. 修饰符中的标记 7. printf的返回值 ps:共3250 ...
海思 core 电压动态调整
http://www.eda365.com/forum.php?mod=viewthread&tid=108620&_dsign=5bee4dcb http://www.eda365. ...
hdu 5101 Select (二分+单调)
题意: 多多有一个智商值K. 有n个班级,第i个班级有mi个人.智商分别是v1,v2,.....vm. 多多要从这些人中选出两人.要求两人智商和大于K,并且两人不同班.问总共有多少种方案. 数据范围: ...
swagger3.0（springboot）消除basic-error-controller
1.新建springboot项目,可以通过https://start.spring.io/快速生成springboot项目. 2.引入jar依赖: <dependency> <gro ...
iscsi基本命令
磁阵操作命令根据磁阵端配置的业务地址(targetIP)和端口(3260),命令iscsiadm -m discovery -t sendtargets -p targetIP:port(3260) ...
Shell 脚本批量添加用户和用户密码
#!/bin/bash#批量添加用户设置密码for i in `seq 1 10`do if ! id user$i &> /dev/null then useradd user$i ...
Tomcat 内存马（二）Filter型
一.Tomcat处理请求在前一个章节讲到,tomcat在处理请求时候,首先会经过连接器Coyote把request对象转换成ServletRequest后,传递给Catalina进行处理. 在Cat ...

javascript-初级-day03自定义属性

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

随机推荐

热门专题