JS/jQuery實現默認顯示部分文字點擊按鈕顯示全部內容

2019-11-20 22:43:15

字體：大中小

來源：轉載

供稿：網友

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>JS實現默認顯示部分文字，點擊按鈕顯示全部</title> 
</head> 
<body> 
<div id="box"> 
<h2>民間機構提前3天預報大理地震 地震局稱違法</h2> 
<p>17日大理州5.0級地震發生之后，在微博上一條曾在3天前就預測大理將發生5.0級地震的微博受到了很多網友的關注。</p> 
<p>記者聯系上了微博博主，該博主表示，他是通過分析云南省地震局官方網站的數據得出的預報信息。對此，省地震局回應表示，地震局歡迎民間機構與地震局進行一些學術上的探討和交流，但民間機構對外公開發布地震預報信息是違法的。</p> 
<p><strong>民間機構預報地震受網友追捧</strong></p> 
<p>“預計72小時內黑色圈圈內的地區都將有一次較強震感，初步鎖定為5級地震，淺源，發生的位置主要是云南東北昭通（余震）、大理西南部和騰沖交界區域、和緬甸交界區域一線（地殼運動所致）云南巧家縣和四川寧南縣交界區域。”早在4月14日凌晨時分，微博名為“預報中心”的網民就在微博上發布了云南地震預報信息。該微博被網友轉發了377次。在大理5.0級地震發生后，“小叢”等知名網友都轉發了該微博。“跪了。”知名網友“小叢”在微博上表示。</p> 
<p>在大理5.0級地震發生之前，“預報中心”還陸續發布了3條地震預報的微博，并附有預報將發生地震的地圖，及一張昆明地震監測點的原始數據圖。</p> 
<p>這一微博得到了一些網友的轉發及稱贊。“頂，預報高手在民間，持續關注中。”網民“orfila2011”在評論中表示；“陜西藍天救援隊”官方微博也表示，民間在地震預測工作中有價值的經驗方法，有關部門應給予足夠的重視。</p> 
<p><strong>預報根據省地震局數據分析得出</strong></p> 
<p>該民間地震預報微博的資料顯示，所在地位于湖北。“很久以前，該微博就已經在微博上播報地震預測信息，但一直很神秘。”有網友表示。昨日，記者通過微博聯系上這一神秘民間地震預報機構。</p> 
<p>該民間機構是怎樣獲得地震預報信息的？該微博博主向記者表示，他們是根據云南省地震局官網云南地震數據共享中心查詢到了云南省內的一些地震監測數據，分析得出的預報信息。記者發現，確實可以通過該網站查到云南各地震監測點的預處理數據。</p> 
<p>>該微博博主還透露，分析這些相關數據需要很多專業知識，但并不需要儀器。對于民間機構預報地震的動力，該博主表示“物質和精神都有”。對于其他信息，該博主不愿意更多透露。</p> 
<p><strong>省地震局：民間僅限于學術交流</strong></p> 
<p>“地震預測預報必須遵守相應的法律法規。”省地震局科學技術處處長、新聞發言人張俊偉在接受記者采訪時表示，根據我國法律，任何個人或民間機構對外發布地震預報信息都是違法行為。</p> 
<p>國家《地震預報管理條例》規定，省、自治區、直轄市的地震長期預報、地震中期預報、地震短期預報和臨震預報，由省、自治區、直轄市人民政府發布。</p> 
<p>對于這些民間的地震預報機構，張俊偉表示，云南省地震局一直都有所關注和了解。除了本次發布預報信息的“預報中心”外，這樣的民間地震預報機構及人士還有很多。對于有網友提出能否加強官與民的合作交流。張俊偉表示，目前他個人并沒有與這些民間機構取得過聯系，但地震局對這些民間機構一直抱著包容與開放的態度，歡迎其與地震局進行學術探討和交流。</p> 
<p>“但另一方面，對外公開發布地震預報信息始終是違法的。我們對這些公開發布地震預報信息的民間機構也很頭痛，擔心給社會帶來不良的影響。”張俊偉認為，市民、網友不應采信民間機構發布的地震預報消息。</p> 
</div> 
<script> 
function show(){ 
var box = document.getElementById("box"); 
var text = box.innerHTML; 
var newBox = document.createElement("div"); 
var btn = document.createElement("a"); 
newBox.innerHTML = text.substring(0,200); 
btn.innerHTML = text.length > 200 ? "...顯示全部" : ""; 
btn.href = "###"; 
btn.onclick = function(){ 
if (btn.innerHTML == "...顯示全部"){ 
btn.innerHTML = "收起"; 
newBox.innerHTML = text; 
}else{ 
btn.innerHTML = "...顯示全部"; 
newBox.innerHTML = text.substring(0,200); 
} 
} 
box.innerHTML = ""; 
box.appendChild(newBox); 
box.appendChild(btn); 
} 
show(); 
</script> 
</body> 
</html> 

jQuery插件：jquery.limittext.js

復制代碼代碼如下:

 
/** 
* demo: 
* 1.$("#limittext").limittext(); 
* 2.$("#limittext").limittext({"limit":1}); 
* 3.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}}); 
* 4.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true,"moretext":"更多","lesstext":"隱藏部分","fullfn":function(){alert("more")},"lessfn":function(){alert("less")}}}) 
* 5.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}}).limit("all"); 
* @param {Object} opt 
* { 
* limit:30,//顯示文字個數 
* fill:'...'//隱藏時候填充的文字 
* morefn:{ 
* status:false,//是否啟用更多 
* moretext: "(more)",//隱藏部分文字時候顯示的文字 
* lesstext:"(less)",//全部文字時候顯示的文字 
* cssclass:"limittextclass",//啟用更多的A標簽的CSS類名 
* lessfn:function(){},//當文字為更少顯示時候回調函數 
* fullfn:function(){}//當文字為更多時候回調函數 
* } 
* @author Lonely 
* @link http://www.liushan.net 
* @Download:http://down.liehuo.net 
* @version 0.2 
*/ 
jQuery.fn.extend({ 
limittext:function(opt){ 
opt=$.extend({ 
"limit":30, 
"fill":"..." 
},opt); 
opt.morefn=$.extend({ 
"status": false, 
"moretext": "(more)", 
"lesstext":"(less)", 
"cssclass": "limittextclass", 
"lessfn": function(){ 
}, 
"fullfn": function(){ 
} 
},opt.morefn); 
var othis=this; 
var $this=$(othis); 
var body=$this.data('body'); 
if(body==null){ 
body=$this.html(); 
$this.data('body',body); 
} 
var getbuttom=function(showtext){ 
return "<a href='javascript:;' class='" 
+opt.morefn.cssclass+"'>" 
+showtext 
+"<a>"; 
} 
this.limit=function(limit){ 
if(body.length<=limit||limit=='all'){ 
var showbody=body+(opt.morefn.status?getbuttom(opt.morefn.lesstext):""); 
}else{ 
if(!opt.morefn.status){ 
var showbody=body.substring(0,limit) 
+opt.fill; 
}else{ 
var showbody=body.substring(0,limit) 
+opt.fill 
+getbuttom(opt.morefn.moretext); 
} 
} 
$this.html(showbody); 
} 
this.limit(opt.limit); 
$("."+opt.morefn.cssclass).live("click",function(){ 
if($(this).html()==opt.morefn.moretext){ 
showbody=body 
+getbuttom(opt.morefn.lesstext); 
$this.html(showbody); 
opt.morefn.fullfn(); 
}else{ 
othis.limit(opt.limit); 
opt.morefn.lessfn(); 
} 
}); 
return this; 
} 
}); 