点滴积累【JS】---JS小功能（JS实现排序）
效果：
思路：
首先，获得用到的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实现排序）的更多相关文章
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
- js实现小功能 动态赋值
- 常用小功能js函数-函数防抖
函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时.这个我经常用到/** * 函数防抖 * fun 需要延时执行的函数 * delayTime 延时时间 * **/export ...
- js/jq 小功能函数
1.点击复制内容到剪贴板 function copyToClip(str) { var save = function(e) { e.clipboardData.setData('text/plain ...
- js实现小时钟,js中Date对象的使用?
介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...
- js小功能整理
/** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [检测是否含有的字符串] * @return ...
- js小功能记录
个人日常中遇到的js小功能记录,方便查看. /** * 判断是否包含字符串某字符串 * @param {[type]} str [被检测的字符串] * @param {[type]} substr [ ...
- js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下: <!DOCTYPE html> <html lang="en&qu ...
- 网站开发---js与java实现的一些小功能
记录一下网站开发过程中的一些小功能 1.js获取当前年份: <span>Copyright © 2017-<script>document.write( new Date(). ...
- Vue小功能-视频播放之video.js
最近在练手一个小项目,想给首页增加一个视频介绍(如下图).涉及到了vue视频播放的功能,所以在网上了解了一下. 相关的插件是Video.js,官网讲解比较详细,我罗列出来,可以根据自己 ...
随机推荐
- SqlServer_游标循环
--从游标取的值 ) ) --获取待返现数据,并循环处理 DECLARE TestCursor CURSOR FOR SELECT ID,UserName FROM dbo.UserInfo Open ...
- cocos2d-x 3.0 CCTime 的改动
在cocos3.0 中,去掉了CCTimer这个类. 我们须要把之前的代码改动为 定义时间的变量是 struct timeval start 1.获取时间的方式是: gettimeofday(&a ...
- [转]Sql Server参数化查询之where in和like实现详解
本文转自;http://www.cnblogs.com/lzrabbit/archive/2012/04/22/2465313.html 文章导读 拼SQL实现where in查询 使用CHARIND ...
- iOS:手势的详解UIGestureReconizer
手势类:UIGestureReconizer 父类: 手势状态枚举 typedef NS_ENUM(NSInteger, UIGestureRecognizerState) { UIGesture ...
- 用于OpenRISC的Makefile示例
#* #*********************************************************************************************** ...
- Wishbone B3总线Generic RAM写法
以下Verilog HDL代码符合wishbone总线B3标准协议,在Altera和Xilinx的开发工具上可以实现综合,自动推断并采用片上RAM资源,可以完成内存内容的初始化. /* ******* ...
- [转载]Delphi 版 everything、光速搜索代码
近日没啥事情,研究了一下 everything.光速搜索原理.花了一个礼拜时间,终于搞定. 废话不多说,直接上代码: unit uMFTSearchFile; { dbyoung@sina.com 2 ...
- ones工作流预设
系统首选项->工作流->新建保存后在工作流设计中将内容复制到编辑器中. 出库流程 支持分批次出库,支持外部单据转化为出库单并在出库结束后通知原始单据 流程图: 模块:storage.sto ...
- 【转载】Instagram架构分析笔记
原文地址:http://chengxu.org/p/401.html Instagram 架构分析笔记 全部 技术博客 Instagram团队上个月才迎来第 7 名员工,是的,7个人的团队.作为 iP ...
- window环境下备份与恢复(实际操作)
C:\Documents and Settings\xuzhengzhu>sqlplus /nolog SQL*Plus: Release 10.2.0.1.0 - Production on ...