原生JS实现随机加载数据

、

我们平时可以看到，百度首页会有类似的随机切换数据的功能，是怎么做出来的呢，我们可以试着用原生JS实现一下：

需求：点击换一换按钮，实现列表数据随机切换

思路：

首先循环数据数组，这里就写死，真实项目中，数据会从后端获取
通过math.floor(i * math.random)，让每个i元素乘以随机数，生成新的随机值，
通过for in 循环数组内部对象，结合随机值，返回随机对象
然后把随机对象渲染到显示的列表li元素中

Code as Follows:

  <div class='box'>
        <ul>
            <li>葡萄牙3:3战平西班牙</li>
            <li>莱昂纳多出演新片</li>
        </ul>
        <button id='btn'>换一换</button>
  </div>

    var dataList = [
            {'梅西C罗决赛无望': '厉害了!中国激光3D打印能造战机'},
            {'《西游记》师徒四人重聚拍新剧': '布拉德皮特交往新欢'},
            {'复仇者联盟票房': '当当网618特惠'},
            {'人工智能与区块链的对决': '美朝在新加坡达成历史性会晤'},
            {'新能源的未来': '谷歌，百度自动驾驶汽车'},
            {'iphoneX即将发布': '世界杯激战正酣'}
        ];
        var btn = document.getElementById('btn');
        var lis = document.getElementsByTagName('li');
        btn.onclick = function() {
            for(var i = 1; i <= dataList.length; i++){
                // 生成随机值
                var random = Math.floor(i * Math.random())
                    for(var k in dataList[random]){
                        // 让显示列表的数据等于随机数据
                        lis[0].innerHTML = k;
                        lis[1].innerHTML =  dataList[random][k];
                    }
            }
        }

原生JS实现随机加载数据

猜你喜欢