JavaScript截取指定长度字符串点击可以展开全部代码


Posted in Javascript onDecember 04, 2015

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

<!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截取指定长度字符串点击可以展开全部代码 ,希望大家喜欢。

Javascript 相关文章推荐
jQuery遍历Form示例代码
Sep 03 Javascript
js读写json文件实例代码
Oct 21 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 #Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 #Javascript
给before和after伪元素设置js效果的方法
Dec 04 #Javascript
全面解析Bootstrap手风琴效果
Apr 17 #Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 #Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 #Javascript
浅析2种JavaScript继承方式
Dec 04 #Javascript
You might like
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
jQuery JSON的解析方式分享
2011/04/05 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
js的2种继承方式详解
2014/03/04 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
总结Python编程中三条常用的技巧
2015/05/11 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
网站编辑求职信
2013/10/17 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
业务部经理岗位职责
2014/01/04 职场文书
优秀党员获奖感言
2014/02/18 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
单位授权委托书范本
2014/09/26 职场文书
三方股份合作协议书
2014/10/13 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
建国大业电影观后感
2015/06/01 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Java后台生成图片的完整步骤
2021/08/04 Java/Android