<!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. 深入理解Node.js基于事件驱动的回调

    回调和异步调用的关系 首先明确一点,回调并非是异步调用,回调是一种解决异步函数执行结果的处理方法.在异步调用,如果我们希望将执行的结果返回并且处理时,可以通过回调的方法解决.为了能够更好的区分回调和异 ...

  2. [转载]web安全之token

    参考:http://blog.csdn.net/sum_rain/article/details/37085771 Token,就是令牌,最大的特点就是随机性,不可预测.一般黑客或软件无法猜测出来. ...

  3. win10系统jdk安装和环境变量配置

    新换电脑的原因,要重新安装jdk,完整记录一下安装过程 jdk版本用的1.7(公司默认版本) 这是jdk安装目录   更改为D:\jdk\java\jdk1.7 安装jre目录  更改为D:\jdk\ ...

  4. Linux sed 命令字符串替换使用方法详解

    1. sed替换的基本语法 sed 's/原字符串/替换字符串/' 单引号里面,s表示替换,三根斜线中间是替换的样式,特殊字符需要使用反斜线”\”进行转义.2. 单引号” ‘ ’”是没有办法用反斜线” ...

  5. django中表单处理

    在web端与后端交互时,我们除了使用html原生的form标签,还可以使用django自带的表单. Django 提供广泛的工具和库来帮助你构建表单来接收网站访问者的输入,然后处理以及响应输入. HT ...

  6. Redis可以用来做什么？（摘自http://www.lianpenglin.cc廉鹏林博客）

    Redis 是互联网技术领域使用最为广泛的存储中间件,它是「Remote Dictionary Service」的首字母缩写,也就是「远程字典服务」.Redis 以其超高的性能.完美的文档.简洁易懂的 ...

  7. vue 学习一些好的文档网址推荐

    相关文章   1. vue.js 2.x 文档  http://cn.vuejs.org https://vue.docschina.org/ 2. npm https://www.npmjs.com ...

  8. C语言动态链表数据结构实现的学生信息项目

    注:此项目来源于吕鑫老师的教程 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <conio.h> u ...

  9. Python3基础 frozenset 使用list创建frozenset

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  10. 为linux dns (bind named)服务器配置 单独的笔记

    注意: 当在把 named.ca文件下载好13个根dns服务器的 全球记录后, 就不再需要别的 dns服务器来辅助获得了. 只要把所有 本地服务器 不能解析的请求, 都发送到 . 点根去就行了, 所以 ...