更生动的排序动画。

通过改变div的高度来实现排序，通过闭包来实现for循环的睡眠时间。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        button

        {

            width:70px;

            height:30px;

            background:#005AA8;

            color:white;

            font-size:15px;

            font-family:Microsoft YaHei;

            border:0;

            outline:0;

            border-radius:5px;

            cursor:pointer;

            opacity:.8;

        }

        button:hover

        {

            opacity:1;

        }

        #box

        {

            width:300px;

            height:400px;

            outline:1px solid black;

            margin-top:10px;

        }

        #box div

        {

            width:3px;

            height:200px;

            margin-left:1px;

            background:blue;

            display:inline-block;

        }

        #boxboxbox

        {

            width:0;

            height:100%;

            display:inline-block;

            margin-left:0px;

        }

    </style>

</head>

<body>

<button onclick="fnnn()">排序</button>

<div id="box">

<span id="boxboxbox"></span>

</div>

<script>

    // div 以及 div 的宽高

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

    var boxW = box.offsetWidth;

    var boxH = box.offsetHeight;

    var len = boxW/4;

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

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

        var divH = parseInt(Math.random()*boxH);

        crtDiv.style.height = divH + "px";

        crtDiv.index = i;

        box.insertBefore(crtDiv,document.getElementById("boxboxbox"));

    }

    function fnnn(){

        setInterval(fn,300);

    }

    function fn(){

        var childDiv = box.children;

        for(var j = 0,leng = childDiv.length-1;j<leng;j++){

            for(var n = 0,nleng = childDiv.length-1;n<nleng-j;n++){

                (function fun(n){

                    setTimeout(function(){

                        if(parseInt(childDiv[n].style.height) > parseInt(childDiv[n+1].style.height)){

                            var oneH = parseInt(childDiv[n].style.height);

                            childDiv[n].style.height = parseInt(childDiv[n+1].style.height) + "px";

                            childDiv[n+1].style.height = oneH + "px";

                        }

                    },n*100);

                })(n);

            }

        }

    }

</script>

</body>

</html>

JS冒泡排序（div）的更多相关文章

  1. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  2. js实现div居中

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  5. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  6. JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

  7. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  8. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  9. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  10. js获取div基础元素

    1.js获取div元素 clientHeight 获取对象的高度,不计算任何边距.边框.滚动条,但包括该对象的补白. clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距 ...

随机推荐

  1. SVN搭建简单教程

    一.引言 笔者曾经试图在网上搜索一篇关于SVN源代码服务器搭建方面的中文技术文章,可惜,所找到的,要么是不完整,要么就是对笔者没什么帮助的文章,TortoiseSvn的帮助文档固然强大,但因为是英文, ...

  2. 各大浏览器内核介绍（Rendering Engine）

    在介绍各大浏览器的内核之前,我们先来了解一下什么是浏览器内核. 所谓浏览器内核就是指浏览器最重要或者说核心的部分"Rendering Engine",译为"渲染引擎&qu ...

  3. 基于SSH框架的网上商城的质量属性

    常见质量属性 1.性能 性能就是一个东西有多快,通常指响应时间或延迟. 响应时间:从发出请求到收到响应所用的时间,比如用户点击网页中的超链接或桌面应用程序中的按钮 延迟:消息从A点到B点,通过你的系统 ...

  4. Ubuntu Server 14.04 --secure-file-priv error in MySql 解决方案

    在VPS部署Ubuntu 14.04服务器时,MySQL执行导出文件命令,报错: The MySQL server is running with the --secure-file-priv opt ...

  5. Intern---Microsoft Academic China Team

    项目二: AEther: 项目 一.项目需求:对搜索关键词进行类别的统计分析,为了后面的entity-rank做准备. 0,各种关键数据统计: 数据量:1个月数据:about 1000T. 1,对IE ...

  6. 《转载》GET，POST，PUT，DELETE的区别

    本文转载自:转载请说明出处,谢谢[hyddd(http://www.cnblogs.com/hyddd/)] Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT, ...

  7. 机器学习caffe环境搭建——redhat7.1和caffe的python接口编译

    相信看这篇文章的都知道caffe是干嘛的了,无非就是深度学习.神经网络.计算机视觉.人工智能这些,这个我就不多介绍了,下面说说我的安装过程即遇到的问题,当然还有解决方法. 说下我的环境:1>虚拟 ...

  8. C++各种进制的转换

    /* @author:CodingMengmeng @theme:各种进制之间的转换 @time:2017-1-6 21:39:08 @blog:http://www.cnblogs.com/codi ...

  9. Js 日期 多少分钟前，多少秒前

    ;(function(window){ /** * [dateDiff 算时间差] * @param {[type=Number]} hisTime [历史时间戳,必传] * @param {[typ ...

  10. Linux下memcache的安装和启动

    memcache是高性能,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度.据说官方所说,其用户包括twitter.digg.flickr等,都是些互联网大腕呀.目前用memca ...