zoukankan      html  css  js  c++  java
  • js排序演示

    本来想写个js的排序演示 但是js是异步的编程 即使用settimeout也很难控制多个动画的运行顺序 希望有人给我的程序做补充

    <input type="text" name="amount" id="amount" />
    <input type="button" value="确定" id="ofcourse" />
    <input type="button" value="冒泡" id="mover" />
    <div id="content">
    </div>
    <script src="../jquery-1.4.4.min.js"></script>
    <script src="../jquery-1.4.1-vsdoc.js"></script>
    <script src="2012-01-30 popo.js"></script>

    /// <reference path="..\jquery-1.4.1-vsdoc.js"/>

    //var ar = [];

    $("#ofcourse").click(function () {
    $(".pan").remove();

    array = $("#amount").val().split(',');
    for (i in array) {
    var a = $("<div>");
    a.addClass("pan");
    a.html(array[i]);
    a.css("width", "20px");
    a.css("position", "absolute");
    a.css("left", i * 30);
    a.css("height", "20px");
    a.css("background-color", "red ");
    a.attr("id", i);

    //document.write(i);
    $("#content").append(a);
    }
    })

    $("#mover").click(function () {
    //ar = [];
    for (i = 0; i < array.length; i++) {
    for (j = i + 1; j < array.length; j++) {
    //setTimeout(function () { cmove(); }, 1000*i*j);
    //cmove(array[j], array[i]);
    if (array[j] < array[i]) {
    //ar.push({ f: i, t: j });
    //cmove(i, j)
    //setTimeout(function () { move(i, j); }, 500);
    // setTimeout(function () { ani1(i, j); }, i * j * 1000);

    ani1(i, j);

    temp = array[i];
    array[i] = array[j];
    array[j] = temp;
    }
    }

    //document.write(nodeList[i])
    }

    // for (i = 0; i < ar.length; i++) {
    ////ani(ar[i].f, ar[i].t, i * 1000);
    // var f = ar[i].f;
    // var t = ar[i].t;
    //
    // setTimeout(function () { ani1(f, t); }, i * 1000);

    //// var from = $("#" + f);
    //// var to = $("#" + t);

    //// var left = $("#" + f).css("left");
    //// from.animate({ left: $("#" + t).css("left") }, 1000);
    //// to.animate({ left: left }, 1000);

    //// var id = from.attr("id");
    //// from.attr("id", to.attr("id"));
    //// to.attr("id", id);
    // }
    //alert(array);
    })

    function ani1(i, j) {
    var from = $("#" + i);
    var to = $("#" + j);

    var id = from.attr("id");
    from.attr("id", to.attr("id"));
    to.attr("id", id);

    var left = from.css("left");
    from.animate({ left: to.css("left") }, 1000);
    to.animate({ left: left }, 1000);

    // from.delay(i * j * 1000).animate({ left: to.css("left") }, 1000);
    // to.delay(i * j * 1000).animate({ left: left }, 1000);
    }

    //function ani(i, j, d) {
    //// $("#" + id).delay(d).animate({ left: po }, t);
    // var from = $("#" + i);
    // var to = $("#" + j);
    // var left = $("#" + i).css("left");
    // from.delay(d).animate({ left: $("#" + j).css("left") }, 1000);
    // to.delay(d).animate({ left: left }, 1000, function () {
    // var id = from.attr("id");
    // from.attr("id", to.attr("id"));
    // to.attr("id", id);
    // });
    //}

    //function cmove(i, j) {
    // ar.push({ f: i, t: j });
    //}

    //function move(i, j) {
    // var left = $("#" + i).css("left");
    // $("#" + i).animate({ left: $("#" + j).css("left") }, 1000);
    // $("#" + j).animate({ left: left }, 1000);
    //}

    //$(function () {
    // var array = [2, 1, 3, 4];
    // $("#amount").val(array);
    //})
  • 相关阅读:
    N25_复杂链表的复制
    N24_二叉树中和为某一路径
    N23_判断是否为二叉搜索树的后序遍历序列
    N22_从上到下打印二叉树
    win7桌面小工具已停止工作解决办法
    C3P0数据库连接池使用
    js中的页面跳转
    怎么用js代码禁止浏览器的前进与后退?
    怎么在 Dos 下运行 PHP 和 MySQL 命令
    80端口被system 占用解决方法
  • 原文地址:https://www.cnblogs.com/frog2008/p/2336753.html
Copyright © 2011-2022 走看看