点滴积累【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,官网讲解比较详细,我罗列出来,可以根据自己 ...
随机推荐
- GUN C/C++ __attribute__ 用法 转
http://blog.csdn.net/mydo/article/details/3738336 GNUC的一大特色(却不被初学者所知)就是__attribute__机制.__attrib ...
- PVS-Studio静态通用分析规则
通用分析 PVS - Studio产品包含了一套通用静态分析规则,用于检测在C / C ++/ C+11应用程序中大范围内的各种缺陷. 通用的规则集帮助您发现逻辑错误,拼写错误,导致访问冲突的代码片段 ...
- 报错:this class is not key value coding-compliant for the key closeLotTextField解决方法
几种情况下都会报这种错误: 1,加载自定义的tableViewCell的时候总是死在: XInstrumentOpenCell *cell = [tableViewdequeueReusableCel ...
- linux下搭建SVN服务器完全手册
原文:http://www.cnblogs.com/wrmfw/archive/2011/09/08/2170465.html 系统环境 RHEL5.4最小化安装(关iptables,关 ...
- synchronized-锁重入
public class MyThread5_synchronized1 { /** * 父子类同步必须 都 使用synchronized关键字 */ static class Main { publ ...
- Wishbone接口通用RAM
/* ************************************************************************************************ ...
- 拼车专用道 HOV lane
近几年,不少人开始找人拼车上下班,这样不仅能减少车辆开支,同时也能为缓解交通拥堵贡献一份力量.在国外,不少城市都在交通高峰时段为这一类车辆开设专用车道,叫做HOV lane.
- kubernetes 部署SonarQube 7.1 关联LDAP
之前有写过一篇如何在kubernetes上部署SonarQube的文档, 然后由于客户的需求,需要SonarQube关联LDAP的用户, 于是今天花了半天时间研究了以下如何在原有的基础上安装LDAP插 ...
- nginx安装说明
下载地址:http://nginx.org/en/download.html 安装版本:1.10.0 安装配置如下: /etc/nginx 目录 /home/nginx目录 --prefix=/hom ...
- Android开发 之 我的jar包引用方法
1.在工程上名上右键->Build Path ->Configure Build Path 2.在Libraries选项卡中,选择右侧的Add External JARs,然后选择要导入的 ...