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来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JavaScript中AOP的实现与应用
May 06 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
利用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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
python实现感知器算法(批处理)
2019/01/18 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
python如何修改文件时间属性
2021/02/05 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
会计找工作求职信范文
2013/12/09 职场文书
数学检讨书1000字
2014/02/24 职场文书
听课评语大全
2014/04/30 职场文书
公司承诺书怎么写
2014/05/24 职场文书
竞选学委演讲稿
2014/09/13 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
检讨书1000字
2014/10/11 职场文书
工作感言一句话
2015/08/01 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
golang 语言中错误处理机制
2021/08/30 Golang
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