1. 程式人生 > >javascript常用模組

javascript常用模組

一、javascript陣列的幾種遍歷方式

window.onload=function () {
            //測試資料
            arr=[1,2,3,4,5,6]
            json={'廣東省':['深圳市','廣州市'],'湖南省':['長沙市','耒陽市']}

            // 方式一:不能遍歷json格式的資料型別
            for(var i=0;i<arr.length;i++){
                console.log(i+' '+arr[i])
            }

            
//方式二:兩種資料型別都可以遍歷 for(var i in json){ console.log(i+' '+json[i]) } //方式三:不能遍歷json格式的資料型別 json.forEach((value, index) => console.log(value,index)) //方式四:ES6新寫法,不能遍歷json格式的資料型別 for (var i of arr){ console.log(i) } }

 

二、二級聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="province">
        <option>請選擇省:</option>
    </select>

    <select id="city">
        <option>請選擇市:</option>
    </select
> <script> data={"湖南省":["長沙","衡陽"],'廣東省':['廣州','深圳']} provice=document.getElementById('province') city=document.getElementById('city') for(var i in data){ o=document.createElement('option') o.innerHTML=i provice.appendChild(o) } provice.onchange=function (event) { var len = city.options.length if(len>1){ for(var i=0;i<len-1;i++){ city.removeChild(city.options[1]) } } p= this.options[this.selectedIndex].innerHTML c=data[p] for(var i in c){ o=document.createElement('option') o.innerHTML=c[i] city.appendChild(o) } } </script> </body> </html>

三,三級聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="province">
        <option>請選擇省:</option>
    </select>

    <select id="city">
        <option>請選擇市:</option>
    </select>

    <select id="block">
        <option>請選擇區:</option>
    </select>
<script>
    data={"湖南省":[{"長沙":['嶽麓區','望城區']},{"衡陽":['珠暉區','耒陽市']}],'廣東省':[{"廣州市":['海珠區','天河區']},{"深圳市":['福田區','南山區']}]}
    tempdata=[]//[{"長沙":['嶽麓區','望城區']},{"衡陽":['珠暉區','耒陽市']}]
    lastdata=[]//['嶽麓區','望城區']

    provice=document.getElementById('province')
    city=document.getElementById('city')
    block=document.getElementById('block')

    //獲取省列表
    for(var i in data){
        o=document.createElement('option')
        o.innerHTML=i
        provice.appendChild(o)
    }

    //選中市後觸發
    city.onchange=function(){
        console.log(tempdata)
        var len = block.options.length
        if(len>1){
            for(var i=0;i<len-1;i++){
                block.removeChild(block.options[1])
            }
        }
        p= this.options[this.selectedIndex].innerHTML

        for(var j in tempdata){
            for(var k in tempdata[j]){
                if(p==k){
                    lastdata=tempdata[j][k]
                }
            }
        }
        for (var i in lastdata){
            o=document.createElement('option')
            o.innerHTML=lastdata[i]
            block.appendChild(o)
        }

    }
    //選中省後觸發,獲取市列表
    provice.onchange=function () {
        //變更省時清除市和區
        var clen = city.options.length
        var blen = block.options.length
        if(clen>1){
            for(var i=0;i<clen-1;i++){
                city.removeChild(city.options[1])
            }
        }
         if(blen>1){
            for(var i=0;i<blen-1;i++){
                block.removeChild(block.options[1])
            }
        }
        //this指向option的父級元素--> select元素,this.selectedIndex表示選中option的索引
        p= this.options[this.selectedIndex].innerHTML
        tempdata=data[p]//[{"長沙":['嶽麓區','望城區']},{"衡陽":['珠暉區','耒陽市']}]

        for(var i in tempdata){
            o=document.createElement('option')
            for(var j in tempdata[i]){
                console.log(j)
                o.innerHTML=j
                city.appendChild(o)
            }
        }
    }
</script>
</body>
</html>

四、左側選單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
          .left{
              width: 20%;
              height: 500px;
              float: left;
              background-color: wheat;
          }

          .right{
              float: left;
              width: 80%;
              height: 500px;
              background-color: lightgray;

          }

           .title{
               text-align: center;
               line-height: 40px;
               background-color: #0e90d2;
               color: white;
           }
        .item{
            padding: 10px;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="outer">
      <div class="left">
           <div class="item">
               <div class="title">選單一</div>
               <ul class="con">
                   <li>111</li>
                   <li>111</li>
                   <li>111</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">選單二</div>
               <ul class="con hide">
                   <li>222</li>
                   <li>222</li>
                   <li>222</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">選單三</div>
               <ul class="con hide">
                   <li>333</li>
                   <li>333</li>
                   <li>333</li>
               </ul>
           </div>
      </div>
      <div class="right"></div>
</div>
<script>
    var eles_title=document.getElementsByClassName("title");

    for(var i=0;i<eles_title.length;i++){
        eles_title[i].onclick=function(){
            this.nextElementSibling.classList.remove("hide")
            for(var j=0;j<eles_title.length;j++){
                if(eles_title[j]!=this){
                    eles_title[j].nextElementSibling.classList.add("hide")
                }
            }
        }
    }
</script>
</body>
</html>

五、模板對話方塊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: white;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: grey;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: wheat;
        }
    </style>
</head>
<body>
<div class="back">
    <input class="c" type="button" value="click">
</div>
<div class="shade hide handles"></div>

<div class="models hide handles">
    <input class="c" type="button" value="cancel">
</div>
<script>
    var eles=document.getElementsByClassName("c");
    var handles=document.getElementsByClassName("handles");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function(){
            if(this.value=="click"){
                for(var j=0;j<handles.length;j++){
                    handles[j].classList.remove("hide");
                 }
            }
            else {
                for(var j=0;j<handles.length;j++){
                    handles[j].classList.add("hide");
                }
            }
        }
    }
