js筆記

1.阻止默認(rèn)事件

  var event = ev || event;//兼容性
 event.cancelBubble = true;//不會(huì)在向上一級(jí)傳遞，阻止冒泡
 7.window.history.forward(1); 阻止頁(yè)面后退扎狱；

2.正則

/d [0-9]          /D [^0-9]除了0-9                                       
/s [a-z0-9_]     /S  [^0-9a-z_]
/w 空白字符      /W 除了空白字符                                              


//包含中文正則
var cnPattern = /[\u4E00-\u9FA5]/;
//輸出 true
console.log(cnPattern.test("蔡寶堅(jiān)"));

3.排序

 var arr = [1,19,25,13].sort((a,b) => a-b);
      alert(arr);

4.按照 json 的屬性值排序

 var arr = [

          { name : "檸夏" ,age : 20},
          { name : "寶寶" ,age : 18},
          { name : "嬰國(guó)baby" ,age : 19},
          { name : "香麗" ,age : 10}
].sort( (a,b) => a.age - b.age);

for(var i=0;i<arr.length;i++){
    alert(arr[i]['age']);
}

5..把 document.getElementById(id) 轉(zhuǎn)換成 $("id")

      function $(id) {
        return typeof (id) == 'string' ? document.getElementById(id) : id
       }

6.錨點(diǎn)定位方法

   window.location.hash = 'm001';
   <a name="m001"> </a>

7..多點(diǎn)擊事件獲取點(diǎn)擊的是哪個(gè)

   $('#IndexLink,#IndexLink1').on('click', function (e) {
      var id=e.target.id;
      //id 取到的就是被點(diǎn)擊的ID值
    }

8.頁(yè)面到底部自動(dòng)加載內(nèi)容：

    var divH = document.body.scrollHeight,
        top = document.body.scrollTop,
        windowH = window.screen.availHeight;
      if ((top + windowH) >divH) {
      console.log('該他媽的加載內(nèi)容了闰集。');
      }
      console.log('網(wǎng)頁(yè)正文全文高：' + document.body.scrollHeight + ' 網(wǎng)頁(yè)被卷去的高： ' + document.body.scrollTop + ' 屏幕可用工作區(qū)高度:' +       window.screen.availHeight);

列表

appendchild

先把元素從原有的父級(jí)上刪掉再添加到新的父級(jí)

表格

隔行變色

<script>
    window.onload=function(){
        var oTab=document.getElementById('tab1');

        var oldColor='';

        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
            oTab.tBodies[0].rows[i].onmouseover=function(){
                //將初始的顏色值存入函數(shù)中，當(dāng)鼠標(biāo)移出的時(shí)候恢復(fù)原來(lái)的色值
                oldColor=this.style.background;

                this.style.background='#07db00';
            };

            oTab.tBodies[0].rows[i].onmouseout=function(){
                this.style.background=oldColor;
            };

            //隔行變色
            if(i%2){
                oTab.tBodies[0].rows[i].style.background='';
            }else{
          oTab.tBodies[0].rows[i].style.background='#ccc';
        }
        }
    };
</script>
<body>
<table id="tab1" width="500" border="1px">
  <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年齡</td>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>李四</td>
      <td>22</td>
    </tr>
    <tr>
      <td>2</td>
      <td>張三</td>
      <td>26</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
    </tr>
    <tr>
      <td>4</td>
      <td>馬六</td>
      <td>41</td>
    </tr>
    <tr>
      <td>5</td>
      <td>趙七</td>
      <td>25</td>
    </tr>
  </tbody>
</table>
</body>

排序

<script>
  window.onload=function()
  {
    var oBtn=document.getElementById('btn');
    var oTab=document.getElementById('tab1');

    oBtn.onclick=function()
    {
      var arr=[];

      for(var i=0;i<oTab.tBodies[0].rows.length;i++)
      {
        arr[i]=oTab.tBodies[0].rows[i];
      }

      arr.sort(function(tr1,tr2)
      {
        var n1=parseInt(tr1.cells[0].innerHTML); //排第幾列
        var n2=parseInt(tr2.cells[0].innerHTML);

        return n1-n2;
      });

      for(var i=0;i<arr.length;i++)
      {
        oTab.tBodies[0].appendChild(arr[i]);
      }

    };


  }
