day01-自定义属性应用

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; }
  8. </style>
  9. <script>
  10. window.onload = function (){
  11.     var aLi = document.getElementsByTagName('li');
  12.     // var onOff = true;    // 只能控制一组！
  13.  
  14.     for( var i=0; i<aLi.length; i++ ){
  15.  
  16.         aLi[i].onOff = true;
  17.  
  18.         aLi[i].onclick = function (){
  19.  
  20.             // alert( this.style.background );
  21.             // 背景不能判断
  22.             // color red #f00
  23.             // 相对路径
  24.  
  25.             if ( this.onOff ) {
  26.                 this.style.background = 'url(img/active.png)';
  27.                 this.onOff = false;
  28.             } else {
  29.                 this.style.background = 'url(img/normal.png)';
  30.                 this.onOff = true;
  31.             }
  32.         };
  33.     }
  34. };
  35. </script>
  36. </head>
  37.  
  38. <body>
  39.  
  40. <ul>
  41.     <li></li>
  42.     <li></li>
  43.     <li></li>
  44. </ul>
  45.  
  46. </body>
  47. </html>

day02-自定义属性应用-按钮控制一组应用的变化

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function (){
  8.     var aBtn = document.getElementsByTagName('input');
  9.     var arr = [ 'A', 'B', 'C', 'D' ];
  10.  
  11.     for( var i=0; i<aBtn.length; i++ ){
  12.  
  13.         aBtn[i].num = 0;
  14.  
  15.         aBtn[i].onclick = function (){
  16.             // alert( arr[ this.num ] );
  17.             this.value = arr[ this.num ];
  18.  
  19.             this.num++;
  20.             if( this.num === arr.length ){
  21.                 this.num = 0;
  22.             }
  23.         };
  24.     }
  25. };
  26. </script>
  27. </head>
  28.  
  29. <body>
  30.  
  31. <input type="button" value="0" />
  32. <input type="button" value="0" />
  33. <input type="button" value="0" />
  34.  
  35. </body>
  36. </html>

初始值都是0，点击一次变成a,再次点击，b..c,d,a.....

day03-自定义属性索引值的应用

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <script>
  7. window.onload = function (){
  8.     var aBtn = document.getElementsByTagName('input');
  9.     var aP = document.getElementsByTagName('p');
  10.  
  11.     // 想建立“匹配”“对应”关系，就用索引值
  12.     var arr = [ '莫涛', '张森', '杜鹏' ];
  13.  
  14.     for( var i=0; i<aBtn.length; i++ ){
  15.  
  16.         aBtn[i].index = i;            // 自定义属性（索引值）
  17.  
  18.         aBtn[i].onclick = function (){
  19.             // alert( arr[ this.index ] );
  20.             this.value = arr[ this.index ];
  21.  
  22.             aP[ this.index ].innerHTML = arr[ this.index ];
  23.         };
  24.     }
  25. };
  26. </script>
  27. </head>
  28.  
  29. <body>
  30.  
  31. <input type="button" value="btn1" />
  32. <input type="button" value="btn2" />
  33. <input type="button" value="btn3" />
  34. <p>a</p>
  35. <p>b</p>
  36. <p>c</p>
  37.  
  38. </body>
  39. </html>

