效果：

思路：

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

代码：

 <head runat="server">

     <title></title>

     <style type="text/css">

         ul li

         {

             background-color: #00FFFF;

         }

     </style>

     <script type="text/javascript">

         window.onload = function () {

             var oBtn = document.getElementById('btn');

             var oUl1 = document.getElementById('ul1');

             var oLiAll = oUl1.getElementsByTagName('li');

             var array = [];

             oBtn.onclick = function () {

                 for (var i = 0; i < oLiAll.length; i++) {       //把未排序前的li挨个添加到array里面

                     array[i] = oLiAll[i];

                 }

                 array.sort(function (n1, n2) {      //排序array

                     var num1 = n1.innerHTML;

                     var num2 = n2.innerHTML;

                     return num1 - num2;

                 });

                 for (var j = 0; j < array.length; j++) {        //把排序好的array挨个添加到ul里面

                     oUl1.appendChild(array[j]);

                 }

             }

         };

     </script>

 </head>

 <body>

     <ul id="ul1" style="width: 200px;">

         <li>6</li>

         <li>2</li>

         <li>9</li>

         <li>3</li>

         <li>5</li>

         <li>1</li>

         <li>11</li>

         <li>85</li>

         <li>7</li>

         <li>10</li>

     </ul>

     <input type="button" id="btn" value="排序" />

 </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. mysql备份mysqldump

    mysqldump常用于MySQL数据库逻辑备份. 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dump ...

  2. seajs实例

    点击文本改变: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. .Net的差评

    .NET平台很棒.真的很棒.直到它不再那么棒.我为什么不再用.NET?简单来说,它限制了我们选择的能力(对我来说很重要),转移了我们的注意力,使得我们向内认知它的安全性,替代了帮助我们认知外面广阔世界 ...

  4. android使用C/C++调用SO库

    有时候,我们反编译apk得到一个so库,如果直接使用这个so库的话,必须使用原来so库同样的package名字,才能用.这样人家反编译你的apk,就知道你侵犯了人家的版权.为了达到混淆的目的,我们可以 ...

  5. 【Linux C 多线程编程】互斥锁与条件变量

    一.互斥锁 互斥量从本质上说就是一把锁, 提供对共享资源的保护访问. 1) 初始化: 在Linux下, 线程的互斥量数据类型是pthread_mutex_t. 在使用前, 要对它进行初始化: 对于静态 ...

  6. python numpy学习记录

    numpy是一个python和矩阵相关的库,在机器学习中非常有用,记录下numpy的基本用法 numpy的数组类叫做ndarray也叫做数组,跟python标准库中的array.array不同,后者只 ...

  7. strcpy,memcpy,memmove和内存重叠分析

    一:strcpy函数用法和实现: /* GNU-C中的实现(节选): */ char* strcpy(char *d, const char *s) { char *r=d; while((*d++= ...

  8. jsp页面数据回显（select下拉选择框）

    1.静态变量方式: <!-- 实现select标签回显 --> 1.<select name="curStatus" value="${curStatu ...

  9. 各种字符编码方式详解及由来(ANSI,UNICODE,UTF-8,GB2312,GBK)

    一直对字符的各种编码方式懵懵懂懂,什么ANSI UNICODE UTF-8 GB2312 GBK DBCS UCS……是不是看的很晕,假如您细细的阅读本文你一定可以清晰的理解他们.Let's go! ...

  10. 网页图表控件Highcharts如何详细设置参数

    在下载了Highcharts范例之后,按照如下所示第一步第二步操作.在第二步中,默认并没有提供很多参数设置,比如如何去掉右下角的水印,如何自定义图标的高度宽度,背景颜色等等. 在我的另一篇文章中(Hi ...