</script>

<body>
<input id="btn" type="button" value="排序">
<table id="tab1" width="500" border="1px">
  <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年齡</td>
    <td>操作</td>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>張七</td>
      <td>25</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>馬六</td>
      <td>41</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>張三</td>
      <td>26</td>
      <td></td>
    </tr>
    <tr>
      <td>1</td>
      <td>李四</td>
      <td>22</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td></td>
    </tr>

  </tbody>
</table>
</body>

添加和刪除

<script>
  window.onload=function()
  {
    var oName=document.getElementById('name');
    var oAge=document.getElementById('age');
    var oBtn=document.getElementById('btn');
    var oTab=document.getElementById('tab1');

    //讓刪掉之后的序列不在重復(fù)使用
    var id=oTab.tBodies[0].rows.length+1;

    oBtn.onclick=function()
    {
      var oTr=document.createElement('tr');

      //在最后一行添加的序列
      var oTd=document.createElement('td');
      oTd.innerHTML=id++;
      oTr.appendChild(oTd);

      //在最后一行添加的姓名
      var oTd=document.createElement('td');
      oTd.innerHTML=oName.value;
      oTr.appendChild(oTd);

      //在最后一行添加的年齡
      var oTd=document.createElement('td');
      oTd.innerHTML=oAge.value;
      oTr.appendChild(oTd);

      //刪除操作
      var oTd=document.createElement('td');
      oTd.innerHTML='<a href="javascript:;">刪除</a>'
      oTr.appendChild(oTd);

      oTd.getElementsByTagName('a')[0].onclick=function()
      {
        oTab.tBodies[0].removeChild(this.parentNode.parentNode);
      };

      oTab.tBodies[0].appendChild(oTr);
    };
  }
</script>

<body>
姓名：<input id="name" type="text" />
年齡：<input id="age" type="text" />
<input id="btn" type="button" value="添加" />
<table id="tab1" width="500" border="1px">
  <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年齡</td>
    <td>操作</td>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>李四</td>
      <td>22</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>張三</td>
      <td>26</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>馬六</td>
      <td>41</td>
      <td></td>
    </tr>
    <tr>
      <td>5</td>
      <td>趙七</td>
      <td>25</td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>

搜索

toLowerCase 忽略大小寫(xiě)

search 模糊搜索如果沒(méi)有找到任何匹配的子串宾符，則返回 -1

split 分割字符串

<script>
  window.onload=function()
  {
    var oTxt=document.getElementById('name');
    var oBtn=document.getElementById('btn');
    var oTab=document.getElementById('tab1');

    oBtn.onclick=function()  // 關(guān)鍵字搜索 忽略大小寫(xiě) 和 模糊搜索
    {
      for(var i=0;i<oTab.tBodies[0].rows.length;i++)
      {
        var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
        var sTxt=oTxt.value.toLowerCase();

        var arr=sTxt.split(' ');  //split分割字符串

        oTab.tBodies[0].rows[i].style.background='';
        // oTab.tBodies[0].rows[i].style.display='none';  //篩選  //初始化為未顯示的

        for(var j=0;j<arr.length;j++)
        {
          if(sTab.search(arr[j])!=-1)
          {
            oTab.tBodies[0].rows[i].style.background="yellow";
            // oTab.tBodies[0].rows[i].style.display='block';  //找到時(shí)顯現(xiàn)
          }
        }
      }
    };
  }
</script

<body>
姓名：<input id="name" type="text"/>
<input id="btn" type="button" value="搜索">
<table id="tab1" width="500" border="1px">
  <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年齡</td>
    <td>操作</td>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>李四</td>
      <td>22</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>張三</td>
      <td>26</td>
      <td></td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>28</td>
      <td></td>
    </tr>
    <tr>
      <td>4</td>
      <td>馬六</td>
      <td>41</td>
      <td></td>
    </tr>
    <tr>
      <td>5</td>
      <td>張七</td>
      <td>25</td>
      <td></td>
    </tr>
  </tbody>
</table>
</body>

