<!DOCTYPE html>

<html>

<head>

    <title>js列表排序</title>

    <meta charset="utf-8">

</head>

<style type="text/css">

</style>

<script type="text/javascript">

        window.onload=function(){

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

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

             oBtn.onclick=function(){

                  var aLi=document.getElementsByTagName('li');

                  var arr=[];

                  for(var i=0;i<aLi.length;i++){

                       arr[i]=aLi[i];

                  }

                arr.sort(function(li1,li2){

                    var n1=parseInt(li1.innerHTML);

                    var n2=parseInt(li2.innerHTML);

                    return n1-n2;

                });

                 for(var i=0;i<arr.length;i++){

                     oUl.appendChild(arr[i]);

                 }

             }

        }

</script>

<body>

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

        <hr />

        <ul id="ul1">

            <li>32</li>

            <li>25</li>

            <li>3</li>

            <li>18</li>

</body>

</html>

JS实现ul,li排序效果的更多相关文章

  1. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS 写<ul><li>

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Jquery和JS获取ul中li标签（转）

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  4. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  5. 竖向折叠二级导航JS代码（可防刷新ul/li结构）

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  6. ul li a active jquery.cookie.js

    div class="righter nav-navicon" id="admin-nav"> <div class="mainer&qu ...

  7. css案例学习之div ul li a 实现导航效果

    效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

  8. JS和jQuery中ul li遍历获取对应的下角标

    首先先看代码: html代码部分: <div id="div"> <ul> <li>1111111</li> <li>2 ...

  9. 用ul li实现边框重合并附带鼠标经过效果

    边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...

随机推荐

  1. GoldenGate Logdump基本使用

    Logdump是GoldenGate复制软件中附带的一个工具软件,在OGG的目录下可以找到.这个工具主要用于分析OGG生成的队列文件,查找记录.统计队列文件中的数据等. 在OGG安装目录下执行logd ...

  2. 计算概论（A）/基础编程练习1(8题)/2:苹果和虫子

    #include<stdio.h> #include<math.h> int main() { /* n个苹果 每x小时能吃掉一个苹果 经过y小时 */ float n, x, ...

  3. nginx location分析

  4. Python3 hasattr()、getattr()、setattr()函数简介

    Python3 hasattr().getattr().setattr()函数简介 一.hasattr(object, name) 判断object对象中是否存在name属性,当然对于python的对 ...

  5. Win7的话，可能有十种简单的方法进行提速呢

    1.窗口转换更快速 Windows7绚丽的效果的确美观,但漂亮的效果就需要拿速度来交换,因此如果你想要Windows7中的各个窗口切换得更快速,那关闭窗口最大.最小化的动画效果后,你会发现窗口切换得更 ...

  6. Kali系列之ettercap欺骗

    ettercap在局域网中使用欺骗, 捕获对象浏览器中的图片. 环境 攻击方:kali linux, ip:192.168.137.129 目标方ip:192.168.137.130 路由器:192. ...

  7. Stanford CS231n实践笔记（课时22卷积神经网络工程实践技巧与注意点 cnn in practise 上）

    本课主要2个实践内容: 1.keras中数据集丰富,从数据集中提取更多特征(Data augmentation) 2.迁移学习(Tranform learning) 代码:https://github ...

  8. Office 2016 永久激活

    启示:office突然过期,QWQ,卖电脑的真坑爹,找了好多办法,总结2个不花钱的办法啦. 1>只有30天试用期 Office 2016预览版序列号:NKGG6-WBPCC-HXWMY-6DQG ...

  9. hdu 4366 Successor - CDQ分治 - 线段树 - 树分块

    Sean owns a company and he is the BOSS.The other Staff has one Superior.every staff has a loyalty an ...

  10. vector.resize 与 vector.reserve的区别(转载)

    转载:https://blog.csdn.net/shuilan0066/article/details/3588478 reserve是容器预留空间,但并不真正创建元素对象,在创建对象之前,不能引用 ...