1.todolist

  1. <body>
  2.     <input type="text" id="input">
  3.     <h2>历史搜索</h2>
  4.     <div id="app">
  6.     </div>
  7.     <script>
  8.         var input = document.getElementById("input");
  9.         var app = document.getElementById("app");
  10.         var historys = []
  11.         /* 1、获取输入框的值 */
  12.         input.onkeydown = function (event) {
  13.             if (event.keyCode == 13) {
  14.                 // console.log(this.value)
  15.                 /* 2、只要数组中没有的值同时字符不能空,才向数组添加 */
  16.                 if (this.value != ""  && historys.indexOf(this.value) == -1) {
  17.                     var p = document.createElement("p");
  18.                     p.innerHTML = this.value;
  19.                     app.prepend(p);
  20.                     historys.unshift(this.value);
  21.                     this.value = ""
  22.                     console.log(historys)
  23.                 }else{
  24.                     alert("输入的字段不能是空字符或相同的字段")
  25.                 }
  27.             }
  28.         }
  29.     </script>
  30. </body>

2.求数组的和

  1. <script>
  2.         var arr = [1,2,3,4,5,8]
  3.         var sum = 0;
  4.         for(var i = 0;i<arr.length;i++){
  5.             sum +=arr[i];
  6.         }
  7.         console.log(sum);
  8.     </script>

3.大于16岁组成一个新数组

  1. <script>
  2.         // age >16 
  3.         var arr = [
  4.             {name:"李四" , age:"18岁"},
  5.             {name:"李四" , age:"20岁"},
  6.             {name:"李四" , age:"8岁"},
  7.             {name:"李四" , age:"16岁"},
  8.         ]
  9.         var test = [];
  10.         for(var i = 0; i<arr.length; i++){
  11.             var age = parseInt(arr[i].age);
  12.             if(age>16){
  13.                 console.log(arr[i]);
  14.                 test.push(arr[i]);
  15.             }
  16.         }
  17.        console.log(test);
  18.     </script>

4.一个数组分成三个数组

  1. <script>
  2.         var arr = [1,2,3,4,5,6,7,8,9]
  3.         var test = [];
  4.         for(var i = 0; i<arr.length; i+=3){
  5.             test.push(arr.slice(i,i+3));
  6.         }
  7.         console.log(test);
  8.     </script>

5.求最小值

  1. <script>
  2.         var arr = [4,6,18,1];
  3.         var min = arr[0];
  4.         for(var i=1; i<arr.length; i++){
  5.             if(min>arr[i]){
  6.                 min = arr[i];
  7.             }
  8.         }
  9.         console.log(min);
  10.     </script>

6.sort

6.1

  1. <script>
  2.         var arr = [{
  3.             name:"肯德基",price:100,distance:100
  4.         },
  5.         {
  6.             name:"必胜客",price:200,distance:500
  7.         },
  8.         {
  9.             name:"华莱士",price:50,distance:1000
  10.         }
  11.     ]
  12.     /* 根据价格进行升序 --从小到大 */
  13.     arr.sort(function(a,b){
  14.         return a.price-b.price;
  15.     })
  16.     console.log(arr);
  17.     /* 根据距离进行降序 --从大到小 */
  18.     arr.sort(function(a,b){
  19.         return b.distance-a.distance;
  20.     })
  21.     console.log(arr);
  22.     </script>

6.2

  1. <body>
  2.     <select  id="mySelect">
  3.         <option value="price">低价优先</option>
  4.         <option value="distance">距离优先</option>
  5.     </select>
  6.     <script>
  7.          var arr = [{
  8.             name:"肯德基",price:100,distance:100
  9.         },
  10.         {
  11.             name:"必胜客",price:200,distance:1500
  12.         },
  13.         {
  14.             name:"华莱士",price:50,distance:1000
  15.         }
  16.     ]
  17.     var mySelect = document.getElementById("mySelect");
  18.     // console.log(mySelect)
  19.     mySelect.onchange = function(){
  20.         console.log(this.value);
  21.         var value = this.value;
  22.         arr.sort(function(a,b){
  23.             return a[value]-b[value];
  24.         })
  25.         /* 对象的某个属性是变量,不能使用.。只能使用[] */
  26.         console.log(arr);
  27.     }
  28.     </script>
  29. </body>

