02-渲染数据分析

最新推荐文章于 2024-06-12 22:10:56 发布

牛先森家的牛奶

最新推荐文章于 2024-06-12 22:10:56 发布

阅读量144

点赞数

分类专栏：案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42681295/article/details/106809419

版权

案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

数组和对象的结合渲染

数组和对象的结合

数组和对象的结合

简易渲染案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      display: flex;
      justify-content: space-evenly;
      margin: 0;
      padding: 0;
      margin: 100px auto;

    }

    ul li {
      list-style: none;
      border: 1px solid #ccc;
      padding: 30px;
      box-shadow: 0px 0px 5px 0px #000;
    }
  </style>
</head>

<body>
  <ul id="list">
    <!-- <li>
            <h2>1号客户</h2>
            <p>姓名：涛涛</p>
            <p>年龄：30</p>
            <p>性别：女</p>
        </li> -->
  </ul>
  <script>
    // 数组里面的数据可以为任意数据类型的值
    // var arr = [1, 2, 3, 'a', true, [1, 2, 3], { name: 'aaa' }, function () {
    //     console.log(1);
    // }];

    /* var person1 = {
        id: 1,
        name: '牛牛',
        age: 49,
        sex: '男'
    }
    var person2 = {
        id: 2,
        name: '牛儿',
        age: 39,
        sex: '男'
    }
    list.innerHTML = '<li>' +
        ' <h2>' + person1.id + '号客户</h2>' +
        ' <p>姓名：' + person1.name + '</p>' +
        '<p>年龄：' + person1.age + '</p>' +
        ' <p>性别：' + person1.sex + '</p>' +
        '</li>';

    list.innerHTML += '<li>' +
        ' <h2>' + person2.id + '号客户</h2>' +
        ' <p>姓名：' + person2.name + '</p>' +
        '<p>年龄：' + person2.age + '</p>' +
        ' <p>性别：' + person2.sex + '</p>' +
        '</li>'; */
    //以上重复的代码 重复的带使用循环来写
    var jishi = [
      { id: 1, name: 'niuniu', age: 19, sex: '男' },
      { id: 2, name: 'niuer', age: 29, sex: '男' },
      { id: 3, name: 'qiangqiang', age: 39, sex: '男' },
      { id: 4, name: 'fuqiang', age: 18, sex: '女' },
      { id: 5, name: 'xioaniu', age: 28, sex: '女' },
      { id: 6, name: 'xiaoniuniu', age: 38, sex: '女' }
    ]
    //  把年龄最低的排在最前面  
    //  当数组中的数据是 对象的时候，可以根据对象的属性 的属性值来排序
    jishi.sort(function (a, b) {
      // 根据对象的 age属性来排序
      return a.age - b.age
    })

    for (var i = 0; i < jishi.length; i++) {
      list.innerHTML += '<li>' +
        ' <h2>' + jishi[i].id + '号客户</h2>' +
        ' <p>姓名：' + jishi[i].name + '</p>' +
        '<p>年龄：' + jishi[i].age + '</p>' +
        ' <p>性别：' + jishi[i].sex + '</p>' +
        '</li>';
    }
  </script>
</body>

</html>

成绩渲染页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 {
      text-align: center;
    }

    table {
      border: 1px solid #ccc;
      width: 600px;
      height: 400px;
      border-spacing: 0px;
      border-collapse: collapse;
      margin: auto;
    }

    table td {
      border: 1px solid #ccc;
      text-align: center;
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        <th>总成绩</th>
        <th>备注</th>
      </tr>
    </thead>
    <tbody id="content">
      <!-- <tr>
                <td>2</td>
                <td>89</td>
                <td>78</td>
                <td>120</td>
                <td>287</td>
                <td>英语成绩最高</td>
            </tr> -->
    </tbody>
  </table>
  <script>
    var students = [
      { xuehao: 1, chinese: 105, math: 62, english: 118 },
      { xuehao: 2, chinese: 89, math: 78, english: 120 },
      { xuehao: 3, chinese: 86, math: 64, english: 91 },
      { xuehao: 4, chinese: 78, math: 99, english: 91 },
      { xuehao: 5, chinese: 107.5, math: 97, english: 70 },
      { xuehao: 6, chinese: 112, math: 61, english: 92 },
      { xuehao: 7, chinese: 101, math: 79, english: 104 },
      { xuehao: 8, chinese: 71, math: 72, english: 105 },
      { xuehao: 9, chinese: 56, math: 68, english: 61 },
      { xuehao: 10, chinese: 98, math: 83, english: 77 }
    ]
    // 动态的给数组中的对象添加数据
    for (var j = 0; j < students.length; j++) {
      students[j].total = students[j].chinese + students[j].math + students[j].english;
    }
    // 要记录语文成绩最高的学员并且用res1记录
    var res1 = students.sort(function (a, b) {
      return b.chinese - a.chinese
    })[0]

    // 要记录数学成绩最高的学员并且用res2记录
    var res2 = students.sort(function (a, b) {
      return b.math - a.math
    })[0]

    // 要记录英语成绩最高的学员并且用res3记录
    var res3 = students.sort(function (a, b) {
      return b.english - a.english
    })[0]


    // 以总成绩最高的排序
    students.sort(function (a, b) {
      return b.total - a.total
    })

    // 循环students 把数据渲染到页面
    for (var i = 0; i < students.length; i++) {
      // tips 备注
      var tips = '';
      // 那当前对象跟之前的记录语文成绩最高的判断
      if (students[i].chinese === res1.chinese) {
        tips = '语文成绩最高'
      } else if (students[i].math === res2.math) {
        tips = '数学成绩最高'
      } else if (students[i].english === res3.english) {
        tips = '英语成绩最高'
      }
      // 循环渲染结构
      content.innerHTML += '<tr>' +
        '<td>' + students[i].xuehao + '</td>' +
        '<td>' + students[i].chinese + '</td>' +
        '<td>' + students[i].math + '</td>' +
        '<td>' + students[i].english + '</td>' +
        '<td>' + students[i].total + '</td>' +
        '<td>' + tips + '</td>' +
        '</tr>'
    }
  </script>
</body>

</html>

根据条件显示商品

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>根据数据生成一个商品列表</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        p {
            margin: 5px;
        }

        #goodslist {
            padding: 20px;
        }

        #goodslist img {
            width: 200px;
        }

        #goodslist ul {
            overflow: hidden;
        }

        #goodslist li {
            float: left;
            border: 1px dotted #ddd;
            padding-right: 20px;
            margin-right: 20px;
            margin-bottom: 10px;
        }


        .price span {
            color: #f00;
        }
    </style>