</script>

</body>
</html>

六、表格資料(全選反選取消)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button class="select_all">全選</button>
<button class="select_reverse">反選</button>
<button class="cancel">取消</button>

<hr>

<table class="server_table" border="2px" cellspacing="2px">
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>444</td>
        <td>444</td>
        <td>444</td>
    </tr>
</table>


<script>
/*
    var ele_all=document.getElementsByClassName("select_all")[0];
    var ele_reverse=document.getElementsByClassName("select_reverse")[0];
    var ele_cancel=document.getElementsByClassName("cancel")[0];
    var input_arr=document.getElementsByClassName("item");

    ele_all.onclick=function(){
          for(var i=0;i<input_arr.length;i++){
              console.log(input_arr[i]);
              var input=input_arr[i];
              input.checked=true;
          }
    };

     ele_cancel.onclick=function(){
          for(var i=0;i<input_arr.length;i++){
              console.log(input_arr[i]);
              var input=input_arr[i];
              input.checked=false;
          }
    };

    ele_reverse.onclick=function(){
          for(var i=0;i<input_arr.length;i++){
              console.log(input_arr[i]);
              var input=input_arr[i];
              if(input.checked){
                  input.checked=false;
              }
              else{
                  input.checked=true;
              }
          }
    };

*/

    var input_arr=document.getElementsByClassName("item");
    var button_arr=document.getElementsByTagName("button");
    for(var i=0;i<button_arr.length;i++){
        button_arr[i].onclick=function(){

            for (var j=0;j<input_arr.length;j++){
                 var inp=input_arr[j]
                 if(this.innerText=="全選"){
                     console.log("ok");
                 inp.checked=true;
             }
            else if(this.innerText=="取消"){
                  inp.checked=false;
             }
            else {
                 if(inp.checked){
                     inp.checked=false;
                 }else {
                     inp.checked=true;
                 }
             }
            }
        }
    }
</script>
</body>
</html>

七、select移動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            margin: 0 auto;
            background-color: darkgray;
            width: 80%;
            height: 600px;margin-top: 30px;
            word-spacing: -5px;

        }

        #left{
            display: inline-block;
            width: 100px ;
            height: 140px;
            background-color: wheat;
            text-align: center;
        }
        #choice{
            display: inline-block;
            height: 140px;
            background-color: darkolivegreen;
            vertical-align: top;
            padding:0 5px;
        }

        #choice button{
            margin-top: 20px;
        }

         #right{
            display: inline-block;
            width: 100px ;
            height: 140px;
            background-color: wheat;
            text-align: center;
            line-height: 140px;
        }
    </style>
</head>
<body>
<div class="outer">
    <select multiple="multiple" size="5" id="left">
        <option>紅樓夢</option>
        <option>西遊記</option>
        <option>水滸傳</option>
        <option>JinPingMei</option>
        <option>三國演義</option>
    </select>
    <span id="choice">
        <button id="choose_move"> > </button><br>
        <button id="all_move"> >> </button>
    </span>
    <select multiple="multiple" size="10" id="right">
        <option>放風箏的人</option>
    </select>
</div>
<script>
    var choose_move=document.getElementById("choose_move");
    var all_move=document.getElementById("all_move");
    var right=document.getElementById("right");
    var left=document.getElementById("left");
    var options=left.options;
    choose_move.onclick=function(){
        for (var i=0; i<options.length;i++){
             var option=options[i];
             if(option.selected==true){
                   // var news=option.cloneNode(true);
                   // console.log(news);
                   right.appendChild(option);
                   i--;
             }
         }
    };
    all_move.onclick=function(){
        for (var i=0; i<options.length;i++){
             var option=options[i];
                   right.appendChild(option);
                   i--;
         };
    };
    /*
   var buttons=document.getElementsByTagName("button");
   for(var i=0;i<buttons.length;i++) {
        buttons[i].onclick = function () {
            for (var i = 0; i < options.length; i++) {
                var option = options[i];
                if (this.innerText == ">") {
                    if (option.selected == true) {
                        // var news=option.cloneNode(true);
                        // console.log(news);
                        right.appendChild(option);
                        i--;
                    }
                } else {
                    right.appendChild(option);
                    i--;
                }
            }
        };
    }
   */