表單

全選、不選灭翔、反選

<script>
  window.onload=function()
  {
    var oBtn1=document.getElementById('btn1');
    var oBtn2=document.getElementById('btn2');
    var oBtn3=document.getElementById('btn3');
    var oDiv=document.getElementById('div1');
    var aCh=oDiv.getElementsByTagName('input');

    //全選
    oBtn1.onclick=function()
    {
      for(var i=0;i<aCh.length;i++)
      {
        aCh[i].checked=true;
      }
    };

    //不選
    oBtn2.onclick=function()
    {
      for(var i=0;i<aCh.length;i++)
      {
        aCh[i].checked=false;
      }
    };

    //反選
    oBtn3.onclick=function()
    {
      for(var i=0;i<aCh.length;i++)
      {
        if(aCh[i].checked==true)
          aCh[i].checked=false;
        else
          aCh[i].checked=true;
      }
    };
  }
</script>

<body>
<input id="btn1" type="button" value="全選"><br />
<input id="btn2" type="button" value="不選"><br />
<input id="btn3" type="button" value="反選"><br />
<div id="div1">
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
  <input type="checkbox" /><br />
</div>
</body>

鼠標(biāo)

拖拽

<style type="text/css">
  #div1{width:200px; height:200px; background:yellow; position: absolute;}
</style>
<script>
  window.onload=function()
  {
    var oDiv=document.getElementById('div1');

    var disX=0;
    var disY=0;

    oDiv.onmousedown=function(ev)
    {
      var oEvent=ev||event;

      disX=oEvent.clientX-oDiv.offsetLeft;  ////鼠標(biāo)跟矩形框之間的距離
      disY=oEvent.clientY-oDiv.offsetTop;

      //寫(xiě)在onmousedown里面魏烫，是為了讓點(diǎn)擊的時(shí)候才開(kāi)始移動(dòng)，如果寫(xiě)在了外面肝箱，沒(méi)有點(diǎn)擊是就已經(jīng)開(kāi)始移動(dòng)了
      //寫(xiě)成document就算移動(dòng)的很快哄褒，鼠標(biāo)也不會(huì)離開(kāi)矩形框
      document.onmousemove=function(ev)
      {
        var oEvent=ev||event;

        var l=oEvent.clientX-disX;  //存的是物體的位置
        var t=oEvent.clientY-disY;

        //當(dāng)物體被拖出去的時(shí)候
        if(l<0)
        {
          l=0;
        }                   //可視區(qū)寬度 - div寬度
        else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
        {   //讓l = 最大值
          l=document.documentElement.clientWidth-oDiv.offsetWidth;
        }

        if(t<0)
        {
          t=0;
        }
        else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
        {
          t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }

        oDiv.style.left=l+'px';
        oDiv.style.top=t+'px';
      };

      document.onmouseup=function()
      {
        document.onmousemove=null;  //當(dāng)鼠標(biāo)松開(kāi)時(shí)停止移動(dòng)
        document.onmouseup=null;   //不留垃圾
      };

      return false; //防止火狐中空div拖拽是的bug   阻止默認(rèn)事件
    };

  };
</script>

<body>
<div id="div1"></div>
</body>

一串div跟著鼠標(biāo)移動(dòng)

<style type="text/css">
  div{width:10px; height:10px; background:red; position: absolute;}
</style>
<script>
function getPos(ev)
{
  //scrollTop就是可視區(qū)的頂部距離網(wǎng)頁(yè)頂部的距離
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

  return{x:ev.clientX+scrollLeft, y:ev.clientY+scrollTop};
}

  document.onmousemove=function(ev)
  {
    var aDiv=document.getElementsByTagName('div');
    var oEvent=ev||event;

    var pos=getPos(oEvent);

    //后一個(gè)div跟著前一個(gè)div走
    for(var i=aDiv.length-1;i>0;i--)
    {
      //后一個(gè)div的left 是 前一個(gè)div的offsetLeft
      aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
      aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    }

    aDiv[0].style.left=pos.x+'px';
    aDiv[0].style.top=pos.y+'px';
  }

</script>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

選型卡

