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 模式对话框终极版实现代码
Sep 28 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 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桌面中心(三) 修改数据库
2007/03/11 PHP
php文档更新介绍
2011/07/22 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python龙贝格法求积分实例
2020/02/29 Python
Pycharm中如何关掉python console
2020/10/27 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
初中美术教学反思
2014/01/29 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
村庄绿化方案
2014/05/07 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
师德承诺书
2015/01/20 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
区域销售大会开幕词
2016/03/04 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL