JS實現預設顯示部分文字點選按鈕顯示全部內容
阿新 • • 發佈：2019-01-21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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>
</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>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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>
</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>