<style type="text/css">
  #div1 .active{background:yellow;}
  #div1 div{width:200px; height:200px; background:#ccc; border: 1px solid #000; display: none;}
</style>
<script>
  window.onload=function()
  {
    var oDiv=document.getElementById('div1');
    var oBtn=oDiv.getElementsByTagName('input');
    var aDiv=oDiv.getElementsByTagName('div');

    for(var i=0;i<oBtn.length;i++)
    {
      oBtn[i].onclick=function()
      {
        for(var i=0;i<oBtn.length;i++)
        {
          oBtn[i].index=i;
          oBtn[i].className='';
          aDiv[i].style.display='none';
        }
        this.className='active';
        aDiv[this.index].style.display='block';
      }
    }

  };
</script>

<body>
<div id="div1">
  <input class="active" type="button" value="教育">
  <input type="button" value="培訓(xùn)">
  <input type="button" value="招生">
  <input type="button" value="出國(guó)">
  <div style="display: block;">11111</div>
  <div>22222</div>
  <div>33333</div>
  <div>44444</div>
</div>
</body>

自定義滾動(dòng)條

<style type="text/css">
  #parent{width:600px; height:20px;background:#ccc; position: relative; margin:10px auto;}
  #div1{width: 20px; height:20px; background: red; position: absolute; left:0; top:0;}
  #div2{width: 400px;height:300px; border: 1px solid #000; position: relative; overflow: hidden;}
  #div3{position: absolute;top:0;left:0; padding:4px;}
</style>
<script>
window.onload=function()
{
  var oDiv1=document.getElementById('div1');
  var oDiv2=document.getElementById('div2');
  var oDiv3=document.getElementById('div3');
  var oParent=document.getElementById('parent');

  var disX=0;

  oDiv1.onmousedown=function(ev)
  {
    var oEvent=ev||event;

    //鼠標(biāo)跟矩形框的距離
    disX=oEvent.clientX-oDiv1.offsetLeft;

    //寫(xiě)成document就算鼠標(biāo)移動(dòng)的很快，鼠標(biāo)也不會(huì)離開(kāi)矩形框
    document.onmousemove=function(ev)
    {
      var oEvent=ev||event;

      var l=oEvent.clientX-disX;  //將oEvent.clientX - disX 存起來(lái)

      if(l<0) //保證div1不會(huì)被拖拽到parent之外
      {
        l=0;
      }
      else if(l>oParent.offsetWidth-oDiv1.offsetWidth)
      {
        l=oParent.offsetWidth-oDiv1.offsetWidth;
      }

      oDiv1.style.left=l+'px';

      //將scale的值設(shè)置為0~1
      var scale=l/(oParent.offsetWidth-oDiv1.offsetWidth);

      //top的值  滾動(dòng)條 * 需要滾動(dòng)的距離   div3的offsetHeight-div2的高
      oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';

    };

    document.onmouseup=function()
    {
      document.onmousemove=null;//當(dāng)鼠標(biāo)松開(kāi)時(shí)停止移動(dòng)
      document.onmouseup=null;
    };

    return false;  //阻止火狐中空div拖拽時(shí)的bug
  };
};

</script>