</head>

<body>
    <h1>根据数据生成一个商品列表</h1>
    <div>
        <input type="button" id="jiage" value="根据价格排序">
        <input type="button" id="xiaoliang" value="根据销量排序">
        <input type="button" id="pingjia" value="根据评价排序">
    </div>
    <div id="goodslist">
    </div>
    <script>

        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];
        // 获取元素
        var goodslist = document.getElementById('goodslist');
        // 渲染数据
        goodslist.innerHTML = render(data);

        jiage.onclick = function () {
            data.sort(function (a, b) {
                return b.sale - a.sale;
            })
            goodslist.innerHTML = render(data);
        }
        xiaoliang.onclick = function () {
            data.sort(function (a, b) {
                return b.sales - a.sales;
            })
            goodslist.innerHTML = render(data);
        }
        pingjia.onclick = function () {
            data.sort(function (a, b) {
                return b.evaluate - a.evaluate
            });
            goodslist.innerHTML = render(data);
        }

        function render(dataList) {
            var content = '<ul>';
            // 遍历数据，生成li
            dataList.forEach(function (item, idx, arr) {
                content += '<li data-guid="' + item.id + '">' +
                    '<img src="' + item.imgurl + '">' +
                    '<h4>' + item.name + item.id + '</h4>' +
                    '<p class="color">颜色：' + item.color + '</p>' +
                    '<p class="price">原价：<del>' + item.price.toFixed(2) + '</del></p>' +
                    '<p class="price">现价：<span>￥' + item.sale.toFixed(2) + '</span></p>' +
                    '<p class="sales">销量：<span>' + item.sales + '</span></p>' +
                    '<p class="evaluate">评价：<span>' + item.evaluate + '</span></p>' +
                    '</li>';
            });
            // 闭合ul
            content += '</ul>';
            return content;
        }

    </script>
</body>

</html>

显示最新的5条新闻

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 {
      text-align: center;
    }

    .news-list {
      border: 2px solid #ddd;
      border-radius: 10px;
      width: 600px;
      margin: 0 auto;
      padding: 10px;
    }

    .news-list h4 {
      margin: 0 0 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }

    .news-list ul {
      padding: 0;
      margin: 0;
      list-style: none;
      line-height: 2;
    }

    .form {
      margin: 100px auto 0;
      width: 600px;
      text-align: center;
      overflow: hidden;
    }

    .form input {
      float: left;
      width: 480px;
      height: 50px;
      box-sizing: border-box;
      padding: 10px;
    }

    .form button {
      float: left;
      width: 120px;
      height: 50px;
    }
  </style>
</head>

<body>
  <div class="news-list">
    <h4>最新消息</h4>
    <ul id="newsList">
      <!-- <li><a href="#">1.小明由于调戏女老师再次被滚粗教室</a></li>
            <li><a href="#">2.iPhone10发布,屏幕高度亮瞎了所有小伙伴</a></li>
            <li><a href="#">3.为了弘扬乐于助人的精神，中国人大开会决定授予老王“中国好邻居”称号</a></li> -->
    </ul>
  </div>
  <div class="form">
    <input type="text" id="news"><button id="btnAdd">添加</button>
  </div>

  <script>
    var newLists = [
      '小明由于没写作业再次被滚粗教室',
      '爱疯18发布,屏幕高度亮瞎了所有小伙伴',
      '为了弘扬乐于助人的精神，中国人大开会决定授予老王“中国好邻居”称号'
    ]
    // 循环数组 把数组里面的数据 添加到页面中
    function render(arr, ele) {
      ele.innerHTML = arr.map(function (item, index) {
        return '<li><a href="#">' + (index + 1) + '.' + item + '</a></li>'
      }).join('')
    }
    render(newLists, newsList)


    //给添加按钮添加点击事件
    btnAdd.onclick = function () {
      // 获取输入框的内容 添加到数组最前面
      newLists.unshift(news.value);
      // 是显示 5条信息 当数组的长度 大于 5 的时候 ，把最后面的一条数据删除
      if (newLists.length > 5) {
        newLists.pop()
      }

      // 数组里面的值更改了，但是结构没有变化
      // 当数组变化之后，需要再次渲染页面
      render(newLists, newsList);

      // 清空 输入框
      news.value = ''
    }
  </script>

</body>

</html>

牛先森家的牛奶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02-渲染数据分析

数组和对象的结合<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { display:
复制链接

扫一扫

专栏目录