7.对象的某个属性是变量，不能使用. 只能使用[]

  1. <script>
  2.         //对象的某个属性是变量，不能使用.  只能使用[]
  3.         var obj = {
  4.             name:"lisi",
  5.             age:18
  6.         }
  7.         var value = "name";
  8.         console.log(obj[value]);
  9.     </script>

7.1 sum+=arr[i].price*arr[i].num;

  1.  <script>
  2.          var arr = [{
  3.             name:"肯德基",price:100,distance:100,num:2
  4.         },
  5.         {
  6.             name:"必胜客",price:200,distance:1500,num:1
  7.         },
  8.         {
  9.             name:"华莱士",price:50,distance:1000,num:5
  10.         }
  11.     ]
  12.     /* sum */
  13.     var sum = 0;
  14.     for(var i=0;i<arr.length;i++){
  15.         sum+=arr[i].price*arr[i].num;
  16.     }
  17.     console.log(sum)
  18.     </script>

8.join 例子

8.1 吴京/章子怡/徐峥

  1. <body>
  2.     <p id="app"></p>
  3.     <script>
  4.         var directs = [
  5.             {name:"吴京",id:1001},
  6.             {name:"章子怡",id:1002},
  7.             {name:"徐峥",id:1003}
  8.         ]
  9.         /* str =吴京/章子怡/徐峥 */
  10.         /* 1.  var arr = ["吴京","章子怡","徐峥"] */
  11.         var  arr = [ ];
  12.         for(var i=0;i<directs.length;i++){
  13.             console.log(directs[i].name)
  14.             arr.push(directs[i].name)
  15.         }
  16.         console.log(arr)
  17.         /* 2. str =吴京/章子怡/徐峥*/
  18.         var str = arr.join("/");
  19.         console.log(str)
  20.         /* 3. */
  21.         var app = document.getElementById("app");
  22.         app.innerHTML = str;
  23.     </script>
  24. </body>

8.2 2019-03-09

  1. <body>
  2.     <div id="app"></div>
  3.     <script>
  4.         var dates = ["2019","03","09"]
  5.         /* 2019-03-09 */
  6.         var str = dates.join("-");
  7.         console.log(str)
  8.         var app = document.getElementById("app");
  9.         app.innerHTML =str;
  10.     </script>
  11. </body>

9.forEach

9.1

  1. <script>
  2.         var arr = [2,3,4];
  3.         var newArr = [];
  4.         arr.forEach(item=>{
  5.             console.log(item)
  6.             newArr.push(item*2);
  7.         })
  8.         console.log(newArr)
  9.     </script>

9.2

  1. <script>
  2.         var arr = [
  3.             {name:"html",value:"12px"},
  4.             {name:"css",value:"13px"},
  5.             {name:"js",value:"14px"}
  6.         ]
  7.         /* 
  8.         var nums = [12,13,14]
  9.         [24,26,28]
  10.         "24-26-28"
  11.          */
  12.         var nums = [];
  13.         arr.forEach(item=>{
  14.             var value = parseInt(item.value)*2;
  15.             nums.push(value);
  16.         })
  17.         console.log(nums)
  18.         var str = nums.join("-");
  19.         console.log(str)
  20.     </script>

10. map

  1. <script>
  2.         var arr = [
  3.             {name:"html",value:"12px"},
  4.             {name:"css",value:"13px"},
  5.             {name:"js",value:"14px"}
  6.         ]
  7.         arr.map(item=>{
  8.             var value = parseInt(item.value)*2;
  9.             item.value = value;
  10.         })
  11.         console.log(arr)
  12.     </script>

11. filter

