星空网 > 软件开发 > Java

截取指定长度文章点击可以展开全部代码

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

 

<!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元素中的内容。原理大体如此,可以参阅相关阅读。
二.相关阅读:
1.createElement()函数可以参阅js的createElement()和appendChild()函数的作用一章节。
2.substring()函数可以参阅javascript的String对象的substring()方法一章节。
3.olink.href="###"可以参阅javascript:void(0)用法简单介绍一章节。 
4.onclick事件可以参阅javascript的onclick事件一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9206

更多内容可以参阅http://www.softwhy.com/jsshili/

 




原标题:截取指定长度文章点击可以展开全部代码

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

华为版ChatGPT要来了?:https://www.kjdsnews.com/a/1559807.html
如何用好亚马逊库容管理工具拥有更多库容?:https://www.kjdsnews.com/a/1559808.html
跨境选品怎么选?建议独立站卖家收下这份利基产品查找攻略!:https://www.kjdsnews.com/a/1559809.html
采访近10000名消费者后……《东南亚电商白皮书》来了!:https://www.kjdsnews.com/a/1559810.html
金融风险产品类型及流程:https://www.kjdsnews.com/a/1559811.html
宁波卫浴品牌在阿里国际站出海:独创长条形地漏让老外溢价也要疯抢:https://www.kjdsnews.com/a/1559812.html
珠海长隆横琴剧院具体地址:https://www.vstour.cn/a/334167.html
珠海长隆横琴剧院演出时间:https://www.vstour.cn/a/334168.html
相关文章
我的浏览记录
最新相关资讯
跨境电商服务平台 | 深圳旅行社 | 东南亚物流