js模拟冒泡排序动态图（1轮）

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>123</title>

     </head>

     <style>

     .div1{

     width:80px;

     height:45px;

     border:2px solid red;

     display:none;

     float:left;

     background:gray;

     font-size:30px;

     text-align:center;

     padding-top:5px;

     position:absolute;

     top:-80px;

     }

     .divs{

     width:80px;

     height:45px;

     border:2px solid red;

     float:left;

     font-size:30px;

     text-align:center;

     vertical-align:center;

     padding-top:5px;

     }

     </style>

     <script type="text/javascript" src='jquery-1.8.3.js'></script>

     <script type="text/javascript" >

     /*改变css属性的四种方式：

     1.obj.classname

     2.obj.style.cssText

     3.obj.setAttribute(oldclassname,newclassname)

     4。更改外联css文件obj.setAttribute(hrefname,cssname)

     */

     /*$(document).ready(function(){

     $("#b1").click(function(){

     alert('123');

     });

     });*/

     function f1(){

     var block1=document.getElementById("id1");

     var block2=document.getElementById("id2");

     /*var block3=document.getElementById("id3");

     var block4=document.getElementById("id4");

     var block5=document.getElementById("id5");

     var block6=document.getElementById("id6");

     for(var i=0;i<6;i++)

     {

     //block1.style.cssText='background:gray;position:absolute;top:-100px;';

     var b1num=document.getElementById("id"+(i+1)+'').innerHTML;

     var b2num=document.getElementById("id"+(i+2)+'').innerHTML;

     if  (parseInt(b1num)<parseInt(b2num)){

     var left = 100+80;

     block1.style.cssText='float:none;background:gray;position:absolute;left:90px;top:-100px;';

     }

     }*/

     var b1num=document.getElementById("id1").innerHTML;

     var b2num=document.getElementById("id2").innerHTML;

     block2.style.cssText="background:yellow";

     }

     function f2(){

     var block1=document.getElementById("id1");

     var block2=document.getElementById("id2");

     var block3=document.getElementById("id3");

     block3.style.cssText="background:yellow";

     block2.style.cssText="background:silver";

     }

     function f3(){

     var block3=document.getElementById("id3");

     var block4=document.getElementById("id4");

     block4.style.cssText="background:yellow";

     block3.style.cssText="background:silver";

     }

     function f4(){

     var block5=document.getElementById("id5");

     var block4=document.getElementById("id4");

     var b1num=document.getElementById("id1").innerHTML;

     var b4num=document.getElementById("id4").innerHTML;

     block5.style.cssText="background:yellow";

     block4.style.cssText="background:silver";

     }

     function f5(){

     var block6=document.getElementById("id6");

     var block5=document.getElementById("id5");

     block6.style.cssText="background:yellow";

     block5.style.cssText="background:silver";

     }

     function f6(){

     var block1=document.getElementById("id1");

     var block6=document.getElementById("id6");

     var block5=document.getElementById("id5");

     var block7=document.getElementById("id7");

     var t=block7.innerHTML;

     block7.innerHTML=block6.innerHTML;

     block6.innerHTML=t;

     block6.style.cssText="background:silver";

     }

     function f7(){

     var block7=document.getElementById("id7");

     var block1=document.getElementById("id1");

     block1.style.cssText='background:silver';

     block1.innerHTML=block7.innerHTML;

     block7.style.cssText="display:none";

     }

     function f(){

     var block7=document.getElementById("id7");

     var block1=document.getElementById("id1");

         block1.style.cssText="background:white";

         block7.style.cssText="display:block";

         block7.innerHTML=block1.innerHTML;

         block1.innerHTML=" ";

     }

     function test(){

     var count = 0;

     //var bt=document.getElementById('id1');

     //alert(bt);

         $('#b1').live('click',function(){

         count++;

         //alert(count);

             switch (count){

                 case 1:

                         f();

                         break;

                 case 2:

                         f1();

                         break;

                case 3:

                         f2();

                         break;

                 case 4:

                         f3();

                         break;

                 case 5:

                         f4();

                         break;

                 case 6:

                         f5();

                         break;

                case 7:

                         f6();

                         break;

                 case 8:

                         f7();

                         break;

                  default:

                       break;

     }

         });

 }

     test();

     </script>

 <body >

 <!--canvas画布-->

 <canvas style="border:1px solid red;margin-left:;100px" margin-left="200px" width="800px" height="400px" id='dialog1'></canvas>

 <!--排序元素-->

 <div style="border:1px solid green;width:482;background-color:silver;position:absolute;bottom:300px;left:60px;"><div class="divs" id="id1">2</div><div class="divs" id="id2">5</div><div class="divs" id="id3">3</div><div class="divs" id="id4">4</div><div class="divs" id="id5">6</div><div class="divs" id="id6">1</div><div class="div1" id="id7"></div></div>

 <!--操作按钮-->

 <div style="position:absolute;top:10px;left:100px;"><button  id='b1'  style='margin-left:50px;'>bubble_sort</button><button onclick="quicksort();" style='margin-left:50px;'>quick_sort</button><button onclick="stacklsort();" style='margin-left:50px;'>stack_sort</button></div>

 </body>

 </html>

