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应用演示 (转)
33个优秀的HTML5应用演示 (转) HTML5能做什么?取代Flash?制作动画?开发程序应用?这些都只是HTML5的一小部分功能而已. 大家可能听到很多关于Flash是否会被HTML5取代的讨论 ...
Html5 快速排序演示
快速排序(Quicksort)是对冒泡排序的一种改进.快速排序由C. A. R. Hoare在1962年提出. 它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另 ...
超酷创意HTML5动画演示及代码
HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HT ...
6最好的之一 HTML5/CSS3 演示(PPT)框架
HTML 是全世界最流行的网页编程语言.而HTML5是这门语言的升级版本号.越来越多的开发人员和设计师開始使用HTML5.以下介绍几个 HTML5/CSS3 的演示工具和框架,你能够用它们来创建你的网 ...
html5 canvas程序演示--P1197 [JSOI2008]星球大战
html5 canvas程序演示--P1197 [JSOI2008]星球大战
难得一见的HTML5动画欣赏及源码下载
今天要给大家分享一些很酷的HTML5动画演示,并且提供源代码的下载.大部分HTML5动画都是通过canvas实现,当然也有基于SVG的,尤其是第一个,看起来很简单,但是创意却不错. 1.HTML5梦幻 ...
java冒泡排序详解
冒泡排序 经典排序算法 - 冒泡排序Bubble sort 原理是临近的数字两两进行比较,按照从小到大或者从大到小的顺序进行交换, 这样一趟过去后,最大或最小的数字被交换到了最后一位, 然后再从头开始 ...
随机推荐
浅谈JSP注释
HTML注释 JSP文件是由HTML尿急和嵌入的Java程序片段组成的,所以在HTML中的注释同样可以在JSP文件中使用.注释格式:
html 输入数字冒泡,Html5 冒泡排序演示相关推荐
- Html5 冒泡排序演示
本文通过一个简单的小例子,简述冒泡算法在B/S中的简单使用,仅供学习分享使用,如有不足之处,还请指正. 概述 冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法. 它重复地走访 ...
- 汇编程序语言 输入数字n和n个数字并对n个数字排序(带注释)
实验来源 华南农业大学 华农 数学与信息学院 软件学院 汇编语言程序设计实验课 实验内容 编写一个汇编语言程序,实现先输入一个0-100的数N,然后输入N个数,以回车结束每个数字并显示在屏幕上,再将未 ...
- js 只准输入数字_js实现文本框只允许输入数字并限制数字大小的方法
本文实例讲述了js实现文本框只允许输入数字并限制数字大小的方法.分享给大家供大家参考.具体如下: 这是一个很个性的输入框特效,规定文本框只允许输入数字,如果你执意要输入其它的字符,则输入的字符将自动消 ...
- jquery 验证小数点后几位_(亲测可用)input只能输入数字或小数点后几位
webapp是基于html5网页版的app,经常会结合app成为混合模式 hybrid app,也就是 app小应用打开 访问的其实是网页,这种方式非常不错,解决了app更新的难题, 所以这个时候要求 ...
- php 判断只能是数字和字母,PHP_JS只能输入数字或数字和字母等的正则表达式,JS判断只能是数字和小数点 0. - phpStudy...
JS只能输入数字或数字和字母等的正则表达式 JS判断只能是数字和小数点 0.不能输入中文 1) 2) function chkIt(frm){ if (frm.n1.value.length>0 ...
- C#-TextBox限制文本\Text输入-只能输入数字\大小写字母\计算
限制TextBox输入(KeyPress事件) 为TextBox添加输入限制 -只允许输入数字 -只允许输入大小写英文字母等等 (KeyPress事件) 注意handled的true和false不要理 ...
- C#中控制键盘只输入数字,退格
想在C#中控制键盘只输入数字,退格,delete,回车,crtl+V,crtl+C,crtl+X. 先找到按键事件,用textBox举例: 这里利用键值解决了此问题,还有别的方法就不在这里演示了哦~
- 控制输入框只能输入数字
1.将input的属性type改为number 2.这时的输入框会有小箭头, 去掉小箭头的方法,给input添加样式 input::-webkit-outer-spin-button,input::- ...
- C#textbox只能输入数字和英文句号
毫无疑问是keypress事件,我这边设置的是只能输入数字或者英文句号 private void tbpianyi_KeyPress(object sender, KeyPressEventArgs ...
最新文章
- 计算机的参数配置选项在哪,教你电脑win7如何进去bios设置相关参数
- 一道有关球赛队员分配的C++程序题目
- Django (auth模块、User对象、用户认证、线上-用户认证)
- ThinkPHP“逻辑或”关系的多条件查询
- SVM熟练到精通1:初识SVM
- Python入门基础知识学什么?
- 身为最热门的编程语言,Java求职前景到底如何?
- python使用如下方法规范化数组_python归一化多维数组的方法
- 个人Typech情侣主题Cupid模板
- apache31分是重症吗,APACHEⅢ重症评估系统
- 当把CocoaPods生成的workspace移动到上层目录时
- gog 中 git提交push到远程时出现error: RPC failed; HTTP 413 curl 22
- 人脸识别-倍加信梯控控制
- ztek usb转串口 linux,Z-TEK USB转串口驱动下载
- docker run参数-v的rw、ro详解
- 基本面因子投资的三点思考
- 华为m6更新鸿蒙吗,华为手机升级鸿蒙的方法,有哪位升级成功的吗?
- PDF修改目录和跳转
- 谁锁了我的帐号?(AD账号的锁定状态查询)
- SSM框架,ajax实现登陆界面验证和登陆成功后页面跳转问题
热门文章
- 达梦V8的数据迁移工具DTS常见报错1及其解决办法
- 使用 JavaScript 实现一个消消乐游戏
- PIC单片机的AD数据传输和上位机C#串口界面实时显示
- android xml 中include的用法,Android include使用
- ImageView图片不变形
- 单片机原理与应用技术课后答案(3)
- JavaScript的prototype(原型)是什么?
- 智能家居“大山”,三翼鸟能飞多高?
- 景驰纠纷后续:潘思宁7月才发现法人被非法变更
- 原来单词还能这样背.......