day04-图片切换实例

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. ul { padding:0; margin:0; }
  8. li { list-style:none; }
  9. body { background:#333; }
  10. #pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }
  11. #pic img { width:400px; height:500px; }
  12. #pic ul { width:40px; position:absolute; top:0; right:-50px; }
  13. #pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
  14. #pic .active { background:#FC3; }
  15. #pic span { top:0; }
  16. #pic p { bottom:0; margin:0; }
  17. #pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
  18. </style>
  19. <script>
  20. window.onload = function (){
  21.     var oDiv = document.getElementById('pic');
  22.     var oImg = oDiv.getElementsByTagName('img')[0];
  23.     var oSpan = oDiv.getElementsByTagName('span')[0];
  24.     var oP = oDiv.getElementsByTagName('p')[0];
  25.     var oUl = oDiv.getElementsByTagName('ul')[0];
  26.     var aLi = oUl.getElementsByTagName('li');
  27.  
  28.     var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
  29.     var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
  30.     var num = 0;
  31.     var oldLi = null;
  32.  
  33.     for( var i=0; i<arrUrl.length; i++ ){
  34.         oUl.innerHTML += '<li></li>';
  35.     }
  36.     oldLi = aLi[num];
  37.  
  38.     // 初始化
  39.     oImg.src = arrUrl[num];
  40.     oSpan.innerHTML = 1+num+' / '+arrUrl.length;
  41.     oP.innerHTML = arrText[num];
  42.     aLi[num].className = 'active';
  43.  
  44.     for( var i=0; i<aLi.length; i++ ){
  45.         aLi[i].index = i;            // 索引值
  46.         aLi[i].onclick = function (){
  47.             oImg.src = arrUrl[ this.index ];
  48.             oP.innerHTML = arrText[ this.index ];
  49.             oSpan.innerHTML = 1+this.index + ' / '+arrText.length;
  50.  
  51.             /*
  52.                 <li class="active"></li>
  53.                 <li></li>
  54.                 <li></li>
  55.                 <li></li>
  56.             */
  57.  
  58.             // 思路一：全部清空，当前添加
  59.             for( var i=0; i<aLi.length; i++ ){
  60.                 aLi[i].className = '';
  61.             }
  62.             this.className = 'active';
  63.  
  64.             /*
  65.             // 思路二：清空上个，当前添加
  66.             oldLi.className = '';
  67.             oldLi = this;
  68.             this.className = 'active';
  69.             */
  70.         };
  71.     }
  72. };
  73. </script>
  74. </head>
  75.  
  76. <body>
  77.  
  78. <div id="pic">
  79.     <img src="" />
  80.   <span>数量正在加载中……</span>
  81.   <p>文字说明正在加载中……</p>
  82.   <ul></ul>
  83. </div>
  84.  
  85. </body>
  86. </html>

重构：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. ul { padding:0; margin:0; }
  8. li { list-style:none; }
  9. body { background:#333; }
  10. #pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }
  11. #pic img { width:400px; height:500px; }
  12. #pic ul { width:40px; position:absolute; top:0; right:-50px; }
  13. #pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
  14. #pic .active { background:#FC3; }
  15. #pic span { top:0; }
  16. #pic p { bottom:0; margin:0; }
  17. #pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
  18. </style>
  19. <script>
  20. window.onload = function (){
  21.     var oDiv = document.getElementById('pic');
  22.     var oImg = oDiv.getElementsByTagName('img')[0];
  23.     var oSpan = oDiv.getElementsByTagName('span')[0];
  24.     var oP = oDiv.getElementsByTagName('p')[0];
  25.     var oUl = oDiv.getElementsByTagName('ul')[0];
  26.     var aLi = oUl.getElementsByTagName('li');
  27.  
  28.     var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
  29.     var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
  30.     var num = 0;
  31.  
  32.     for( var i=0; i<arrUrl.length; i++ ){
  33.         oUl.innerHTML += '<li></li>';
  34.     }
  35.  
  36.     // 初始化
  37.     function fnTab(){
  38.         oImg.src = arrUrl[num];
  39.         oSpan.innerHTML = 1+num+' / '+arrUrl.length;
  40.         oP.innerHTML = arrText[num];
  41.         for( var i=0; i<aLi.length; i++ ){
  42.             aLi[i].className = '';
  43.         }
  44.         aLi[num].className = 'active';
  45.     }
  46.     fnTab();
  47.  
  48.     for( var i=0; i<aLi.length; i++ ){
  49.         aLi[i].index = i;            // 索引值
  50.         aLi[i].onclick = function (){
  51.             num = this.index;
  52.             fnTab();
  53.         };
  54.     }
  55. };
  56. </script>
  57. </head>
  58.  
  59. <body>
  60.  
  61. <div id="pic">
  62.     <img src="" />
  63.   <span>数量正在加载中……</span>
  64.   <p>文字说明正在加载中……</p>
  65.   <ul></ul>
  66. </div>
  67.  
  68. </body>
  69. </html>

day05-qq列表

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. ul , h2 { padding:0; margin:0; }
  8. li { list-style:none; }
  9. #list { width:240px; border:1px solid #333; margin:0 auto; }
  10. #list .lis {}
  11. #list h2 { height:30px; line-height:30px; text-indent:20px; background:url(img/ico1.gif) no-repeat 5px center #6FF; color:#000; }
  12. #list .active { background:url(img/ico2.gif) no-repeat 5px center #FF9; color:#000; }
  13. #list ul { display:none; }
  14. #list ul li { line-height:24px; border-bottom:1px solid #333; text-indent:24px; }
  15. #list ul .hover { background:#6FF; }
  16. </style>
  17. <script>
  18. window.onload = function (){
  19.     var oUl = document.getElementById('list');
  20.     var aH2 = oUl.getElementsByTagName('h2');
  21.     var aUl = oUl.getElementsByTagName('ul');
  22.     var aLi = null;
  23.     var arrLi = [];
  24.  
  25.     for( var i=0; i<aH2.length; i++ ){
  26.         aH2[i].index = i;
  27.         aH2[i].onclick = function (){
  28.  
  29.             for( var i=0; i<aH2.length; i++ ){
  30.                 if( i != this.index ){
  31.                     aUl[i].style.display = 'none';
  32.                     aH2[i].className = '';
  33.                 }
  34.             }
  35.  
  36.             if( this.className == '' ){
  37.                 aUl[this.index].style.display = 'block';
  38.                 this.className = 'active';
  39.             } else {
  40.                 aUl[this.index].style.display = 'none';
  41.                 this.className = '';
  42.             }
  43.         };
  44.     }
  45.  
  46.     for( var i=0; i<aUl.length; i++ ){
  47.         aLi = aUl[i].getElementsByTagName('li');
  48.         for( var j=0; j<aLi.length; j++ ){
  49.             arrLi.push( aLi[j] );
  50.         }
  51.     }
  52.  
  53.     for( var i=0; i<arrLi.length; i++ ){
  54.         arrLi[i].onclick = function (){
  55.  
  56.             for( var i=0; i<arrLi.length; i++ ){
  57.                 if( arrLi[i] !=this ){
  58.                     arrLi[i].className = '';
  59.                 }
  60.             }
  61.             if( this.className == '' ){
  62.                 this.className = 'hover';
  63.             }else{
  64.                 this.className = '';
  65.             }
  66.         };
  67.     }
  68. };
  69. </script>
  70. </head>
  71.  
  72. <body>
  73.  
  74. <ul id="list">
  75.     <li class="lis">
  76.       <h2>我的好友</h2>
  77.     <ul>
  78.         <li>张三</li>
  79.         <li>张三</li>
  80.         <li>张三</li>
  81.         <li>张三</li>
  82.     </ul>
  83.   </li>
  84.     <li class="lis">
  85.       <h2>企业好友</h2>
  86.     <ul>
  87.         <li>李四</li>
  88.         <li>李四</li>
  89.         <li>李四</li>
  90.         <li>李四</li>
  91.         <li>李四</li>
  92.     </ul>
  93.   </li>
  94.     <li class="lis">
  95.       <h2>黑名单</h2>
  96.     <ul>
  97.         <li>张小三</li>
  98.         <li>李小四</li>
  99.     </ul>
  100.   </li>
  101. </ul>
  102.  
  103. </body>
  104. </html>

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

  1. JavaScript初级面试题

    前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型: ...

  2. Javascript初级学习总结

    首先,在Html页面输出,使用document.write('内容'); <html> <head> <title></title> <scrip ...

  3. javascript根据元素自定义属性获取元素，操作元素

    写在前面:给某个或多个元素自定义属性data-tar,想获取data-tar='123'的元素来进行进一步的操作,如何实现? function getElementByAttr(tag,attr,va ...

  4. 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示

    1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...

  5. javascript中的自定义属性

    标签的自定义属性: 在开发中,有时需要在标签上添加一些自定义属性用来存储数据或状态. 设置了自定义属性的标签,就是在这个标签上添加了这个属性,浏览器中的html结构中可以看到. 使用点语法(如oWra ...

  6. FCC的javascript初级算法题解答

    FCC上的javascript基础算法题 前一阵子做的基础算法题,感觉做完后收获还蛮大的,现在将自己的做法总结出来,供大家参考讨论.基本上做到尽量简短有效,但有些算法还可以继续简化,比如第七题若采用正 ...

  7. JavaScript初级学习

    1. JavaScript的介绍 前身是LiveScript+JavaScript JavaScript(js)是一个脚本语言 基于浏览器的脚本语言 基于对象,面向对象的一个编程语言 2. EcmaS ...

  8. 关于JavaScript初级的知识点一（持续更新 ）

    自己刚开始接触JS这是自己一个多月以来的一些总结和回顾. 一.什么是js? js是一种弱类型的脚本语言,是HTML的3大组成部分之一.HTML标签 CSS样式 JS脚本. 二.js的5种基本数据类型 ...

  9. JavaScript初级教程（Jquery）

    序,学习前端页面编程技术,JS是不得不学的一门技术,目前JS不仅可以作为前端编程语言,在服务器端也有了一定发展,例如NodeJS.废话不多书,本篇博客主要介绍JS作为前端语言,怎样获得和改变HTML标 ...

随机推荐

  1. 洛谷4103 HEOI2014大工程（虚树+dp）

    又是一道虚树好题啊 我们建出来虚树,然后考虑dp过程,我们分别令\(sum[x],mndis[x],mxdis[x],size[x]\)为子树内的路径长度和,最短链,最长链,子树内关键点个数. 对于一 ...

  2. Java领域的表现层的三种技术--jsp、freemarker、velocity

    10月份忙碌的参加秋招并获得了5个成都.上海.广州等不同地区的工作offer,最终选择了广州,11月底来到公司实习,很快,就跟进了公司的项目了,原本以为可以和宣讲会时报的志愿一样--Java开发,但是 ...

  3. 某个buuctf的题（easy_tornado）

    题目:http://88099f53-12b6-470a-9993-b73e4155940e.node3.buuoj.cn/ 1首先看三个文件的内容 2简单分析 如果出题人没整一些花里胡哨的,那么fl ...

  4. Jenkins 进阶篇 - 单元测试覆盖率

    我们做项目开发,肯定免不了要写单元测试,不管是 Java 项目.Python 项目.PHP 项目,甚至是 nodejs 项目,都应该要写单元测试,本小节就来介绍单元测试的覆盖率报告输出和展示,在后面的 ...

  5. docker初探和基础搭建

    个人博客 docker中文手册 Docker 是什么? docker是一个开源的软件部署解决方案: docker也是轻量级的应用容器框架: docker可以打包.发布.运行任何的应用. 在我的粗浅理解 ...

  6. 提高微信小程序的应用速度

    一.是什么 小程序启动会常常遇到如下图场景: 这是因为,小程序首次启动前,微信会在小程序启动前为小程序准备好通用的运行环境,如运行中的线程和一些基础库的初始化 然后才开始进入启动状态,展示一个固定的启 ...

  7. SpringCloud-初见

    目录 前言 微服务概述 微服务与微服务架构 微服务优缺点 微服务技术栈 为什么选择SpringCloud作为微服务架构 SpringCloud入门 SpringCloud和SpringBoot的关系 ...

  8. rocketMQ(一)基础环境

    一.安装: http://rocketmq.apache.org/dowloading/releases/ https://www.apache.org/dyn/closer.cgi?path=roc ...

  9. Noip模拟36 2021.8.11

    刚题的习惯还是改不了,怎么办??? T1 Dove打扑克 考场上打的动态开点线段树+并查集,考后发现自己像一个傻子,并查集就行.. 这几天恶补数据结构疯了 用树状数组维护后缀和,$siz_i$表示编号 ...

  10. 矩阵n次幂的计算

    1.归纳法 两大数学归纳法 题目一 2.递推关系 题目一 题目二 3.方阵 题目一 4.矩阵对角化(重点) 题目一 题目二 题目三 题目四 5.矩阵性质(综合) 题目一 题目二 对于副对角线: 题目三