JavaScript---冒泡排序动画

最新推荐文章于 2023-06-14 16:44:29 发布

Hysea.

最新推荐文章于 2023-06-14 16:44:29 发布

阅读量381

点赞数 1

分类专栏： js排序动画文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44589374/article/details/106203911

版权

js排序动画专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript—冒泡排序动画

HTML文件

<!DOCTYPE html>
<html>
<head>
	<title>排序</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="styles/index.css">
</head>
<body id="body">
	<div id="stage"></div>
<script src="scripts/index.js"></script>
</body>
</html>

CSS文件

html{
	height: 100%;  
	-o-user-select: none;
  	-moz-user-select: none; /*火狐 firefox*/
  	-webkit-user-select: none; /*webkit浏览器*/
  	-ms-user-select: none; /*IE10+*/
  	-khtml-user-select :none; /*早期的浏览器*/
  	user-select: none; 
}
#body{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}
#stage{
	position: absolute;
	width: 600px;
	height: 400px;
	background-color: #eeeeee;
	border:10px solid #999999;
	border-radius: 5px;
}
.element{
	position: absolute;
	background-color: #1cb69e;
	width: 30px;
	bottom: 30px;
	border-radius: 10px 10px 2px 2px;
}
.number{
	position: absolute;
	color: #555555;
	font-size: 18px;
	height: 30px;
	font-weight: bold;
}
.position{
	position: absolute;
	width: 0px;
	height: 0px;
	border:5px solid #eeeeee;
	border-bottom-color: #888888;
	display: none;
}

JS文件



function ranColor() { //随机颜色  
    var color = '#';  
    for (var i = 0; i < 6; i++) {  
        color += '0123456789abcdef'[Math.floor(Math.random() * 16)]  
    }  
    return color;  
}

var arr=[0,0,0,0,0,0,0,0,0,0];
for(var i=0;i<arr.length;i++)
{
	arr[i]=Math.floor(Math.random()*250+50);                
	var e = document.createElement('div');  
	e.classList.add("element");
	e.style.left=i*50+60+'px';
	e.style.height=arr[i]+'px';
	e.style.backgroundColor=ranColor();		
	document.getElementById("stage").appendChild(e);              
	var f = document.createElement('div');
	f.classList.add("number");
	f.style.top='-35px';
	f.innerHTML=arr[i];
	var p =document.createElement('div');
	p.classList.add("position");
	p.style.bottom='-10px';
	e.appendChild(f); 
	e.appendChild(p); 
	f.style.left=(30-f.offsetWidth)/2+'px';
	p.style.left=(30-p.offsetWidth)/2-5+'px';
}

document.body.onresize = function(){
	document.getElementById("stage").style.left = document.getElementById("body").offsetWidth/2-document.getElementById("stage").offsetWidth/2+'px';
	document.getElementById("stage").style.top = document.getElementById("body").offsetHeight/2-document.getElementById("stage").offsetHeight/2+'px';
}
document.body.onpageshow = function(){
	document.getElementById("stage").style.left = document.getElementById("body").offsetWidth/2-document.getElementById("stage").offsetWidth/2+'px';
	document.getElementById("stage").style.top = document.getElementById("body").offsetHeight/2-document.getElementById("stage").offsetHeight/2+'px';
}
var i=0,j=arr.length-1;
document.getElementById("stage").onclick = function(){
	var r=document.getElementsByClassName("element");
	if(i<arr.length-1)
	{
		if(j>i)
		{
			if(i-1>=0)
				r[i-1].getElementsByClassName("position")[0].style.display="none";
			r[i].getElementsByClassName("position")[0].style.display="none";
			if(j+1<arr.length)
				r[j+1].getElementsByClassName("position")[0].style.display="none";
			r[j].getElementsByClassName("position")[0].style.display="none";
			if(r[j].offsetHeight>r[j-1].offsetHeight)
			{
				var p=r[j].offsetHeight;
				r[j].style.height=r[j-1].style.height;
				r[j-1].style.height=p+'px';
				var t=r[j].getElementsByClassName("number")[0].innerHTML;
				r[j].getElementsByClassName("number")[0].innerHTML=r[j-1].getElementsByClassName("number")[0].innerHTML;
				r[j-1].getElementsByClassName("number")[0].innerHTML=t;
				r[j-1].getElementsByClassName("number")[0].style.left=(30-r[j-1].getElementsByClassName("number")[0].offsetWidth)/2+'px';
				r[j].getElementsByClassName("number")[0].style.left=(30-r[j].getElementsByClassName("number")[0].offsetWidth)/2+'px';
				var c=r[j].style.backgroundColor;
				r[j].style.backgroundColor=r[j-1].style.backgroundColor;
				r[j-1].style.backgroundColor=c;
			}
			r[j].getElementsByClassName("position")[0].style.display="block";
			r[j-1].getElementsByClassName("position")[0].style.display="block";
			j--;
		}
		else
		{
			j=arr.length-1;
			i++;
		}
	}
}
setInterval(function(){
  	var b = document.getElementById('stage');//给你的a标签加一个id :btnBuy
  	b.click();
},500);//后面的3000是以毫秒为单位。

效果图

在这里插入图片描述

Hysea.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript---冒泡排序动画

JavaScript—冒泡排序动画HTML文件<!DOCTYPE html><html><head> <title>排序</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="styles/index.css"></head><body id="body"> <div id="
复制链接

扫一扫