11.1 大于11岁

  1. <script>
  2.         /* 只要是达到某个条件,就会返回一个新的数组 */
  3.         var students = [
  4.             {name:"李四",age:"18岁"},
  5.             {name:"李二",age:"11岁"},
  6.             {name:"李五",age:"19岁"},
  7.             {name:"王四",age:"22.5岁"},
  8.         ]
  9.         /* 大于11岁,返回一个新的数组 */
  10.         var result = students.filter(item=>{
  11.             return parseFloat(item.age)>11;
  12.         })
  13.         console.log(result)
  14.     </script>

11.2 输入李

  1. <body>
  2.     <input type="text" id="app">
  3.     <script>
  5.          var students = [
  6.             {name:"李四",age:"18岁"},
  7.             {name:"李二",age:"11岁"},
  8.             {name:"李五",age:"19岁"},
  9.             {name:"王四",age:"22.5岁"},
  10.         ]
  11.         var app = document.getElementById("app");
  12.         app.onkeydown = function(event){
  13.             if(event.keyCode == 13){
  14.                 var keyword = this.value;
  15.                 console.log(keyword)
  16.                 var res = students.filter(item=>{
  17.                     return item.name.includes(keyword);
  18.                 })
  19.                 console.log(res)
  20.             }
  21.         }
  22.     </script>
  23. </body>

12. input输入框，输入谁的id删除谁

  1. <body>
  2.     <input type="text" id="app">
  3.     <script>
  5.         var arr = [
  6.             {name:"李四",id:1001},
  7.             {name:"王四",id:1002},
  8.             {name:"张四",id:1003},
  9.             {name:"赵四",id:1004}
  10.         ]
  11.         /* 
  12.         input输入框，输入谁的id删除谁
  13.          */
  14.        /* 
  15.        1、要获取输入框中的值
  16.        2、根据id值,获取数组中对应项的下标
  17.        3、删除
  18.         */
  19.        var app = document.getElementById("app");
  20.        app.onkeydown = function(event){
  21.            if(event.keyCode==13){
  22.                var id = Number(this.value);
  23.                var index = arr.findIndex(item=>{
  24.                    return item.id ==id;
  25.                })
  26.                arr.splice(index,1);
  27.                console.log(arr);
  28.            }
  29.        }
  30.     </script>
  31. </body>

13. 历史搜索

  1. <body>
  2.     <h2>历史搜索</h2>
  3.     <input type="text" id="app">
  4.     <div id="container">
  6.     </div>
  7.     <script>
  8.         /* 1、获取输入框的值 */
  9.         var historys = [];
  10.         $("#app").keyup(function (event) {
  11.             if (event.keyCode == 13) {
  12.                 /* 2.将值添加到一个数组里面去 */
  13.                 var value = $(this).val();
  14.                 var template = `
  15.                        <button>${value}</button>
  16.                  `
  17.                 /* 只有数组中不包含输入的关键字才向数组添加 */
  18.                 if (value && !historys.includes(value)) {
  19.                     historys.unshift(value);
  20.                     console.log(historys)
  21.                     /* 3、渲染数据到页面 */
  23.                     $("#container").prepend(template)
  24.                     $(this).val("")
  25.                 } else {
  26.                     /* 4.当输入的值数组中存在的时候,让其至于数组的首位 */
  27.                     console.log(value)
  28.                     var index = historys.indexOf(value);
  29.                     var res = historys.splice(index, 1);
  30.                     historys.unshift(value);
  31.                     console.log(historys)
  32.                     /* ui联动 */
  33.                     $("#container button").eq(index).remove();
  34.                     $("#container").prepend(template)
  35.                 }
  37.             }
  38.         })
  39.     </script>
  40. </body>

