效果：

思路：

首先，获得用到的ID，在把得到的<li>数组添加到array数组里面，然后在进行array排序，排序完后再将array中的数据用appendChild添加到ul里面；

代码：

  1.  <head runat="server">
  2.      <title></title>
  3.      <style type="text/css">
  4.          ul li
  5.          {
  6.              background-color: #00FFFF;
  7.          }
  8.      </style>
  9.      <script type="text/javascript">
  10.          window.onload = function () {
  11.              var oBtn = document.getElementById('btn');
  12.              var oUl1 = document.getElementById('ul1');
  13.              var oLiAll = oUl1.getElementsByTagName('li');
  14.              var array = [];
  15.              oBtn.onclick = function () {
  16.                  for (var i = 0; i < oLiAll.length; i++) {       //把未排序前的li挨个添加到array里面
  17.                      array[i] = oLiAll[i];
  18.                  }
  19.                  array.sort(function (n1, n2) {      //排序array
  20.                      var num1 = n1.innerHTML;
  21.                      var num2 = n2.innerHTML;
  22.                      return num1 - num2;
  23.                  });
  24.                  for (var j = 0; j < array.length; j++) {        //把排序好的array挨个添加到ul里面
  25.                      oUl1.appendChild(array[j]);
  26.                  }
  27.              }
  28.          };
  29.      </script>
  30.  </head>
  31.  <body>
  32.      <ul id="ul1" style="width: 200px;">
  33.          <li>6</li>
  34.          <li>2</li>
  35.          <li>9</li>
  36.          <li>3</li>
  37.          <li>5</li>
  38.          <li>1</li>
  39.          <li>11</li>
  40.          <li>85</li>
  41.          <li>7</li>
  42.          <li>10</li>
  43.      </ul>
  44.      <input type="button" id="btn" value="排序" />
  45.  </body>

点滴积累【JS】---JS小功能（JS实现排序）的更多相关文章

  1. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  2. js实现小功能 动态赋值

  3. 常用小功能js函数-函数防抖

    函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时.这个我经常用到/** * 函数防抖 * fun 需要延时执行的函数 * delayTime 延时时间 * **/export ...

  4. js/jq 小功能函数

    1.点击复制内容到剪贴板 function copyToClip(str) { var save = function(e) { e.clipboardData.setData('text/plain ...

  5. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  6. js小功能整理

    /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...

  7. js小功能记录

    个人日常中遇到的js小功能记录,方便查看. /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [ ...

  8. js模仿微信语音播放的小功能

    自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,,  代码如下: <!DOCTYPE html> <html lang="en&qu ...

  9. 网站开发---js与java实现的一些小功能

    记录一下网站开发过程中的一些小功能 1.js获取当前年份: <span>Copyright © 2017-<script>document.write( new Date(). ...

  10. Vue小功能-视频播放之video.js

        最近在练手一个小项目,想给首页增加一个视频介绍(如下图).涉及到了vue视频播放的功能,所以在网上了解了一下.     相关的插件是Video.js,官网讲解比较详细,我罗列出来,可以根据自己 ...

随机推荐

  1. Learning Note: SQL Server VS Oracle–Database architecture

     http://www.sqlpanda.com/2013/07/learning-note-sql-server-vs.html This is my learning note base on t ...

  2. Cargo, Rust’s Package Manager

    http://doc.crates.io/ Installing The easiest way to get Cargo is to get the current stable release o ...

  3. CountDownLatch使用场景及分析 并发测试

    原文:https://www.cnblogs.com/bqcoder/p/6089101.html CountDownLatch使用场景及分析   JDk1.5提供了一个非常有用的包,Concurre ...

  4. Android Context作为参数传递this

    来自:http://blog.csdn.net/sswmjoy/article/details/46119285将弹出框作为函数封装后参数为Context,供其他的类调用时,将this作为参数传入,总 ...

  5. 【web 回车】web项目 注册或登录页面 回车登录无效，解决方案

    解决方案: /** * 登陆按钮的点击事件 */ $("#loginID").click(function(){ var username = $("#u"). ...

  6. Unity3D新手教学，让你十二小时，从入门到掌握！（二） [转]

    版权声明:本文为Aries原创文章,转载请标明出处.如有不足之处欢迎提出意见或建议,联系QQ531193915 继续上一讲的内容,首先呢, 为了接下来要做的小游戏,在这里我要小小的修改一下移动的代码. ...

  7. hive的rownumber()的使用

    举个简单的栗子: 找到最小日期的那一条记录 select * from ( select *,row_number() over (partition by id order by cast(date ...

  8. Index 和 Type 的区别

    原文: Index vs. Type By Adrien Grand 译者: fengchang 对于 ES 的新用户来说,有一个常见的问题:要存储一批新的数据时,应该在已有 index 里新建一个 ...

  9. URLScan参数说明

    本文分步说明如何配置 URLScan 工具以防止 Web 服务器受到攻击和利用. 修改 URLScan.ini 文件 URLScan 的所有配置都是通过 URLScan.ini 文件执行的,此文件位于 ...

  10. 【Docker】mesos如何修改hostport默认端口范围？

    1.marathon文档:https://mesosphere.github.io/marathon/docs/native-docker.html Static port mapping: It's ...