css 排行榜动画，排序动画，横向，竖向，网格

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

草字

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

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Css css布局和动画模板文章标签： css javascript css3

本文链接：https://blog.csdn.net/qq_42740797/article/details/128530401

Css 同时被 2 个专栏收录

120 篇文章

订阅专栏

css布局和动画模板

44 篇文章

订阅专栏

这段代码展示了如何使用HTML、CSS和JavaScript（jQuery库）创建一个动态效果，数组中的数字在页面上以方块形式展示并进行随机排序。每个方块的大小和位置根据数值动态调整，每4秒更新一次顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

代码一：

<!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>
        #con {
            position: relative;
            width: 800px;
            height: 200px;
        }
        #con>div {
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 10px;
            position: absolute;
            transition: left .7s,top .7s;
        }
        .target {
            background-color: orange;
        }
        .normal {
            background-color: rgba(98, 231, 202, 0.747);
        }
        .target-for-choose-sort {
            background-color: rgba(224, 39, 215, 0.774);
        }
    </style>
</head>
 
<body>
    <div id="con">
    </div>
</body>
 
</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
let offsetX=80+10;//每个元素的之间的间距。宽度加空隙
let offsetY=80+10;
let con = $('#con')[0]
let arr = [3, 6, 2, 4, 8, 5, 13, 9, 21, 11, 1]
let max = arr.reduce((a, b) => Math.max(a, b))
show(arr)
function show(arr){
    let str='';
    for (let i = 0; i < arr.length; i++) {
        let height=arr[i] / max * 180 + 20+'px';
        let left=10 + i * offsetX + 'px';
        str+=`<div id="id_${arr[i]}" class="normal" style="left:${left}">${arr[i]}</div>`
    }
    $(con).html(str);
}
setInterval(() => {
    randNumber(arr);
    for (let i = 0; i < arr.length; i++) {
        let height=arr[i] / max * 180 + 20+'px';
        let left=10 + i * offsetX + 'px';
        $(`#id_${arr[i]}`).css({left:left});
    }
}, 4000);
//生成随机数（下面也有一个）
function rand(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
}
function randNumber(arr) {
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
        let randIndex = parseInt(Math.random() * (arr.length - newArr.length));
        newArr.push(arr[randIndex]);
        if (i != arr.length - 1) {
            let temp = 0;
            temp = arr[randIndex];
            arr[randIndex] = arr[arr.length - i - 1];
            arr[arr.length - i - 1] = temp;
        }
    }
    return newArr;
}
//将数组拆分成固定长的数组
function sliceArr(arr, size) {
    // arr是传入的要切割的数组
    // size是每个切割的数组有多少项
    var newArr = [];
    for (var x = 0; x < Math.ceil(arr.length / size); x++) {
        var start = x * size;
        var end = start + size;
        newArr.push(arr.slice(start, end));
    }
    return newArr;
}
</script>

代码二：

<!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>
        #con {
            position: relative;
            width: 800px;
            height: 200px;
        }
        #con>div {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 10px;
            position: absolute;
            transition: left .7s,top .7s;
        }
        .target {
            background-color: orange;
        }
        .normal {
            background-color: rgba(98, 231, 202, 0.747);
        }
        .target-for-choose-sort {
            background-color: rgba(224, 39, 215, 0.774);
        }
    </style>
</head>
 
<body>
    <div id="con">
    </div>
</body>
 