当然，通过上述方式实现太过于繁琐，目前由于技术有限，只能通过该方式实现。

js模拟冒泡排序动态图（1轮）的更多相关文章

JS生成gif动态图下载
需求:通过动态变化的图生成一个gif图提供下载. 实现方案:1.可通过服务端生成对应gif,然后前端请求下载2.前端自己实现生成gif图片,自行下载采用方案:前端实现方式,于是在网上找各种相关的几款 ...
Js封装的动画函数实现轮播图
---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示项目目录结构用到的js封装的animate()动画 function ...
vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败问题一:slider组件初始化失败原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载解决方 ...
[转]网页实时聊天之js和jQuery实现ajax长轮询 PHP
网页实时聊天之js和jQuery实现ajax长轮询众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的 ...
DOM操作相关案例模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框代码如下: <!DOCTYPE html> <h ...
js_html_input中autocomplete="off"在chrom中失效的解决办法使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送实习期学到的技术（一） LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
js_html_input中autocomplete="off"在chrom中失效的解决办法分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...
JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
jquery-抖动图组轮播动画
JQ匀速抖动图组轮播动画一.HTML+CSS <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...
由chrome剪贴板问题研究到了js模拟鼠标键盘事件
写在前面最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

随机推荐

Strans 内表-xml文件
一.内表到xml文件 <?sap.transform simple?> <tt:transform xmlns:tt="http://www.sap.com/transfo ...
ThinkPHP使用方法与心得
ThinkPHP相信PHP程序员对它并不陌生,通过自己的学习在此发表个人看法,也为以后自己查找ThinkPHP方面的知识更加方便. 一.mvc及数据库CURD操作流程: 1.新建数据库:数据库名称:1 ...
dij+堆优化
写这个dij+堆优化的原因是有些地方卡SPFA,只能搞这个: 香甜的奶油: #include<iostream> #include<cstdio> #include<cs ...
Linux-用户和权限
1 Linux所有内容都是文件归一的思想面向对象的思想文件只需要做增删改查的操作 2 延迟读取一般的文本读取工具都是先将内容全部都读入内存中 cat的机制不同是读一行显示一行这与它的功能有 ...
Java笔记（九）
网络编程: UDP传输: (UdpSend发送端)通过UDP传输方式,将一段文字数据发送出去: (1)建立udpsocket服务 (2)提供数据,并将数据封装到数据包中 (3)通过socket服务的发 ...
「LuoguP1402」酒店之王（最大流
题目描述 XX酒店的老板想成为酒店之王,本着这种希望,第一步要将酒店变得人性化.由于很多来住店的旅客有自己喜好的房间色调.阳光等,也有自己所爱的菜,但是该酒店只有p间房间,一天只有固定的q道不同的菜. ...
从exgcd到exCRT
从最基础的开始. 1.gcd 这个不用说了吧--\(gcd(a,b) = gcd(b,a\%b)\),这个很显然. 2.exgcd 这玩意可以用来求形如\(ax+by = gcd(a,b)\)的不定方 ...
bzoj 2600 ricehub
2600: [Ioi2011]ricehub Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 783 Solved: 417[Submit][Stat ...
Ubuntu 16.04 安装wine
1.安装源 sudo add-apt-repository ppa:wine/wine-builds sudo apt-get update 2.安装wine sud ...
windows下的套接字IO模型
一般情况下,IO操作的行为受两种因素的影响: IO操作对象的类型(阻塞还是非阻塞) 获取IO操作结果的方式(同步还是异步). 同步就是指操作的发起和操作结果的获取由调用者完成. 异步指操作发起由调用方 ...

js模拟冒泡排序动态图（1轮）

js模拟冒泡排序动态图（1轮）的更多相关文章

随机推荐

热门专题