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 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
JS 判断代码全收集
Apr 28 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
JavaScript Promise启示录
Aug 12 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 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中截取字符串支持utf-8
2007/01/18 PHP
PHP 数组基础知识小结
2010/08/20 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
史上最牛的辞职信
2015/02/28 职场文书
督导岗位职责范本
2015/04/10 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript