javascript 新闻列表排序简单封装

 更新时间:2009年11月29日 23:00:48   作者:  
可以控制列表按日期以及按字数排序.升或者降序.代码简单封装,按一定的格式调用即可。
代码写的比较繁琐,很多方法用的很原始...
代码如下:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

js代码如下:

复制代码 代码如下:

function $(s){
return document.all?document.all[s]:document.getElementById(s);
}
function list_sort(list_id,btn1,btn2){
var list=$(list_id).getElementsByTagName("li");
var c_date=$(list_id).getElementsByTagName("span");
var content=$(list_id).getElementsByTagName("a");
var date=new Array(),con=new Array,date1=new Array(),con1=new Array,list_con=new Array;
for (var i=0;i<list.length ;i++ )//将要比较的内容存入数组
{date1[i]=date[i]=c_date[i].innerHTML;
list_con[i]=list[i].innerHTML;
con1[i]=con[i]=content[i].innerHTML.length;
}
con.sort(function(x,y){return parseInt(x)-parseInt(y);});//将字符长度排序
date.sort(function sortDate(a,b)
{
return new Date(a.replace(/-/,"/")) - new Date(b.replace(/-/,"/"));
});//将日期排序.
function darry(arry1,arry2){//取数组下标函数。
var b=new Array();
for (var n=0;n<list.length ;n++ )
{for (var m=0;m<list.length;m++ )
{if (arry1[m]==arry2[n]) b[n]=m;
}
}
return b;
}
var top=0;//定义排序方向浮标
$(btn1).onclick=function(){insetHTM(con1,con)}
$(btn2).onclick=function(){insetHTM(date1,date)}
function insetHTM(ary1,ary2){ //排序后的html输出到ul中
var c=darry(ary1,ary2);//取得排序后数组的下标
var list_html="";//定义变量存储排序后的html
if (top==0)
{for (var k=0;k<list.length;k++ )
{list_html+="<li>"+list_con[c[k]]+"</li>";top=1}
}
else
{ for (var k=list.length-1;k>=0;k--)
{list_html+="<li>"+list_con[c[k]]+"</li>";top=0}
}
$(list_id).innerHTML=list_html;
}
}
window.onload=function(){
list_sort("news_list","button1","button2")
}

相关文章

  • JavaScript实现类似淘宝的购物车效果

    JavaScript实现类似淘宝的购物车效果

    这篇文章主要介绍了JavaScript实现购物车特效的相关资料,文中通过示例代码详细介绍了,利用Javascript如何实现类似淘宝购物车中商品的单选、全选、删除、修改等功能,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • 实例详解JSON取值(key是中文或者数字)方式

    实例详解JSON取值(key是中文或者数字)方式

    本文通过实例详解JSON取值(key是中文或者数字)方式,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-08-08
  • Js调用Java方法并互相传参的简单实例

    Js调用Java方法并互相传参的简单实例

    下面小编就为大家带来一篇Js调用Java方法并互相传参的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript题目,重写函数让其无限相加

    javascript题目,重写函数让其无限相加

    群里有个出了一道有趣的题目,分享出来让大家看看
    2012-02-02
  • H5手机端多文件上传预览插件

    H5手机端多文件上传预览插件

    这篇文章主要为大家详细介绍了H5图片上传插件,基于zepto,支持多文件上传,进度和图片预览,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 8个开发者必须知道的JavaScript深层概念(推荐)

    8个开发者必须知道的JavaScript深层概念(推荐)

    JavaScript有一个名为“调用堆栈”(Call Stack)的简单列表,它逐一管理任务(堆栈算法),但是当异步任务被传递时,JavaScript会把它弹出到web API,浏览器就会处理它,这篇文章主要介绍了8个开发者必须知道的JavaScript深层概念,需要的朋友可以参考下
    2022-10-10
  • JavaScript的原型存在的安全问题及解决办法

    JavaScript的原型存在的安全问题及解决办法

    JavaScript的原型很多人都知道也很好用,但是很多人在使用原型继承中导致的安全问题却很少人知道,接下来我们就来好好了解一下,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • JavaScript基础篇(6)之函数表达式闭包

    JavaScript基础篇(6)之函数表达式闭包

    这篇文章主要介绍了javascript基础篇(6)之函数表达式闭包的相关资料,需要的朋友可以参考下
    2015-12-12
  • three.js实现炫酷的全景3D重力感应

    three.js实现炫酷的全景3D重力感应

    这篇文章主要为大家详细介绍了three.js实现炫酷的全景3D重力感应,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Varlet组件实现一个丝滑的点击水波效果详解

    Varlet组件实现一个丝滑的点击水波效果详解

    这篇文章主要为大家介绍了Varlet组件实现一个丝滑的点击水波效果示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论