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="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=1,j=0;
var min=arr.length-1;
document.getElementById("stage").onclick = function(){
	var r=document.getElementsByClassName("element");
	if(i<arr.length)
	{
		r[i].getElementsByClassName("position")[0].style.display="block";
		if(j>=0)
		{
			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].style.opacity=0;
				r[j+1].style.opacity=1;
			}
			else 
			{
				r[j].getElementsByClassName("position")[0].style.display="none";
				r[j+1].style.opacity=1;
				i++;
				j=i;
			}
			j--;
			if(j+1<arr.length)
				r[j+1].getElementsByClassName("position")[0].style.display="none";
			r[j].getElementsByClassName("position")[0].style.display="block";
		}
		else
		{
			r[j+1].getElementsByClassName("position")[0].style.display="none";
			r[j+1].getElementsByClassName("position")[0].style.display="none";
			r[i].getElementsByClassName("position")[0].style.display="none";
			r[j+1].style.opacity=1;
			j=i;
			i++;
		}
	}
}
setInterval(function(){
  	var b = document.getElementById('stage');//给你的a标签加一个id :btnBuy
  	b.click();
},500);//后面的3000是以毫秒为单位。


效果图

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读