JS实现默认显示部分文字点击按钮显示全部内容

矫情吗；* 2022-08-25 08:08 188阅读 0赞

<!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>