杰晶网络

JavaScript截取指定长度字符串点击可以展开全部代码
网络编程 2024/5/19 佚名
3 2

文章的篇幅往往不是那么恰到好处，如果以原有的篇幅展示，那么有可能会影响网页的布局或者美观度，这个时候就要根据情况适量截取一定的字符串，以适应布局，不过当点击一个按钮的时候依然可以展开全部的内容，下面就通过一个实例详细介绍一下如何实现此效果,代码示例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>字符串截取展开效果</title>
<style type="text/css">
#thediv{
 width:200px;
 margin:0px auto;
}
</style>
<script type="text/javascript"> 
function cutStr(){ 
 var odiv=document.getElementById("thediv"); 
 var str=odiv.innerHTML; 
 var ospan=document.createElement("span"); 
 var olink=document.createElement("a"); 
 ospan.innerHTML=str.substring(0,20); 
 olink.innerHTML=str.length>20"...":""; 
 olink.href="###"; 
 olink.onclick=function(){ 
  if(olink.innerHTML=="..."){ 
   olink.innerHTML="收起"; 
   ospan.innerHTML=str; 
  }
  else{ 
   olink.innerHTML="..."; 
   ospan.innerHTML=str.substring(0,20); 
  } 
 } 
 odiv.innerHTML=""; 
 odiv.appendChild(ospan); 
 odiv.appendChild(olink); 
}; 
window.onload=function(){
 cutStr();
}
</script> 
<body>
<div id="thediv">欢迎您，个人的力量再强也只是一只强壮的而已，如果有分享和胸怀和合作的精神，那么就有可能活得巨大进步。</div> 
</body>
</html>


以上代码实现了我们的要求，截取指定的字符串，后面以"..."结尾，当点击这个结尾的时候，能够展开所有的文字内容，下面就介绍一下此效果的实现过程。

一.实现原理:

创建一个span元素和a元素，然后使用substring()函数截取指定的字符串并将其设置为span元素的内容，然后判断原来字符串的长度是否大于指定长度，如果大于，则将a元素中的内容设置为"..."。然后将原有div清空，然后span元素和a元素添加到div中去，这样就实现了截取功能。为a元素注册时间处理函数，点击此按钮就会执行事件处理函数，此函数首先判断是出于何种状态，如果处于收起状态，那么就会将a元素中的内容设置为"收起"，并且将原有所有字符放入span，这样就实现了展开，如果出于展开状态，那么就是截取字符和修改a元素中的内容。原理大体如此，可以参阅相关阅读。

以上内容是本文给大家介绍的JavaScript截取指定长度字符串点击可以展开全部代码 ，希望大家喜欢。

标签：
截取指定长度字符串,js截取指定字符串
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接