<body>
  <div id="parent">
    <div id="div1"></div>
  </div>
  <div id="div2">
    <div id="div3">
     我們過(guò)了江煌张，進(jìn)了車(chē)站呐赡。我買(mǎi)票，他忙著照看行李骏融。行李太多了链嘀，得向腳夫行些小費(fèi)，才可過(guò)去档玻。他便又忙著和他們講價(jià)錢(qián)怀泊。我那時(shí)真是聰明過(guò)分，總覺(jué)他說(shuō)話不大漂亮误趴，非自己插嘴不可霹琼。但他終于講定了價(jià)錢(qián)；就送我上車(chē)凉当。他給我揀定了靠車(chē)門(mén)的一張椅子枣申；我將他給我做的紫毛大衣鋪好坐位。他囑我路上小心看杭，夜里警醒些忠藤，不要受涼。又囑托茶房好好照應(yīng)我泊窘。我心里暗笑他的迂熄驼；他們只認(rèn)得錢(qián)像寒，托他們直是白托！而且我這樣大年紀(jì)的人瓜贾，難道還不能料理自己么诺祸？唉，我現(xiàn)在想想祭芦，那時(shí)真是太聰明了筷笨！
      　　我說(shuō)道，“爸爸龟劲，你走吧胃夏。”他望車(chē)外看了看昌跌，說(shuō)仰禀，“我買(mǎi)幾個(gè)橘子去。你就在此地蚕愤，不要走動(dòng)答恶。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣(mài)東西的等著顧客萍诱。走到那邊月臺(tái)悬嗓，須穿過(guò)鐵道，須跳下去又爬上去裕坊。父親是一個(gè)胖子包竹，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的籍凝，他不肯周瞎，只好讓他去。我看見(jiàn)他戴著黑布小帽饵蒂，穿著黑布大馬褂堰氓，深青布棉袍，蹣跚地走到鐵道邊苹享，慢慢探身下去，尚不大難浴麻〉梦剩可是他穿過(guò)鐵道，要爬上那邊月臺(tái)软免，就不容易了宫纬。他用兩手攀著上面，兩腳再向上縮膏萧；他肥胖的身子向左微傾漓骚，顯出努力的樣子蝌衔。這時(shí)我看見(jiàn)他的背影，我的淚很快地流下來(lái)了蝌蹂。我趕緊拭干了淚噩斟，怕他看見(jiàn)，也怕別人看見(jiàn)孤个。我再向外看時(shí)剃允，他已抱了朱紅的橘子望回走了。過(guò)鐵道時(shí)齐鲤，他先將橘子散放在地上斥废，自己慢慢爬下，再抱起橘子走给郊。到這邊時(shí)牡肉，我趕緊去攙他。他和我走到車(chē)上淆九，將橘子一股腦兒放在我的皮大衣上统锤。于是撲撲衣上的泥土，心里很輕松似的吩屹，過(guò)一會(huì)說(shuō)跪另，“我走了；到那邊來(lái)信煤搜！”我望著他走出去免绿。他走了幾步，回過(guò)頭看見(jiàn)我擦盾，說(shuō)嘲驾，“進(jìn)去吧，里邊沒(méi)人迹卢×晒剩”等他的背影混入來(lái)來(lái)往往的人里，再找不著了腐碱，我便進(jìn)來(lái)坐下誊垢，我的眼淚又來(lái)了。
      　　近幾年來(lái)症见，父親和我都是東奔西走喂走，家中光景是一日不如一日。他少年出外謀生谋作，獨(dú)力支持芋肠，做了許多大事。那知老境卻如此頹唐遵蚜！他觸目傷懷帖池，自然情不能自已奈惑。情郁于中，自然要發(fā)之于外睡汹；家庭瑣屑便往往觸他之怒肴甸。他待我漸漸不同往日。但最近兩年的不見(jiàn)帮孔，他終于忘卻我的不好雷滋，只是惦記著我，惦記著我的兒子文兢。我北來(lái)后晤斩，他寫(xiě)了一信給我，信中說(shuō)道姆坚，“我身體平安澳泵，惟膀子疼痛利害，舉箸提筆兼呵，諸多不便兔辅，大約大去之期不遠(yuǎn)矣』魑梗”我讀到此處维苔，在晶瑩的淚光中，又看見(jiàn)那肥胖的懂昂，青布棉袍介时，黑布馬褂的背影。唉凌彬！我不知何時(shí)再能與他相見(jiàn)沸柔！
    </div>
  </div>
</body>

運(yùn)動(dòng)

側(cè)欄的運(yùn)動(dòng)

<style type="text/css">
  #div1{width:150px; height:200px; background:yellow; position: absolute;left:-150px;}
  #div1 span{width: 20px; height: 60px; background:#0f9; line-height: 20px;position: absolute;right:-20px; top:70px;}
</style>
<script type="text/javascript">
window.onload=function()
{
  var oDiv=document.getElementById('div1');

  oDiv.onmouseover=function()
  {
    startMove(0);
  }
  oDiv.onmouseout=function()
  {
    startMove(-150);
  }
};

var timer=null;

