javascript 新闻列表排序简单封装

代码写的比较繁琐，很多方法用的很原始...
代码如下：

*/
-->

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_con[c[k]]+"

";top=1}
}
else
{ for (var k=list.length-1;k>=0;k--)
{list_html+="

  • "+list_con[c[k]]+"

    • ";top=0}
    }
    $(list_id).innerHTML=list_html;
    }
    }
    window.onload=function(){
    list_sort("news_list","button1","button2")
    }
    // -->

    • 2005-09-02
      网页标准和标准指南下载
    • 2005-07-18
      使用模块快速启动你的
    • 2005-01-29
      使用模块快速来排列书序啊新闻能吗
    • 2005-02-15
      SEO基础
    • 2005-05-15
      SEO基础及世界观人生观理论很长啊啊啊啊啊
    简单说明：
    • 调用方法：list_sort(list_id,btn1,btn2)
    • list_id-- 新闻列表ul的id；
    • btn1-- 按字数排序事件的id；
    • btn2-- 按日期排序事件的id；

    [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")
    }

    赞 (0)

    相关推荐

    • javascript为下拉列表动态添加数据项

      javascript为下拉列表添加数据项.html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>为下拉列表动态添加数据项<

    • javascript实现通过拼音首字母快速选择下拉列表

      <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉列表快速选择</title> <script type="text/javascript" language="JavaScript">// 获取拼音首字母function ge

    • JavaScript实现对下拉列表值进行排序的方法

      本文实例讲述了JavaScript实现对下拉列表值进行排序的方法.分享给大家供大家参考.具体如下: function sortList(id) { var obj = document.getElementById("id"); var values = new Array(); for(var i = 0; i < obj.options.length; i++) { values.push(obj.options[i].innerHTML + "--xx--&quo

    • JavaScript实现常用二级省市级联下拉列表的方法

      本文实例讲述了JavaScript实现常用二级省市级联下拉列表的方法.分享给大家供大家参考.具体分析如下: 这里省和市的名称都是动态填充,选择省后自动填充城市 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/

    • javascript 操作select下拉列表框的一点小经验

      按照我一贯的web开发风格,所有不直接操作数据库的事件,都尽可能由javascript来实现,所以这个需求我打算使用js来完成. 首先来分析一下具体情况:这个页面是一个更新页面,品牌有品牌1和品牌2两个字段,品牌2可以为空,品牌1不能为空,所以品牌2的下拉列表框比品牌1多一项:如果选择了品牌的前8相中的任意一项,"活跃状态"要隐藏,否则"活跃状态"默认显示状态为"潜在":当查询的结果品牌1和品牌2有任意一项在品牌的前8相中,"活跃状态&

    • javascript 获取select下拉列表值的代码

      比如,在使用DWR的时候,如果你想传递下拉框的参数到后台的话,此时就需要先获取到下拉框的值了. 其实想要获取到下拉框的值是很简单的. 最关键的一段代码就是: 复制代码 代码如下: onchange="show(this.options[this.options.selectedIndex].value);" onchange="show(this.options[this.options.selectedIndex].value);" show是一个自定义的函数名.

    • javascript对下拉列表框(select)的操作实例讲解

      这篇文章,主要是关于javascript和select相关的最基本方法,以供不熟悉javascript的人参考.常见的情况是,提出表单结构的人, 不仅仅需要为程序设计逻辑,创建数据结构,还需要设计表单的样式,以及熟悉javascript:某些公司可能会要求您精通photoshop:最初的时候,我们都是全才. 下面是我们例子的基础:这不是一个标准的表单. <form id="f"> <select size="1" name="s"

    • javascript select列表内容按字母倒序排序与按列表倒序排列

      今天51js上有网友贴出了这个问题,原本以为是把内容按字母顺序倒序排列,因为以前看过一篇正序排列的文章,偶就想倒序也应该不难,查看了下资料便很快搞定了问题. 无忧脚本代码测试网页 b e c f a function st(a,b){ if(a>b) return -1; else if(a0){ t1[t1.length]=tt[0].text; t2[t2.length]=tt[0].value; tt.remove(0); } t1.sort(st); for(var i=0,c1,c2;

    • Javascript 生成无限下拉列表实现代码

      复制代码 代码如下: //公司二维数组数据源 Office = [ ["Dept", "ParentDept"], ["业务部", "0"], ["技术部", "0"], ["市场部", "0"], ["www.yongfa365.com", "业务部"], ["业务部小杨", "

    • javascript 新闻列表排序简单封装

      代码写的比较繁琐,很多方法用的很原始... 代码如下: */ --> 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).getElementsByTagN

    • Vue实现搜索 和新闻列表功能简单范例

      Vue实现搜索 和新闻列表功能简单范例

      效果图如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style&

    • javascript 表格内容排序 简单操作示例代码

      复制代码 代码如下: <div id="html"></div> <script> var listInfos = new Array(); listInfos[0] = new Array(); listInfos[0][0] = {'name':'推荐页1','DayCount':666,'AvgTime':29872,'ErrCount':180663,'ErrorRate':'2873%','DaySystemErrorCount':0,'D

    • 利用jQuery对无序列表排序的简单方法

      利用jQuery对无序列表排序的简单方法

      利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出.其中使用到的jQuery函数有ready().get().text().each().append()和JavaScript函数sort(). 1．jQuery函数介绍 (1)jQuery函数get()--获取匹配元素集合 该函数取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,实际上是元素数组).其语法形式如下: object.get() 注:如

    • JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）

      JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）

      http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识.因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1.DOM的架构 复制代码 代码如下: <html> <head> <title>document</title> </head> <body> <h1>CSS Demo<

    • 模拟javascript中的sort排序(简单实例)

      一.javascript中sort对数据进行排序的原理 sort() 方法对数组的元素做原地的排序,并返回这个数组. sort 可能不是稳定的.默认按照字符串的Unicode码位点排序; 语法:arr.sort([compareFunction]) 参数 compareFunction 可选.用来指定按某种顺序进行排列的函数.如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序. 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前: 如

    • JavaScript对JSON数组简单排序操作示例

      JavaScript对JSON数组简单排序操作示例

      本文实例讲述了JavaScript对JSON数组简单排序操作.分享给大家供大家参考,具体如下: 我们经常回使用到数据格式 var arr=[{num:1},{num:3},{num:2}] 如何根据数组里面的JSON数据的某个key进行排序 javascript有一个sort()方法,直接通过 arr.sort()进行排序,默认只对数组的值进行排序,然而以上的数组的值却是个JSON格式的. 我们在看看sort方法的定义: 定义和用法 sort() 方法用于对数组的元素进行排序. 语法 array

    • javascript手机验证、邮箱验证、密码验证的正则表达式简单封装实例

      javascript[手机验证].[邮箱验证].[密码验证]的正则表达式的封装: [手机验证]: 以下代码是验证手机号码的正则表达式的方法, [checkPhone]:表示的是方法的名称: [phoneId]:表示方法的参数,这里为获取手机号码的html元素的id,一般为input元素的id: [$(phoneId).val()]:JQ通过id获取input的值: [手机匹配的正则表达式]: /^1[2|3|4|5|6|7|8|9|]\d{9}$/ /*手机验证*/ function check

    • Bootstrap树形组件jqTree的简单封装

      Bootstrap树形组件jqTree的简单封装

      一.组件效果预览 其实效果和之前的那个差不多,博主只是在之前的基础上加了一个选中的背景色. 全部收起 展开 全部展开 二.代码示例 其实效果很简单,重点来看看代码是如何实现封装的.还是老规矩,将已经实现的代码贴出来,然后再来一步一步讲解. (function ($) { //使用js的严格模式 'use strict'; $.fn.jqtree = function (options) { //合并默认参数和用户传过来的参数 options = $.extend({}, $.fn.jqtree.

    • asp.net新闻列表生成静态页之批量和单页生成

      asp.net新闻列表生成静态页之批量和单页生成

      大家都知道,生成静态页的方法有两种,第一种是使用C#在后台硬编码,第二种是读取模板文件,使用字符串代替.总体来讲第一种方法代码量比较大,维护起来有点困难.生成静态页的目的是为了提高用户体验度,加快访问速度. 使用静态页面还有如下好处: 1. 安全:使用静态页面,用户访问的使没有任何操作功能的html页面,可以说从安全性方面大大提高了程序及服务器的安全. 2. 快速:用户访问的是提前生成好的静态页面,使用户对页面的请求瓶颈只受IO的限制而不会有其他方面的影响. 3. 降低服务器,数据库负载:因为用

    随机推荐