效果:

思路:

首先,获得用到的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. GUN C/C++ __attribute__ 用法 转

     http://blog.csdn.net/mydo/article/details/3738336     GNUC的一大特色(却不被初学者所知)就是__attribute__机制.__attrib ...

  2. PVS-Studio静态通用分析规则

    通用分析 PVS - Studio产品包含了一套通用静态分析规则,用于检测在C / C ++/ C+11应用程序中大范围内的各种缺陷. 通用的规则集帮助您发现逻辑错误,拼写错误,导致访问冲突的代码片段 ...

  3. 报错:this class is not key value coding-compliant for the key closeLotTextField解决方法

    几种情况下都会报这种错误: 1,加载自定义的tableViewCell的时候总是死在: XInstrumentOpenCell *cell = [tableViewdequeueReusableCel ...

  4. linux下搭建SVN服务器完全手册

    原文:http://www.cnblogs.com/wrmfw/archive/2011/09/08/2170465.html 系统环境        RHEL5.4最小化安装(关iptables,关 ...

  5. synchronized-锁重入

    public class MyThread5_synchronized1 { /** * 父子类同步必须 都 使用synchronized关键字 */ static class Main { publ ...

  6. Wishbone接口通用RAM

    /* ************************************************************************************************ ...

  7. 拼车专用道 HOV lane

    近几年,不少人开始找人拼车上下班,这样不仅能减少车辆开支,同时也能为缓解交通拥堵贡献一份力量.在国外,不少城市都在交通高峰时段为这一类车辆开设专用车道,叫做HOV lane.

  8. kubernetes 部署SonarQube 7.1 关联LDAP

    之前有写过一篇如何在kubernetes上部署SonarQube的文档, 然后由于客户的需求,需要SonarQube关联LDAP的用户, 于是今天花了半天时间研究了以下如何在原有的基础上安装LDAP插 ...

  9. nginx安装说明

    下载地址:http://nginx.org/en/download.html 安装版本:1.10.0 安装配置如下: /etc/nginx 目录 /home/nginx目录 --prefix=/hom ...

  10. Android开发 之 我的jar包引用方法

    1.在工程上名上右键->Build Path ->Configure Build Path 2.在Libraries选项卡中,选择右侧的Add External JARs,然后选择要导入的 ...