function startMove(iTarget)
{
  var oDiv=document.getElementById('div1');

  clearInterval(timer);
  timer=setInterval(function(){
    var speed=0;

    if(oDiv.offsetLeft>iTarget)   //當(dāng)div的左位置大于目標(biāo)參數(shù)時(shí)，應(yīng)該向左運(yùn)動(dòng)
      speed=-10;
    else
      speed=10;

    if(oDiv.offsetLeft==iTarget)
      clearInterval(timer);
    else
      oDiv.style.left=oDiv.offsetLeft+speed+'px';
  },30)
}

</script>

<body>
<div id="div1">
  <span>分享到</span>
</div>
</body>

輪播圖

  <style type="text/css">
    body{
      width: 960px;
      height:150px;
      margin:20px auto;
    }
    .play{
      width: 960px;
      height:150px;
      overflow: hidden;
      position: relative;
    }
    ol{
      position: absolute;
      right:10px;
      bottom: -5px;
      list-style: none;
      z-index: 10;
    }
    ol .active{background:yellow;}
    ol li{
      width:20px;
      height: 20px;
      float: left;
      background:#fff;
      text-align: center;
      line-height:20px;
      cursor: pointer;
      border: 1px solid #ccc;
      margin-left: 5px;
    }
    ul{
      list-style: none;
      clear:both;
      position: absolute;
      top:0;
      left:0;
      z-index:9;
    }
    ul li{
      width: 960px;
      height:150px;
    }
  </style>
  <script type="text/javascript">
    function $(id) {
      return typeof (id) == 'string' ? document.getElementById(id) : id
    }

    window.onload=function()
    {
      var aBtn=$('play').getElementsByTagName('ol')[0].getElementsByTagName('li');
      var oUl=$('play').getElementsByTagName('ul')[0];

      var now=0;

      for(var i=0;i<aBtn.length;i++)
      {
        aBtn[i].index=i;
        aBtn[i].onclick=function()
        {
          now=this.index;

          tab();
        }
      }

      function tab()
      {
        for(var i=0;i<aBtn.length;i++)
        {
          aBtn[i].className='';
        }
        aBtn[now].className='active';

        startMove(oUl,{top:-150*now});
      }

      function next()
      {
        now++;
        if(now==aBtn.length)
        {
          now=0;
        }

        tab();

      }

      var timer=setInterval(next,2000);

      $('play').onmouseover=function()
      {
        clearInterval(timer);
      };
      $('play').onmouseout=function()
      {
        timer=setInterval(next,2000);
      };
    };
  </script>
  <script type="text/javascript" src="完美運(yùn)動(dòng)框架.js"></script>

<body>
  <div id="play" class="play">
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
    <ul>
      <li style="margin-top: -16px;"><a href="#">![](images/1.jpg)</a></li>
      <li><a href="#">![](images/2.jpg)</a></li>
      <li><a href="#">![](images/3.jpg)</a></li>
      <li><a href="#">![](images/4.jpg)</a></li>
      <li><a href="#">![](images/5.jpg)</a></li>
    </ul>
  </div>
</body>

完美運(yùn)動(dòng)框架

function getStyle(obj,name)
{
  if(obj.currentStyle)
    return obj.currentStyle[name];  //IE
  else
    return getComputedStyle(obj,false)[name];  //FF chrome
}


function startMove(obj,json,fnEnd)
{
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){

    var bStop=true;  //假設(shè)所有的值都到了

    for(var attr in json)  //將json中的參數(shù)都循環(huán)一遍
    {
      var cur=0;

      if(attr=='opacity')
      {   //判斷傳入?yún)?shù)的是否為opacity
        cur=Math.round(parseFloat(getStyle(obj,attr))*100);
      }
      else
      {
        //用cur簡(jiǎn)化后面重復(fù)的getStyle(oDiv1,'height')
        cur=parseInt(getStyle(obj,attr));
      }

      // json[attr]  json中參數(shù)的目標(biāo)值
      var speed=(json[attr]-cur)/6;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);  //取整操作  緩沖運(yùn)動(dòng)

      //假設(shè)所有的點(diǎn)都到了目標(biāo)值  如果有一個(gè)點(diǎn)沒(méi)到 則為false
      if(cur!=json[attr])
        bStop=false;

      if(attr=='opacity')  //緩沖運(yùn)動(dòng)
      {
        obj.style.filter='alpha(opacity:'+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
      }
      else
      {
        obj.style[attr]=cur+speed+'px';
      }
    }

    //如果bStop是true铲敛，則關(guān)閉定時(shí)器褐澎，并且執(zhí)行fnEnd
    if(bStop)
    {
      clearInterval(obj.timer);

      if(fnEnd)fnEnd;
    }

  },30)
}