</script>
</body>
</html>

八、跑馬燈

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style>
    *{margin:0; padding:0; list-style:none;}
    body{
        font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
    }
    h3{
        text-align: center;
        color:darkcyan;
        margin-top: 30px;
        letter-spacing: 5px;
    }
    .box{
      width: 1000px;
      margin:50px auto 0px;
    }
    #title{
      line-height: 40px;
      background-color: rgb(247,247,247);
      font-size: 16px;
      font-weight: bold;
      color: rgb(102,102,102);
    }
    #title span{
      float: left;
      width: 166px;
      text-align: center;
    }
    #title span:hover{
      /*color: black;*/
      cursor: pointer;
    }
    #content{
      margin-top: 20px;
    }
    #content li{
      width: 1050px;
      display: none;
      background-color: rgb(247,247,247);
    }
    #content li div{
      width: 156px;
      margin-right: 14px;
      float: left;
      text-align: center;
    }
    #content li div a{
      font-size: 14px;
      color: black;
      line-height: 14px;
    /*  float: left;*/
    display: inline-block;
      margin-top: 10px;
    }
    #content li a:hover{
      color: #B70606;
    }
    #content li div span{
        font-size: 16px;
        line-height: 16px;
        /*float: left;*/
        display: block;
        color: rgb(102,102,102);
        margin-top: 10px;
      }
    #content img{
      float: left;
      width: 155px;
      height: 250px;
    }
    #title .select{
      background-color: #2459a2;
      color: white;
        border-radius: 10%;
    }
    #content .show{
      display: block;
    }

    .show span{
        color: red!important;
        font-size: 30px;
    }
  </style>
</head>

<body>
    <h3 id="wel">京東商城歡迎您</h3>
    <!--  direction="right up down left" -->
<!--  behavior:滾動方式(包括3個值:scroll、slide、alternate) -->
<!--  說明:scroll:迴圈滾動,預設效果;slide:只滾動一次就停止;alternate:來回交替進行滾動。 -->
<!--  scrollamount="5" 滾動速度 -->

<marquee behavior="scroll" direction="right">歡迎您苑昊先生</marquee>
    <script>

    function test(){
        var mywel = document.getElementById("wel");
        var content = mywel.innerText;

        var f_content = content.charAt(0);
        var l_content = content.substring(1,content.length);

        var new_content = l_content + f_content;
        mywel.innerText = new_content;

    }

    // setInterval("test();", 500);
    </script>
    <div class="box">
      <p id="title">
        <span class="select">家用電器</span>
        <span>傢俱</span>
        <span>汽車</span>
        <span>食品</span>
        <span>女鞋</span>
        <span>醫療保健</span>
      </p>

      <ul id="content">
        <li class="show">

          <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容聲(Ronshen)冰箱</a><span>價格:5600</span></div>
          <div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣機"><a href="#">海爾洗衣機</a><span>價格:5400</span></div>
          <div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="電飯煲"><a href="#">福庫(CUCKOO)電飯煲</a><span>價格:3999</span></div>
          <div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智慧電視"><a href="#">三星智慧電視</a><span>價格:8999</span></div>
          <div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="淨水器"><a href="#">淨水器</a><span>價格:1300</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空氣淨化器"><a href="#">空氣淨化器</a><span>價格:5300</span></div>
        </li>

        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>

        </li>
        <li>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
        </li>
        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>

        </li>
        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
        </li>
        <li>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
        </li>
      </ul>
    </div>

    <script>
      var title=document.getElementById('title');
      var content=document.getElementById('content');
      var category=title.getElementsByTagName('span');
      var item=content.getElementsByTagName('li');

      for (var i = 0; i < category.length; i++) {
          category[i].index=i;
          category[i].onclick=function(){
            for (var j = 0; j < category.length; j++) {
              category[j].className='';
              item[j].className='';
            }
            this.className='select';
            item[this.index].className='show';
          }
      }

    </script>
</body>
</html>

九、搜尋框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


<script>

function Focus(){

    var input=document.getElementById("ID1");
    if (input.value=="請輸入使用者名稱"){
        input.value="";
    }

}

function Blurs(){

    var ele=document.getElementById("ID1");
    var val=ele.value;
    if(!val.trim()){

        ele.value="請輸入使用者名稱";
    }
}

</script>
</head>
<body>
    <input id="ID1" type="text" value="請輸入使用者名稱" onblur="Blurs()" onfocus="Focus()">
</body>
</html>

參考文件:https://www.cnblogs.com/yuanchenqi/articles/6893904.html