基于javascript达成的急迅排序,js完结右键自定蒿子杆单

function quickSort(arr){
    //如果数组只有一个数,就直接返回;
    if(arr.length<1){
      return arr;  
    } 
    //找到中间的那个数的索引值;如果是浮点数,就向下取整
    var centerIndex = Math.floor(arr.length/2);
    //根据这个中间的数的索引值,找到这个数的值;
    var centerNum = arr.splice(centerIndex,1);
    //存放左边的数
    var arrLeft = [];
    //存放右边的数
    var arrRight = [];
    for(i=0;i<arr.length;i++){
      if(arr[i]<centerNum){
        arrLeft.push(arr[i])
      }else if(arr[i]>centerNum){
        arrRight.push(arr[i])
      }
    }
    return quickSort(arrLeft).concat(centerNum,quickSort(arrRight));    
  };
  var arrSort = [33,18,2,40,16,63,27];
  var arr1 = quickSort(arrSort);
  console.log(arr1);

仿锋利的Jquery案例做的一个滚动切换效果,供大家参考,具体内容如下

本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下

    “妙味课堂”的一期视频教学。

效果如下图:

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 #menu {
 height: 200px;
 width: 50px;
 border: 1px solid gray;
 background-color: antiquewhite;
 padding: 10px;
 display: none;
 position: absolute;
 }

 ul,
 li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 line-height: 40px;
 }
 </style>
 </head>

 <body>
 <div id="menu">
 <ul>
 <li>复制</li>
 <li>粘贴</li>
 <li>运行</li>
 <li>工具</li>
 <li>帮助</li>
 </ul>
 </div>
 </body>
 <script type="text/javascript">
 var menu = document.getElementById("menu");
 document.oncontextmenu = function(ev) {
 var oEvent = ev || event;
 //自定义的菜单显示
 menu.style.display = "block";
 //让自定义菜单随鼠标的箭头位置移动
 menu.style.left = oEvent.clientX + "px";
 menu.style.top = oEvent.clientY + "px";
 //return false阻止系统自带的菜单,
 //return false必须写在最后,否则自定义的右键菜单也不会出现
 return false;

 }
 //实现点击document,自定义菜单消失
 document.onclick = function() {

 menu.style.display = "none";
 }
 </script>

</html>

主要原理是:快速排序的原理:找基准点、建立二个数组分别存储、递归

图片 1

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

基准点:就是找到这个数组中间的一个数;

前台HTML代码如下:

您可能感兴趣的文章:

  • javascript鼠标右键菜单自定义效果
  • JS实现的自定义右键菜单实例二则
  • javascript自定义右键弹出菜单实现方法
  • Js实现自定义右键行为
  • js实现完全自定义可带多级目录的网页鼠标右键菜单方法
  • js自定义鼠标右键的实现原理及源码
  • JavaScript
    对任意元素,自定义右键菜单的实现方法
  • JS简单实现自定义右键菜单实例

建立二个数组分别存储:就是以这个基准点,将它的左右数值,分别存放到两个定义的新数组当中;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>滚动图</title>
  <link rel="stylesheet" type="text/css" href="css/RollControl.css" />
  <script type="text/javascript" src="script/jquery-1.8.3.js"></script>
  <script type="text/javascript">
    $(function () {
      var page = 1;
      var i = 4;
      var $v_trends = $("#view_menu_trends").find("li");
      $v_trends.eq(0).addClass('currentTrends');//默认第一个点选中
      $(".next").click(function () {
        var $parent = $("#view_menu");
        var $v_content = $("#view_content");//外围width
        var $v_show = $("#view_content_fixed");//

        var v_width = $v_content.width();
        var len = $v_content.find('li').length;
        var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数
        if (!$v_show.is(":animated")) {
          if (page == page_count) {
            $v_show.animate({ left: '0px' }, 'slow');//如果超过总页数 那么就跳回第一页
            page = 1;
          } else {
            $v_show.animate({ left: '-=' + v_width }, 'slow');
            page++;
          }
          $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends');
        }
      });
      $(".pre").click(function () {
        var $parent = $("#view_menu");
        var $v_content = $("#view_content");//外围width
        var $v_show = $("#view_content_fixed");//
        var v_width = $v_content.width();
        var len = $v_content.find('li').length;
        var page_count = Math.ceil(len / i);//所有的图片数/版面数=总页数
        if (!$v_show.is(":animated")) {//判断是否是动画状态
          if (page == 1) {
            $v_show.animate({ left: '-=' + (page_count - 1) * v_width + "px" }, 'slow');//到了第一页那么跳转到最后一页
            page = page_count;
          } else {
            $v_show.animate({ left: '+=' + v_width }, 'slow');
            page--;
          }
          $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends');
        }
      });
    });
  </script>