最后編輯于：2017.12.10 10:18:58

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市伐蒋，隨后出現(xiàn)的幾起案子工三，更是在濱河造成了極大的恐慌，老刑警劉巖先鱼，帶你破解...
沈念sama閱讀 206,378評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件徒蟆，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡型型，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,356評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)全蝶，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)闹蒜，“玉大人寺枉，你說(shuō)我怎么就攤上這事”谅洌” “怎么了姥闪？”我有些...
開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0贊 342
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)砌烁。經(jīng)常有香客問(wèn)我筐喳，道長(zhǎng)，這世上最難降的妖魔是什么函喉？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任避归，我火速辦了婚禮，結(jié)果婚禮上管呵，老公的妹妹穿的比我還像新娘梳毙。我一直安慰自己，他們只是感情好捐下，可當(dāng)我...
茶點(diǎn)故事閱讀 64,263評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布账锹。她就那樣靜靜地躺著，像睡著了一般坷襟。火紅的嫁衣襯著肌膚如雪奸柬。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1贊 285
城市分裂傳說(shuō)
那天婴程，我揣著相機(jī)與錄音廓奕，去河邊找鬼。笑死排抬，一個(gè)胖子當(dāng)著我的面吹牛懂从，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播蹲蒲，決...
沈念sama閱讀 38,349評(píng)論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼番甩，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了届搁？” 一聲冷哼從身側(cè)響起缘薛，我...
開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎卡睦，沒(méi)想到半個(gè)月后宴胧，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,469評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡表锻，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,938評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年恕齐，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瞬逊。...
茶點(diǎn)故事閱讀 38,059評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡显歧，死狀恐怖仪或，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情士骤，我是刑警寧澤范删，帶...
沈念sama閱讀 33,703評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站拷肌，受9級(jí)特大地震影響到旦，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜巨缘，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,257評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一添忘、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧带猴，春花似錦昔汉、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0贊 19
一樁弒父案靶病，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至口予，卻和暖如春娄周，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背沪停。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1贊 262
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工煤辨，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人木张。一個(gè)月前我還...
沈念sama閱讀 45,501評(píng)論 2贊 354
代替公主和親
正文我出身青樓众辨，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親舷礼。傳聞我的和親對(duì)象是個(gè)殘疾皇子鹃彻，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,792評(píng)論 2贊 345

js筆記

1.阻止默認(rèn)事件

2.正則

3.排序

4.按照 json 的屬性值排序

5..把 document.getElementById(id) 轉(zhuǎn)換成 $("id")

6.錨點(diǎn)定位方法

7..多點(diǎn)擊事件獲取點(diǎn)擊的是哪個(gè)

8.頁(yè)面到底部自動(dòng)加載內(nèi)容：

列表

appendchild

先把元素從原有的父級(jí)上刪掉 再添加到新的父級(jí)

表格

隔行變色

排序

添加和刪除

搜索

toLowerCase 忽略大小寫(xiě)

search 模糊搜索 如果沒(méi)有找到任何匹配的子串宾符，則返回 -1

split 分割字符串

表單

全選、不選灭翔、反選

鼠標(biāo)

拖拽

一串div跟著鼠標(biāo)移動(dòng)

選型卡

自定義滾動(dòng)條

運(yùn)動(dòng)

側(cè)欄的運(yùn)動(dòng)

輪播圖

完美運(yùn)動(dòng)框架

推薦閱讀更多精彩內(nèi)容

先把元素從原有的父級(jí)上刪掉再添加到新的父級(jí)

search 模糊搜索如果沒(méi)有找到任何匹配的子串宾符，則返回 -1