Javascript基础案例篇

1.手风琴案例

    // 模拟后台返回的数据
    let arr = [
        './images/1.jpg',
        './images/2.jpg',
        './images/3.jpg',
        './images/4.jpg',
        './images/5.jpg',
        './images/6.jpg',
        './images/7.jpg',
    ]
​
    let srt = '<div class="box">';
    for (let i=0;i<arr.length;i++) {
        srt+=`<div><img src="${arr[i]}"></div>`;
    }
    srt += '</div>';
​
    document.write(srt);

2.柱状图案例

    // 定义一个数组模拟后台返回的数据         
    let month = [100, 120, 230, 110, 300, 260, 130, 90, 300, 200, 150, 80];
​
​
    let srt = '<div class="box">';
    for (let i = 1; i < month.length; i++) {
      srt += `<div style="height:${month[i]}px">
                        <span>${month[i]}</span>
                        <h3>${i + 1}月</h3>
                    </div>`;
      for (let j = 0; j < month.length - i; j++) {
        if (month[j] > month[j + 1]) {
          let a = month[j];
          month[j] = month[j + 1];
          month[j + 1] = a;
        }
      }
    }
​
    srt += '</div>';
    document.write(srt);

3.冒泡排序案例

    // 定义一个数组模拟后台返回的数据
    let month = [100, 120, 230, 110, 300, 260, 130, 90, 300, 200, 150, 80];
​
    for (let i = 1; i < month.length; i++) {
      for (let j = 0; j < month.length - i; j++) {
        if (month[j] > month[j + 1]) {
          let a = month[j];
          month[j] = month[j + 1];
          month[j + 1] = a;
        }
      }
    }
​
    console.log(month);