代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>123</title>
  6.      </head>
  7.      <style>
  8.      .div1{
  9.      width:80px;
  10.      height:45px;
  11.      border:2px solid red;
  12.      display:none;
  13.      float:left;
  14.      background:gray;
  15.      font-size:30px;
  16.      text-align:center;
  17.      padding-top:5px;
  18.      position:absolute;
  19.      top:-80px;
  20.      }
  21.      .divs{
  22.      width:80px;
  23.      height:45px;
  24.      border:2px solid red;
  25.      float:left;
  26.      font-size:30px;
  27.      text-align:center;
  28.      vertical-align:center;
  29.      padding-top:5px;
  30.      }
  31.      </style>
  32.      <script type="text/javascript" src='jquery-1.8.3.js'></script>
  33.      <script type="text/javascript" >
  34.      /*改变css属性的四种方式：
  35.      1.obj.classname
  36.      2.obj.style.cssText
  37.      3.obj.setAttribute(oldclassname,newclassname)
  38.      4。更改外联css文件obj.setAttribute(hrefname,cssname)
  39.      */
  40.      /*$(document).ready(function(){
  41.      $("#b1").click(function(){
  42.      alert('123');
  43.      });
  44.      });*/
  45.  
  46.      function f1(){
  47.      var block1=document.getElementById("id1");
  48.      var block2=document.getElementById("id2");
  49.      /*var block3=document.getElementById("id3");
  50.      var block4=document.getElementById("id4");
  51.      var block5=document.getElementById("id5");
  52.      var block6=document.getElementById("id6");
  53.      for(var i=0;i<6;i++)
  54.      {
  55.      //block1.style.cssText='background:gray;position:absolute;top:-100px;';
  56.      var b1num=document.getElementById("id"+(i+1)+'').innerHTML;
  57.      var b2num=document.getElementById("id"+(i+2)+'').innerHTML;
  58.      if  (parseInt(b1num)<parseInt(b2num)){
  59.      var left = 100+80;
  60.      block1.style.cssText='float:none;background:gray;position:absolute;left:90px;top:-100px;';
  61.      }
  62.      }*/
  63.      var b1num=document.getElementById("id1").innerHTML;
  64.      var b2num=document.getElementById("id2").innerHTML;
  65.      block2.style.cssText="background:yellow";
  66.      }
  67.      function f2(){
  68.      var block1=document.getElementById("id1");
  69.      var block2=document.getElementById("id2");
  70.      var block3=document.getElementById("id3");
  71.      block3.style.cssText="background:yellow";
  72.      block2.style.cssText="background:silver";
  73.      }
  74.      function f3(){
  75.      var block3=document.getElementById("id3");
  76.      var block4=document.getElementById("id4");
  77.      block4.style.cssText="background:yellow";
  78.      block3.style.cssText="background:silver";
  79.      }
  80.      function f4(){
  81.      var block5=document.getElementById("id5");
  82.      var block4=document.getElementById("id4");
  83.      var b1num=document.getElementById("id1").innerHTML;
  84.      var b4num=document.getElementById("id4").innerHTML;
  85.      block5.style.cssText="background:yellow";
  86.      block4.style.cssText="background:silver";
  87.      }
  88.      function f5(){
  89.      var block6=document.getElementById("id6");
  90.      var block5=document.getElementById("id5");
  91.      block6.style.cssText="background:yellow";
  92.      block5.style.cssText="background:silver";
  93.      }
  94.      function f6(){
  95.      var block1=document.getElementById("id1");
  96.      var block6=document.getElementById("id6");
  97.      var block5=document.getElementById("id5");
  98.      var block7=document.getElementById("id7");
  99.      var t=block7.innerHTML;
  100.      block7.innerHTML=block6.innerHTML;
  101.      block6.innerHTML=t;
  102.      block6.style.cssText="background:silver";
  103.      }
  104.      function f7(){
  105.      var block7=document.getElementById("id7");
  106.      var block1=document.getElementById("id1");
  107.      block1.style.cssText='background:silver';
  108.      block1.innerHTML=block7.innerHTML;
  109.      block7.style.cssText="display:none";
  110.      }
  111.      function f(){
  112.      var block7=document.getElementById("id7");
  113.      var block1=document.getElementById("id1");
  114.          block1.style.cssText="background:white";
  115.          block7.style.cssText="display:block";
  116.          block7.innerHTML=block1.innerHTML;
  117.          block1.innerHTML=" ";
  118.      }
  119.      function test(){
  120.      var count = 0;
  121.      //var bt=document.getElementById('id1');
  122.      //alert(bt);
  123.          $('#b1').live('click',function(){
  124.          count++;
  125.          //alert(count);
  126.              switch (count){
  127.                  case 1:
  128.                          f();
  129.                          break;
  130.                  case 2:
  131.                          f1();
  132.                          break;
  133.                 case 3:
  134.                          f2();
  135.                          break;
  136.                  case 4:
  137.                          f3();
  138.                          break;
  139.                  case 5:
  140.                          f4();
  141.                          break;
  142.                  case 6:
  143.                          f5();
  144.                          break;
  145.                 case 7:
  146.                          f6();
  147.                          break;
  148.                  case 8:
  149.                          f7();
  150.                          break;
  151.                   default:
  152.                        break;
  153.      }
  154.          });
  155.  }
  156.      test();
  157.      </script>
  158.  <body >
  159.  <!--canvas画布-->
  160.  <canvas style="border:1px solid red;margin-left:;100px" margin-left="200px" width="800px" height="400px" id='dialog1'></canvas>
  161.  <!--排序元素-->
  162.  <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>
  163.  <!--操作按钮-->
  164.  <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>
  165.  </body>
  166.  </html>

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

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

  1. JS生成gif动态图下载

    需求:通过动态变化的图生成一个gif图提供下载. 实现方案:1.可通过服务端生成对应gif,然后前端请求下载2.前端自己实现生成gif图片,自行下载 采用方案:前端实现方式,于是在网上找各种相关的几款 ...

  2. Js封装的动画函数实现轮播图

    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...

  3. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  4. [转]网页实时聊天之js和jQuery实现ajax长轮询 PHP

    网页实时聊天之js和jQuery实现ajax长轮询 众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的 ...

  5. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  6. 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 ...

  7. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  8. jquery-抖动图组轮播动画

    JQ匀速抖动图组轮播动画 一.HTML+CSS <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

  9. 由chrome剪贴板问题研究到了js模拟鼠标键盘事件

    写在前面 最近公司在搞浏览器兼容的事情,所有浏览器兼容的问题不得不一个人包了.下面来说一下今天遇到的一个问题吧 大家都知道IE下面如果要获得剪贴板里面的信息的话,代码应该如下所示 window.cli ...

