JS实现ul,li排序效果

<!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>

转载于:https://www.cnblogs.com/kangshuai/p/7153627.html

JS实现ul,li排序效果相关推荐

html5单击修改背景色,js实现点击ul/li等改变背景颜色
今天项目遇到了标题所说的问题,找到一篇很高效的例子,值得学习. Change.html body li{ list-style-type: none; } 文字文字文字 function g(x) { ...
html li 做瀑布流,使用js来实现瀑布流效果
使用js来实现瀑布流效果瀑布流的实现方法有很多种,我这次采用的是使用绝对定位的方法来实现.页面中包含一个容器ul(设置为relative),然后所有添加的li都放在这个容器里面,li的宽度固定.在l ...
html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏
在网页设计过程中,某些时候需要隐藏一些元素(div/ul li),某些时候又需要显示一些隐藏的元素.例如一打开网页显示一段网站公告,过一小段时间后把公告隐藏起来.对于这类元素显示隐藏的操作,应该如何实 ...
css案例学习之div ul li a 实现导航效果
效果代码 <html> <head> <title>无需表格的菜单</title> <style>body{background-colo ...
用ul li实现边框重合并附带鼠标经过效果
边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 1 <!DOCTYPE html> 2 <html lang ...
html怎么实现单个li效果,基于DIV+ul+li实现的表格(多示例)
普通的显示数据的时候,ul就是项目列表,li就是列表项.可以用来显示数据.如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度.行间距.背景边框等需要配合CSS一起设 ...
html中js隐藏div的高度,js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）...
某些时候需要知道元素div(或 ul li)的宽度或高度,大多情况下可以用js取元素div的width或height属性获得,但有时候这个方法不一定奏效,把div的宽度或高度定义在CSS样式中,这个方 ...
基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
ul li设置横排，并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单让ul li横向排列及圆点处理我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

JS实现ul,li排序效果

JS实现ul,li排序效果相关推荐

最新文章

热门文章