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 ...
随机推荐
- CAN协议与CANOpen协议
这里详细介绍了CAN协议中数据通信帧每位的含义,有图片,值得一看:https://www.cnblogs.com/pejoicen/p/3986587.html 这里介绍了CanOpen协议,http ...
- Struts多个文件上传
Struts2多个文件上传 10级学员 韩晓爽课堂笔记 多个文件上传分为List集合和数组,下面我们着重介绍一下list集合的上传.都大同小异. 一 介绍 1. 在struts2文件上传的时候要先导入 ...
- Lua学习笔记(1) ——语法
1. Lua -i main.lua -i 进入交互模式 -l 加载一个库 -e “lua code” 直接在命令行执行lua code 2. 注释 -- This is a line comme ...
- Python序列——字符串
字符串 1 string模块预定义字符串 2 普通字符串与Unicode字符串 3 只适用于字符串的操作 4 原始字符串 5 Unicode字符串操作符 内建函数 1 标准类型函数与序列操作函数 2 ...
- nginx启动不了
nginx简介 Nginx是一个高性能的HTTP和反向代理服务器. 支持的操作系统众多,windows.linux. MacOS X: 可实现负载均衡: Rewrite功能强大: 电商架构大部分都采用 ...
- 编译Thrift
按照 https://syslint.com/blog/tutorial/how-to-install-apache-thrift-on-ubuntu-14-04/ 进行, 编译时出现错误 make[ ...
- hdu-5673 Robot(默次金数)
题目链接: Robot Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) 问题描述 ...
- BZOJ-3439:Kpm的MC密码(Trie+DFS序+主席树)
背景 想Kpm当年为了防止别人随便进入他的MC,给他的PC设了各种奇怪的密码和验证问题(不要问我他是怎么设的...),于是乎,他现在理所当然地忘记了密码,只能来解答那些神奇的身份验证问题了... 描述 ...
- 安装 Sublime Text 3及其插件
1. 安装 Sublime Text 3 虽然现在的 Sublime 3 还处于 beta 阶段, 但已经非常稳定了, 而且速度比 Sublime 2 得到了增强. Sublime 3 可以到官网下载 ...
- HDOJ-1263
水果 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...