伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

淺談JavaScript實(shí)現(xiàn)可視化展示冒泡排序過程

2020-4-4    seo達(dá)人



<!DOCTYPE html>

<html>

<head>

<title>JavaScript實(shí)現(xiàn)可視化展示冒泡排序過程</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";

divElement.style.top = 300 - 3 number + "px";

divElement.style.height = 3 number + "px";

divElement.setAttribute("class","box");

parentElement.appendChild(divElement);

}

return numbers;

}

function sort(){

var numbers = random();

var parentElement = document.getElementById("boxes");

var i = 0, j = 0;

var time = setInterval(function() {

if (i < numbers.length) {

if (j < numbers.length - i) {

if (numbers[j] > numbers[j + 1]) {

var temp = numbers[j];

numbers[j] = numbers[j + 1];

numbers[j + 1] = temp;

parentElement.innerHTML = "";

for (var k = 0; k < numbers.length; k++) {

var textNode = document.createTextNode(numbers[k]);

var divElement = document.createElement("div");

divElement.appendChild(textNode);

divElement.style.left = k 20 + k 2 + "px";

divElement.style.top = 300 - 3 numbers[k] + "px";

divElement.style.height = 3 * numbers[k] + "px";

divElement.setAttribute("class","box");

parentElement.appendChild(divElement);

}

}

j++;

}

else{

i++;

j = 0;

}

}

else {

clearInterval(time); 

return;

}

}, 100);  

}

sort();

</script>

</body>

</html>

————————————————

版權(quán)聲明：本文為CSDN博主「筱葭」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/zhouziyu2011/java/article/details/53899692

日歷

鏈接

個(gè)人資料

存檔

巩义市| 惠来县| 彰武县| 彭山县| 信丰县| 大化| 怀化市| 西华县| 阿荣旗| 旬邑县| 外汇| 石楼县| 商河县| 东莞市| 城步| 乐安县| 越西县| 荔波县| 汝城县| 贵定县| 赤壁市| 阆中市| 嘉义县| 关岭| 兴隆县| 莱州市| 定陶县| 三原县| 林甸县| 怀安县| 晋城| 汨罗市| 东明县| 行唐县| 内江市| 镇远县| 辽源市| 重庆市| 萍乡市| 莆田市| 沁源县|