html 输入数字冒泡,Html5 冒泡排序演示

本文通过一个简单的小例子，简述冒泡算法在B/S中的简单使用，仅供学习分享使用，如有不足之处，还请指正。

概述

冒泡排序(Bubble Sort)，是一种计算机科学领域的较简单的排序算法。

它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。

这个算法的名字由来是因为越大的元素会经由交换慢慢“浮”到数列的顶端，故名。

效果图

本例是用Html展示，冒泡排序的例子，如下图所示：

核心算法

由于此算法相对比较简单，对此不再赘述，代码如下：

The nineth html page

ul li

{

list-style-type:georgian;

text-align:left;

}

.mark

{

width:140px;

height:40px;

color:Olive;

text-align:center;

line-height:40px;

margin:5px;

float:left;

}

.redball

{

width:40px;

height:40px;

border-radius:20px;

background-color:Red;

text-align:center;

line-height:40px;

margin:5px;

float:left;

}

.ball

{

width:40px;

height:40px;

border-radius:20px;

background-color:Aqua;

text-align:center;

line-height:40px;

margin:5px;

float:left;

}

.line

{

clear:left;

}

header

{

height:80px;

border:1px solid gray;

}

.left

{

border:1px solid gray;

float:left;

width:30%;

height:480px;

margin-left:0px;

margin-right:0px;

}

aside

{

text-align:center;

}

section

{

width:69.5%;

float:left;

height:480px;

border:1px solid gray;

margin-left:0px;

margin-right:0px;

}

footer

{

clear:left;

height:60px;

border:1px solid gray;

}

input[type="button"]

{

width:80px;

text-align:center;

margin-top:10px;

}

function initDiv() {

var mainArea = document.getElementById("mainArea");

for (var i = 0; i < 8; i++) {

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

newDivLine.setAttribute("class", "line");

mainArea.appendChild(newDivLine);

for (var j = 0; j < 9; j++) {

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

var id = i.toString() + j.toString();

newDiv.setAttribute("id", id);

if(j<8){

newDiv.setAttribute("class", "ball");

}else{

newDiv.setAttribute("class", "mark");

}

newDivLine.appendChild(newDiv);

}

}

}

//初始元素赋值

var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1];

function setElementsValue() {

for (var i = 0; i < arrTmp.length; i++) {

document.getElementById("0"+i.toString()).innerText=arrTmp[i];

}

document.getElementById("08").innerText="原始数据";

}

//冒泡排序

function setBubbleSortValue() {

for (var i = 0; i < arrTmp.length-1; i++) {

for (var j = 0; j < arrTmp.length - 1 - i; j++) {

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

var tmp = arrTmp[j + 1];

arrTmp[j + 1] = arrTmp[j];

arrTmp[j] = tmp;

}

}

//显示出来

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

document.getElementById((i + 1).toString() + k.toString()).innerText = arrTmp[k];

if (i + k == arrTmp.length - 1) {

document.getElementById((i + 1).toString() + k.toString()).setAttribute("class", "redball");

}

}

document.getElementById((i + 1).toString() + "8").innerText = "第 " + (i + 1).toString() + " 排序";

}

}

Bubble Sort Demo

冒泡排序(Bubble Sort

• 比较相邻的元素。如果第一个比第二个大，就交换他们两个。
• 对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
• 针对所有的元素重复以上的步骤，除了最后一个。
• 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较

这是底部信息

用python实现，冒泡排序演示

# -*- coding:utf-8 -*- import time from Tkinter import * a=[1,9,5,6,8,1] class CanvasDemo(): #n1=70 ...

33个优秀的HTML5应用演示 &lpar;转&rpar;

33个优秀的HTML5应用演示 (转) HTML5能做什么?取代Flash?制作动画?开发程序应用?这些都只是HTML5的一小部分功能而已. 大家可能听到很多关于Flash是否会被HTML5取代的讨论 ...

Html5 快速排序演示

快速排序(Quicksort)是对冒泡排序的一种改进.快速排序由C. A. R. Hoare在1962年提出. 它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另 ...

超酷创意HTML5动画演示及代码

HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HT ...

6最好的之一 HTML5&sol;CSS3 演示(PPT)框架

HTML 是全世界最流行的网页编程语言.而HTML5是这门语言的升级版本号.越来越多的开发人员和设计师開始使用HTML5.以下介绍几个 HTML5/CSS3 的演示工具和框架,你能够用它们来创建你的网 ...

html5 canvas程序演示--P1197 &lbrack;JSOI2008&rsqb;星球大战

html5 canvas程序演示--P1197 [JSOI2008]星球大战

难得一见的HTML5动画欣赏及源码下载

今天要给大家分享一些很酷的HTML5动画演示,并且提供源代码的下载.大部分HTML5动画都是通过canvas实现,当然也有基于SVG的,尤其是第一个,看起来很简单,但是创意却不错. 1.HTML5梦幻 ...

java冒泡排序详解

冒泡排序 经典排序算法 - 冒泡排序Bubble sort 原理是临近的数字两两进行比较,按照从小到大或者从大到小的顺序进行交换, 这样一趟过去后,最大或最小的数字被交换到了最后一位, 然后再从头开始 ...

随机推荐

浅谈JSP注释

HTML注释 JSP文件是由HTML尿急和嵌入的Java程序片段组成的,所以在HTML中的注释同样可以在JSP文件中使用.注释格式: