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 拖动层(在可视区域范围内)
May 24 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
require.js中的define函数详解
Jul 10 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
vue实现简单图片上传
Jun 30 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
利用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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
python 实现图片裁剪小工具
2021/02/02 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
初中生三年学习生活的自我评价
2013/11/03 职场文书
班级心理活动总结
2014/07/04 职场文书
企业消防安全责任书
2014/07/23 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
房产公证委托书范本
2014/09/20 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
放牛班的春天观后感
2015/06/01 职场文书
辛亥革命观后感
2015/06/02 职场文书
高中历史教学反思
2016/02/19 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript