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标 ...

随机推荐

【Python123】练习1: Python基本语法元素 (第1周)
实例1: 温度转换这是"实例"题,与课上讲解实例相同,请作答检验学习效果.‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‪‬‪‬‪‬ ...
电脑日常使用bug记录
1.由于电脑太卡了,于是决定关一点服务,一不小心,电脑无线无法使用了.启动无线服务时提示"windows无法启动wlan autoconfig服务错误1068依赖服务" 启动 Ex ...
5.27日Scrum Metting
日期:2021年5月27日会议主要内容概述:确定账单数据格式,确定需要添加新的图表,确定模板分享功能任务量. 一.进度情况# 组员负责两日内已完成的工作后两日计划完成的工作工作中遇到的困难 ...
AIApe问答机器人Scrum Meeting 5.1
Scrum Meeting 5 日期:2021年5月1日会议主要内容概述:汇报两日工作. 一.进度情况组员负责两日内已完成的工作后两日计划完成的工作工作中遇到的困难李明昕后端 Task ...
莱特币(LTC)开发环境搭建
Linux系统下搭建莱特币LTC开发环境 1.简介 2.LTC 客户端下载 3.解压到一个固定的目录中 4.启动客户端 4.1.参数解释: 4.2.更多详细的配置 5.执行命令测试一下 6.获取莱特币 ...
freemarker自定义指令
最近项目中使用了spring boot搭建项目,使用spring security管理项目中的权限,使用freemarker作为视图层.为了将权限控制到按钮上,因此考虑直接使用spring secur ...
cf18B Platforms（仔细谨慎题）
题意: In one one-dimensional world there are n platforms. Platform with index k (platforms are numbere ...
第35篇-方法调用指令之invokespecial与invokestatic
这一篇将详细介绍invokespecial和invokestatic字节码指令的汇编实现逻辑 1.invokespecial指令 invokespecial指令的模板定义如下: def(Bytecod ...
mysql 的安装方式
一.rpm包安装方式 mysql-community-client-5.7.18-1.el7.x86_64.rpm 客户端 mysql-community-devel-5.7.18-1.el7.x86 ...
oracle 数据库修改端口号1521
1.关闭监听 2.修改配置文件,port=1933 #vi $ORACLE_HOME/network/admin/listener.ora 3.登录并查看local_listener参数,因为使用的是 ...

javascript-初级-day03自定义属性

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

随机推荐

热门专题