<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
ul, li, em {margin:0; padding:0; list-style:none;}
#ul1 li {width:750px; overflow:hidden; line-height:20px; margin:10px;}
#ul1 li em {font-style:normal; width:100px; float:left; text-align:center;}
#ul1 li a {width:500px; overflow:hidden; float:left; color:#900; text-decoration:none; font-weight:bold; font-size:20px;}
.list {overflow:hidden;}
.list li {float:left; margin:4px; padding:4px; border:1px solid #999; cursor:pointer;}
.list li.active {background:#F90; border:1px solid black;}
</style>
<script>
window.onload=function ()
{
var oTxt1=document.getElementById(‘txt1‘);
var oSel1=document.getElementById(‘sel1‘);
var oUl=document.getElementById(‘ul1‘);
var oUl2=document.getElementById(‘ul2‘);
var oBtn=document.getElementById(‘btn1‘);
var selected=0;
//全部类别-计数
try
{
var arr=eval(‘(‘+oTxt1.value+‘)‘);
}
catch(e)
{
alert(‘数据有误‘);
return; //后面的函数不执行
}
//try catch 后面的函数继续执行
var json={};
for(var i=0;i<arr.length;i++)
{
if(json[arr[i].type])
{
json[arr[i].type].count++;
}
else
{
json[arr[i].type]={count: 1, selected: false};
}
}
//生成列表
var oLiAll=document.createElement(‘li‘);
oLiAll.innerHTML=‘全部(‘+arr.length+‘)‘;
oUl2.appendChild(oLiAll);
oLiAll.className=‘active‘;
for(var i in json)
{
var oLi=document.createElement(‘li‘);
oLi.innerHTML=i+‘(‘+json[i].count+‘)‘;
oUl2.appendChild(oLi);
(function (index){
oLi.onclick=function ()
{
if(this.className)
{
this.className=‘‘;
json[index].selected=false;
selected--;
}
else
{
this.className=‘active‘;
json[index].selected=true;
selected++;
}
if(selected)
{
oLiAll.className=‘‘;
}
else
{
oLiAll.className=‘active‘;
}
//生成
setData();
};
})(i);
}
function setData()
{
var arr2=[];
for(var i=0;i<arr.length;i++)
{
if(json[arr[i].type].selected || selected==0)
{
arr2.push(arr[i]);
}
}
oUl.innerHTML=‘‘;
if(arr2.length)
{
for(var i=0;i<arr2.length;i++)
{
var oLi=document.createElement(‘li‘);
oLi.innerHTML=‘<a href="‘+arr2[i].href+‘" target="_blank">‘+arr2[i].title+‘</a>‘;
oUl.appendChild(oLi);
}
}
else
{
alert(‘没有合适的数据‘);
}
}
setData();
};
</script>
</head>
<body>
输入原始文本(json格式)：<br>
<textarea style="width:500px; height:200px;" id="txt1">
[
{title: ‘出现跑路，北京全面排查P2P风险‘, type: ‘互联网‘, href: ‘http://tech.163.com/14/0610/08/9UC5IJQE000915BF.html‘},
{title: ‘北京傍晚到夜间有雷阵雨 明天白天多云转晴‘, type: ‘国内‘, href: ‘http://news.hexun.com/2014-06-10/165566949.html‘},
{title: ‘“10亿美元俱乐部”的宠儿有哪些？‘, type: ‘互联网‘, href: ‘http://www.pingwest.com/2014-startups-with-billion-dollar-valuations/‘},
{title: ‘恒大官方宣布于汉超李学鹏加盟 制海报欢迎(图)‘, type: ‘体育‘, href: ‘http://sports.sina.com.cn/j/2014-06-10/19177202125.shtml‘},
{title: ‘外交部称美国是“黑客帝国”：地球人都知道‘, type: ‘互联网‘, href: ‘http://politics.caijing.com.cn/2014-06-10/114251776.html‘},
{title: ‘乌克兰卢甘斯克机场被关闭‘, type: ‘军事‘, href: ‘http://stock.sohu.com/20140610/n400627314.shtml‘}
]
</textarea><br>
<br>
类别：
<ul class="list" id="ul2">
</ul>
<br>
这里输出结果：<br>
<ul id="ul1">
</ul>
</body>
</html>
时间： 2024-11-07 10:54:07