携程前端制作排序动画设计题

最新推荐文章于 2022-07-21 18:05:47 发布

lzcwds

最新推荐文章于 2022-07-21 18:05:47 发布

阅读量196

点赞数

分类专栏： javascript 笔试

本文链接：https://blog.csdn.net/lzcwds/article/details/82495525

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

笔试

2 篇文章 0 订阅

订阅专栏

1.简述

看到这个面试题。感觉挺有意思的。题目大概意思就是把排序的过程用动画的效果体现出来。这既考了排序算法的知识，又考了前端的基础知识。

2.实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #container{
        position: relative;
    }
    .num-box{
        position: absolute;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #666666;
        border-radius: 2px;
        transition: left  2s;
    }

</style>
<body>
<div id="container">

</div>
<script>
    //实现从小到大排列
    let arr = [12,48,28,29,10,98,74,56,27,29,37,85];
    let container =document.querySelector('#container');
    //将dom在
    arr.forEach(function(item,index){
        container.innerHTML += `<div class="num-box" id="${index}" style="left: ${index*60+10}px;">${item}</div>`;
    });
    let time = 1;
    for(let i =0 ;i<arr.length;i++){
        for(let j = 0;j<arr.length-i-1;j++){
            if(arr[j]>arr[j+1]){
                //ES6结构赋值，即交换两个值
                [arr[j],arr[j+1]] = [arr[j+1],arr[j]];
                setTimeout(function(){
                    let x = document.getElementById(j);
                    let y = document.getElementById(j+1);
                    [x.style.left,y.style.left] = [y.style.left,x.style.left];
                    [x.id,y.id] = [y.id,x.id];
                },time * 2000)
                time++;
            }
        }
    }
</script>
</body>
</html>

lzcwds

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
携程前端制作排序动画设计题

1.简述看到这个面试题。感觉挺有意思的。题目大概意思就是把排序的过程用动画的效果体现出来。这既考了排序算法的知识，又考了前端的基础知识。2.实现&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UT
复制链接

扫一扫