second class

时间：2023-03-09 05:24:21
second class

second class

nothing no very good.

1.look at shuruo.html,after display:inline-block; li's width as the content; So we can learn block element's width as his father,or as the content;

2.if(oList.style.display == 'block'){

    oList.style.display = 'none';

    }else{

    oList.style.display = 'block';

}

better:

oList.style.display == 'block'? 'none':'block';

second class

almost the same

1.to keep it beautiful in html,I made every line not very long;but when alert its innerHTML ,the blank is ungly,I use this.innerHTML.replace(/[\r\n]/g,""); it does not work? I do not know,look at clickDiv1.html.

second class

1.use nagative margin to be center:

 not only the left and top should be 50%,but margin-top:-height;margin-left:-width;

2.close button make

mine:<div id='alert'>

                <div id='head'>

                    <div id='close'></div>

                </div>

            </div>

better:

<div id="win"

><h2><span id="close">×</span></h2></div>

3.遮罩

div:width height 100%; opacity:0.5; when onclick:block;or none;

4.text-align :right; let content to be right ,do not always use position.

second class

1.str become array:str.split(',')

2.正则？？this.value.replace(/[^(\d)|(,)]/,"")

second class

1.only block can add width and text-align

second class

1.mine:use<img>,<img>and <img> born ,have distance

better:use <li>,no distance original

2.use total width to contorl content to go to next line,and the same time you'b better use float ;

3.this function emphsize on margin, father and son ,son and son

son:margin-top,margin-right

father:padding-left padding-bottom

second class

1.每个动作下一步的状态要想一想；例如，就不需要mouseout，加了之后，没有鼠标的时候应该是什么样子呢

2.2行文本不知道怎么换行，《strong》

second class

1.小图标是我画的，巨丑，哈哈

2.background-color如何和background-image 同时存在并同时work

wrong:background-color:#####;background:url()

right:background:#ced3d7 url(img/ico.gif) 180px 15px no-repeat;border-color:#fff #e9edf2;

second class

showpic

1.

var oLi = document.getElementsByTagName('li');

for(var i=0;i<oLi.length;i++){

   oLi[i].onmouseover = function(){

       this.index = i;

       var oSpan = this.getElementsByTagName('span')[0];

       var oImg = this.getElementsByTagName('img')[0];

       oSpan.style.display = 'none';

       oImg.style.display = 'block';

    }

###below is better,directly get element from list

var oLi = document.getElementsByTagName("li");

var oA = document.getElementsByTagName("a");

var oImg = document.getElementsByTagName("img");

for (var i = 0; i < oLi.length; i++)

{

   oA[i].index = oImg[i].index = i;

   oA[i].onmouseover = function() {

   oLi[this.index].className = "zindex";

   oImg[this.index].style.display = "block";
};

2.<div>
　　<ul>
　　　　<li>
li{float:left},if you want ul include li ,you must add ul:after{clear:both;}

second class

1.oImg.src

2.特地用                for(var i=0;i<oLi.length;i++){

second class
                   oLi[i].onclick = function(){

                        check_all(true);

                        check_all(false);

                    }

                }

                /////
       function check_all(arg){

                    for(var i=0;i<oLi.length;i++){

                        if(oLi[i].checked !==arg){

                            return 0;

                        }

                    }

                    if(arg){

                        oSpan.innerHTML = '全不选';

                        oAll.checked = true;

                    }

                    if(!arg){

                        oSpan.innerHTML = '全选';

                        oAll.checked = false;

                    }

                }

check 行为理论是一次的，但这样就必须进行了2次，结果是没问题，但感觉很奇怪；下面的优点：

1.利用好了 &&，在oLi[i].checked 为真时才加1

2.利用好了只有所有li的check为真时，oAll才为真，一个li不为真都不行

3.三元表达式

var isCheckAll = function ()

{

       for (var i = 1, n = 0; i < oLi.length; i++)

      {

            oLi[i].checked && n++

        }

       oAll.checked = n == oLi.length - 1;

       oSpan.innerHTML = oAll.checked ? "全不选" : "全选"

 };

/////////////////////////////////////////////////////

要很好的分析逻辑关系,用心就会发现li的真假和oAll同步，省略很多事

oAll.onclick = function(){

                   if (oAll.checked){

                       for(var i=0;i<oLi.length;i++){

                           oLi[i].checked = true;

                       }

                       check_all(true);

                   }

                   else{

                       for(var i=0;i<oLi.length;i++){

                           oLi[i].checked = false;

                       }

                       check_all(false);

                   }

                }

////

oAll.onclick = function(){

  for(var i=0;i<oLi.length;i++){

      oLi[i].checked = oAll.checked;
}

  isCheckAll();

}

随机推荐

  1. 类似lol的友军视野怎么实现

    https://github.com/kbengine/kbengine/issues/129 你们可以按这个思路自己先改一下 例如: 可将队友的AOI实体也同步到自己的客户端中. 可对某些特定类型的 ...

  2. Windows 10设置桌面图标间距、窗口的背景颜色、选中文字的背景颜色

    Windows 10取消了“高级外观设置”(或者叫“窗口颜色和外观”设置),想调整一些参数只能进注册表了. 修改后可能需要注销或重启才能生效. 按Win+R,然后输入regedit进入注册表编辑器. ...

  3. java -cp

    java -cp /home/hdp/log4jTest/log4j-1.2.17.jar:/home/hdp/log4jTest/testLog.jar:/home/hdp/log4jTest/co ...

  4. CSS特殊性值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Linux驱动学习之常用的模块操作命令

    1.常用的模块操作命令 (1)lsmod(list module,将模块列表显示),功能是打印出当前内核中已经安装的模块列表 (2)insmod(install module,安装模块),功能是向当前 ...

  6. 循序渐进Python3（八） -- 1 -- socket进阶

    IO多路复用 I/O多路复用指:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作. Linux中的 select,poll,epoll 都 ...

  7. eclipse maven spring mvc el表达式无效

    http://www.myexception.cn/javascript/2031310.html

  8. swt controls里的控件list

    swt controls里的控件list,怎么显示滚动条,并且滚动条自动移动到最下边时,显示最新内容 package com.jokul; import org.eclipse.swt.widgets ...

  9. jq 和 原生js进行传输文件ajax请求

    <body> <input id="file_upload" name="file_upload" type="file" ...

  10. Python在Windows下安装第三方库浅谈

    在用python编写代码时,往往需要用到第三方库,那么python如何去用第三方库呢,首先我们先来看看是如何安装的,方法可能会很多,但这边只介绍一种,其它请百度或google 比如asyncio,这里 ...

相关文章