随机推荐

  1. go 包的问题

    同一个包下的所有方法,都整合到一个里面去了,通过包名可以任意调用包下的方法. 文件夹的名字必须要和文件里面的package的名字一样,否则会报错... 导文件就是文件所在的包 导包import(),是 ...

  2. ThinkPHP验证码不现实的处理方法

    ThinkPHP测试的时候遇到验证码不显示的问题,主要解决思路如下: 1.php.ini是否开启gd库: 2.页面编码是否一致: 3.检查页面头部信息BOM,这是最主要的,把下面代码复制到根目录下,然 ...

  3. webpack v3 结合 react-router v4 做 dynamic import — 按需加载（懒加载）

    为什么要做dynamic import? dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等.总之,就是在SPA,把JS代码分成N个页面 ...

  4. android系统启动框架、Activity界面显示过程详解

    一.Android系统框架 android的系统架构和其操作系统一样,采用了分层的架构.从架构图看,android分为四个层,从高层到低层分别是应用程序层.应用程序框架层.系统运行库层和linux核心 ...

  5. POJ 1611 The Suspects (并查集+数组记录子孙个数 )

    The Suspects Time Limit: 1000MS   Memory Limit: 20000K Total Submissions: 24134   Accepted: 11787 De ...

  6. Redis穿透问题解决方案

    缓存穿透 缓存穿透是指用户查询数据,在数据库没有,自然在缓存中也不会有.这样就导致用户查询的时候,在缓存中找不到,每次都要去数据库再查询一遍,然后返回空.这样请求就绕过缓存直接查数据库,这也是经常提的 ...

  7. 写给精明Java开发者的测试技巧

    我们都会为我们的代码编写测试,不是吗?毫无疑问,我知道这个问题的答案可能会从 “当然,但你知道怎样才能避免写测试吗?” 到 “必须的!我爱测试”都有.接下来我会给你几个小建议,它们可以让你编写测试变得 ...

  8. javabean学习

    javabean是一种可重复使用且跨平台的软件组件.他可以分为:客户界面组件(UI,user interface)和没有用户界面,主要负责处理事务(如,数据处理.操作数据库等)地javabean ja ...

  9. poj3070 求斐波那契数列第n项 ——矩阵快速幂

    题目:http://poj.org/problem?id=3070 用矩阵快速幂加速递推. 代码如下: #include<iostream> #include<cstdio> ...

  10. MTK HDMI 流程

    一.HDMI初始化 1. kernel-3.18/drivers/misc/mediatek/ext_disp/mtk_extd_mgr.c static int __init mtk_extd_mg ...