浅谈JavaScript实现可视化展示冒泡排序过程

最新推荐文章于 2024-08-19 00:56:31 发布

筱葭

最新推荐文章于 2024-08-19 00:56:31 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript 冒泡排序可视化

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53899692

版权

这个博客通过JavaScript实现了一个动态的冒泡排序可视化展示。首先，它生成了一个包含60个随机数的数组，然后利用JavaScript创建了一个带有红色背景的div元素来表示这些数字。每个数字的位置根据其值动态调整，从而在排序过程中呈现出可视化的冒泡效果。通过setInterval函数，逐步进行比较和交换，使得排序过程动态呈现。最后，当排序完成时，定时器会自动停止。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<title>JavaScript实现可视化展示冒泡排序过程</title>
		<style>
			#boxes{
				border:1px solid grey;
				width:1320px;
				height:300px;
				margin-top:10px;
				position:relative;
			}
			.box{
				background:red;
				width:20px;
				line-height:30px;
				text-align:center;
				font-family:Microsoft Yahei;
				font-size:15px;
				color:white;
				margin:0 1px;
				position:absolute;
			}
		</style>
	</head>
	<body>
		<div id="boxes"></div>
		<script>
			function random(){
				var numbers = [];
				for (var i = 0; i < 60; i++) {
					var number = Math.floor(Math.random() * 90 + 10);
					numbers.push(number);
					var divElement = document.createElement("div");
					var parentElement = document.getElementById("boxes");
					divElement.style.left = i * 20 + i * 2 + "px";
					divElem