测试样例-demo-蚊子-前端博客

COPYHTML
<div class="content"></div>
<div class="data"></div>
<button>随机排序</button>

COPYCSS
.content{
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}
.content div{
    width: 26px;
    background-color: #73bebe;
    font-size: 12px;
    text-align: center;
    margin: 0 4px;
}

COPYJAVASCRIPT
// 初始化一个随机数组
function init(){
    let arr = [];
    for(let i=0; i<10; i++){
        arr.push(parseInt(Math.random()*100)+10);
    }
    return arr;
}
// 乱排
function sort(arr){
    return arr.sort((x, y)=>{
        return Math.random()>0.5 ? 1 : -1;
    });
}
// 渲染到页面中
function render(arr){
    var html = '';

    arr.forEach(item=>{
        html += `<div style="height: ${item}px;">${item}</div>`;
    });
    document.querySelector('.content').innerHTML = html;
}
var data = init();
render(data);

document.querySelector('button').addEventListener('click', ()=>{
    sort(data);
    render(data);
})