</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
let offsetX=40+5;//每个元素的之间的间距。宽度加空隙
let offsetY=40+5;
let con = $('#con')[0]
let arr = [3, 6, 2, 4, 8, 5, 13, 9, 21, 11, 1]
let max = arr.reduce((a, b) => Math.max(a, b))
show(arr)
function show(arr){
    let str='';
    for (let i = 0; i < arr.length; i++) {
        let height=arr[i] / max * 180 + 20+'px';
        let top=10 + i * offsetY + 'px';
        str+=`<div id="id_${arr[i]}" class="normal" style="top:${top}">${arr[i]}</div>`
    }
    $(con).html(str);
}
setInterval(() => {
    randNumber(arr);
    for (let i = 0; i < arr.length; i++) {
        let height=arr[i] / max * 180 + 20+'px';
        let top=10 + i * offsetY + 'px';
        $(`#id_${arr[i]}`).css({top:top});
    }
}, 4000);
//生成随机数（下面也有一个）
function rand(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
}
function randNumber(arr) {
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
        let randIndex = parseInt(Math.random() * (arr.length - newArr.length));
        newArr.push(arr[randIndex]);
        if (i != arr.length - 1) {
            let temp = 0;
            temp = arr[randIndex];
            arr[randIndex] = arr[arr.length - i - 1];
            arr[arr.length - i - 1] = temp;
        }
    }
    return newArr;
}
//将数组拆分成固定长的数组
function sliceArr(arr, size) {
    // arr是传入的要切割的数组
    // size是每个切割的数组有多少项
    var newArr = [];
    for (var x = 0; x < Math.ceil(arr.length / size); x++) {
        var start = x * size;
        var end = start + size;
        newArr.push(arr.slice(start, end));
    }
    return newArr;
}
</script>

代码三：

<!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>
        #con {
            position: relative;
            width: 800px;
            height: 200px;
        }
        #con>div {
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 10px;
            position: absolute;
            transition: left .7s,top .7s;
        }
        .target {
            background-color: orange;
        }
        .normal {
            background-color: rgba(98, 231, 202, 0.747);
        }
        .target-for-choose-sort {
            background-color: rgba(224, 39, 215, 0.774);
        }
    </style>
</head>
 
<body>
    <div id="con">
    </div>
</body>
 
</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
let offsetX=80+10;//每个元素的之间的间距。宽度加空隙
let offsetY=80+10;
let con = $('#con')[0]
let arr = [3, 6, 2, 4, 8, 5, 13, 9, 21, 11, 1]
let max = arr.reduce((a, b) => Math.max(a, b))

let list=sliceArr(arr,5);
let str='';
list.map((item,index)=>{
    item.map((v,o)=>{
        let i=((index*5)+o) + 0;
        let row=Math.trunc(i/5)+1;//行数。
        let col=i%5;//求余是列数。
        let left=10 + (col) * offsetX + 'px'
        let top=10 + (row-1) * offsetY + 'px'
        str+=`<div id="id_${arr[i]}" class="normal" style="left:${left};top:${top}">${v}</div>`
    });
});
$(con).html(str);

setInterval(() => {
    randNumber(arr);
    list=sliceArr(arr,5);
    list.map((item,index)=>{
        item.map((v,o)=>{
            let i=((index*5)+o) + 0;
            let row=Math.trunc(i/5)+1;//行数。
            let col=i%5;//求余是列数。
            let left=10 + (col) * offsetX + 'px'
            let top=10 + (row-1) * offsetY + 'px'
            // $(con).append(`<div class="normal" style="left:${left};top:${top}">${v}</div>`);
            // str+=`<div class="normal" style="left:${left};top:${top}">${v}</div>`
            $(`#id_${arr[i]}`).css({left:left,top:top});
        });
    });
}, 4000);
//生成随机数（下面也有一个）
function rand(min, max) {
    return parseInt(Math.random() * (max - min + 1) + min);
}
function randNumber(arr) {
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
        let randIndex = parseInt(Math.random() * (arr.length - newArr.length));
        newArr.push(arr[randIndex]);
        if (i != arr.length - 1) {
            let temp = 0;
            temp = arr[randIndex];
            arr[randIndex] = arr[arr.length - i - 1];
            arr[arr.length - i - 1] = temp;
        }
    }
    return newArr;
}
//将数组拆分成固定长的数组
function sliceArr(arr, size) {
    // arr是传入的要切割的数组
    // size是每个切割的数组有多少项
    var newArr = [];
    for (var x = 0; x < Math.ceil(arr.length / size); x++) {
        var start = x * size;
        var end = start + size;
        newArr.push(arr.slice(start, end));
    }
    return newArr;
}
</script>