</head>
<body>
  <div>
    <div id="view_menu">
      <div id="view_menu_title">热播电视剧</div>
      <div id="view_menu_trends">
        <ul>
          <li>●</li>
          <li>●</li>
          <li>●</li>
        </ul>
      </div>
      <div id="view_menu_control">

          <img class="pre" src="Rollpic/left_arrow.png" />

          <img class="next" src="Rollpic/right_arrow.png" />
      </div>
    </div>
    <div id="view_content">
      <div id="view_content_fixed">
        <ul>
          <li>
            <div>
              <img src="Rollpic/1.jpg" /></div>
            </li>
          <li>
            <div>
              <img src="Rollpic/2.jpg" />
            </div>
            </li>
          <li>
            <div>
              <img src="Rollpic/3.jpg" />
            </div>
            </li>
          <li>
            <div>
              <img src="Rollpic/4.jpg" />
            </div>
            </li>
          <li>
            <div>
              <img src="Rollpic/5.jpg" />
            </div>
            </li>
          <li>
            <div>
              <img src="Rollpic/6.jpg" />
            </div>
            </li>
          <li>
            <div>
              <img src="Rollpic/7.jpg" />
            </div>
            </li>
          <li>
            <div>
              <img src="Rollpic/8.jpg" />
            </div>
            </li>
          <li>
            <div>
              <img src="Rollpic/9.jpg" />
            </div>
            </li>
          <li>
            <div>
              <img src="Rollpic/10.jpg" />
            </div>
            </li>
          <li>
            <div>
              <img src="Rollpic/11.jpg" />
            </div>
            </li>
          <li>
            <div>
              <img src="Rollpic/12.jpg" />
            </div>
            </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

递归:在函数内部调用自身;

RollControl.css代码如下:

这里我总结的一点是在使用递归时:

body {
  margin: 0px;
  padding: 0px;
}

#view_menu {
  width: 600px;
  height: 30px;
  line-height: 30px;
  cursor: default;
}

#view_menu_title {
  float: left;
  font-family: 'Microsoft YaHei';
  width: 150px;
  text-align: center;
}

#view_menu_trends {
  float: left;
  line-height: 30px;
  color: #99CC99;
  font-size: 10px;
}

.currentTrends {
  color: #009933;
}

#view_menu_trends ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#view_menu_trends ul li {
  text-align: center;
  float: left;
  width: 15px;
}

#view_menu_control {
  float: left;
  width: 100px;
  height: 30px;
  text-align: center;
}

#view_menu_control img {
  width: 25px;
  height: 25px;
  line-height: 30px;
  cursor: pointer;
}

#view_content {
  width: 548px;
  height: 178px;
  position: relative;
  overflow: hidden;
  border: 1px solid #CCCCCC;
}

#view_content_fixed {
  position: absolute;
  width: 2500px;
}

#view_content_fixed img {
  cursor: pointer;
}

#view_content ul {
  margin: 0px;
  position: absolute;
  padding: 0px;
}

#view_content ul li {
  margin: 0px;
  padding: 0px;
  float: left;
  padding: 8px;
  list-style: none;
  display: inline;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注