14. 数组中被搜索的值,置于顶部

  1. <body>
  2.     <input type="text" id="app">
  3.     <script>
  4.         /* 让数组中被搜索的值,至于顶部 */
  5.         var arr= ["html","css","js","vue","react"]
  6.         /* ["js","html","css","vue","react"] */
  7.         $("#app").keyup( function(event){
  8.             if(event.keyCode==13){
  9.                 var value = $(this).val();
  10.                 if(arr.indexOf(value)!=-1){
  11.                     console.log(value)
  12.                     var index = arr.indexOf(value);
  13.                     arr.splice(index,1);
  14.                     arr.unshift(value);
  15.                     console.log(arr);
  16.                 }
  17.             }
  18.         })
  19.     </script>
  20. </body>

15. 将一个数组分成多个数组

  1. <body>
  2.     <script>
  3.         /* 查询
  4.         slice()
  5.         indexOf
  6.         includes
  7.          */
  8.         var arr = [2,3,4,5,9];
  9.                 /* 0  1 2 3 4 */
  10.         var res = arr.slice(1,4);
  11.         console.log(res);
  12.         console.log(arr);
  14.         var test  = [1,2,3,4,5,6,7,8,9,10,11,12]
  15.         /* [[1,2,3,4],[5,6,7,8],[9,10,11,12]] */
  16.         /*
  17.         0 4
  18.         4 8
  19.         8 12
  20.          */
  21.         var sum = [];
  22.         for(var i=0;i<test.length;i=i+4){
  23.             sum.push(test.slice(i,i+4))
  24.         }
  25.         console.log(sum)
  26.     </script>
  27. </body>

16. 网易云

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .container{
  14.             width: 730px;
  15.             height: 460px;
  16.             border: 1px solid rgb(191, 191, 191);
  17.             padding: 20px;
  18.             margin: 0 auto;
  19.             display: flex;
  20.             flex-wrap: wrap;
  21.             justify-content: space-between;
  22.         }
  23.         .container .item{
  24.             width: 140px;
  25.             height: 204px;
  26.             margin-right: 42px;
  27.             overflow: hidden;
  28.             position: relative;
  29.             /* border: 1px solid #333; */
  30.         }
  31.         .container .item:nth-child(4n+4){
  32.             width: 140px;
  33.             margin-right: 0;
  34.         }
  35.         .item img{
  36.             width: 100%;
  37.         }
  38.         .title{
  39.             width: 140px;
  40.             height: 27px;
  41.             background-color: #333;
  42.             position: absolute;
  43.             top: 113px;
  44.             opacity: 0.6;
  45.             color:white;
  46.             font-size: 12px;
  47.             box-sizing: border-box;
  48.             padding-top: 6px;
  49.             padding-left: 10px;
  50.             overflow: hidden;
  51.         }
  52.         .icon-24gf-headphones{
  53.             float: left;
  54.             margin-right: 5px;
  55.         }
  56.         .title .icon-bofang{
  57.             font-size: 18px;
  58.             float: right;
  59.         }
  60.     </style>
  61.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  62.     <link rel="stylesheet" href="http://at.alicdn.com/t/font_2781855_y0crm7ypji.css">
  63. </head>
  64. <body>
  65.     <div class="container">
  67.     </div>
  68.     <script>
  69.         // 1、将远程的数据拿到本地
  70.         var url = 'http://47.108.197.28:3000/top/playlist/?limit=8'
  72.         $.ajax({
  73.             url,
  74.             success:res=>{
  75.                 // console.log(res.playlists);
  76.                 var playlists = res.playlists
  77.                 playlists.forEach(item => {
  78.                     console.log(item);
  79.                     var {name,coverImgUrl,playCount} = item
  80.                     var count = Math.floor(playCount/10000)+"万"
  81.                     //console.log(count);
  82.                     var template = `
  83.                         <div class="item">
  84.                             <img src="${coverImgUrl}" alt="">
  85.                             <p>${name}</p>
  86.                             <div class="title">
  87.                                 <i class="iconfont icon-24gf-headphones"></i>
  88.                                 <i class="iconfont icon-bofang"></i>  
  89.                                 ${count}
  90.                             </div>
  91.                         </div>
  92.                     `
  93.                     $('.container').append(template)    
  94.                 });
  95.             }
  96.         })
  98.     </script>
  99. </body>
  100. </html>