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

随机推荐

论文解读（MPNN）Neural Message Passing for Quantum Chemistry
论文标题:DEEP GRAPH INFOMAX 论文方向: 论文来源:ICML 2017 论文链接:https://arxiv.org/abs/1704.01212 论文代码: 1 介绍本文的目标 ...
Visual Studio CMake 项目和 WSL
Visual Studio CMake 项目和 WSL https://devblogs.microsoft.com/cppblog/c-with-visual-studio-2019-and-win ...
spring提供的可拓展接口
接口:SmartLifecycle(https://www.jianshu.com/p/7b8f2a97c8f5)
第一次Alpha Scrum Meeting
本次会议为Alpha阶段第一次Scrum Meeting会议会议概要会议时间:2021年4月22日会议地点:北航Inspiration Space咖啡厅会议时长:1小时会议内容简介:本次会议 ...
UltraSoft - Alpha - Scrum Meeting 4
Date: Apr 18th, 2020. 会议内容为例行汇报. Scrum 情况汇报进度情况组员负责前两日进度后两日任务 CookieLau PM 完成前后端交互规格的约定,了解前后端进 ...
Asp.net Core C#进行筛选、过滤、使用PredicateBuilder进行动态拼接lamdba表达式树并用作条件精准查询，模糊查询
在asp.net core.asp.net 中做where条件过滤筛选的时候写的长而繁琐不利于维护,用PredicateBuilder进行筛选.过滤.LInq配合Ef.core进行动态拼接lamdba ...
vue混入mixin的使用，保证你看的明明白白！
场景描述有些时候,我们发现有些组件部分功能代码是几乎是一样的. 这个时候,我们就可以将相同的逻辑代码抽离出来此时我们的主角混入mixin就登场了下面我们有a-test和b-test两个组件,点击 ...
SprinMvc快速入门
1.spring mvc Spring MVC是Spring Framework的一部分,是基于Java实现MVC的轻量级Web框架. 查看官方文档:https://docs.spring.io/sp ...
【代码更新】单细胞分析实录(21): 非负矩阵分解(NMF)的R代码实现，只需两步，啥图都有
1. 起因之前的代码(单细胞分析实录(17): 非负矩阵分解(NMF)代码演示)没有涉及到python语法,只有4个python命令行,就跟Linux下面的ls grep一样的.然鹅,有几个小伙伴不 ...
2016西邮Linux兴趣小组大事记
2016年还有半个小时就结束了,前面把自己9月做的规划拿出来完善了下,觉得真的是不容易的一年,所有的事情只有自己经历过才会有不一样的感受,世上无难事,只怕有心人. 这是我九月份制定的计划: 下面是20 ...

javascript-初级-day03自定义属性

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

随机推荐

热门专题