当前位置: 首页 > 编程笔记 >

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

苏野
2023-03-14
本文向大家介绍JavaScript截取指定长度字符串点击可以展开全部代码,包括了JavaScript截取指定长度字符串点击可以展开全部代码的使用技巧和注意事项,需要的朋友参考一下

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

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

 类似资料:
  • 本文向大家介绍jQuery截取指定长度字符串的实现原理及代码,包括了jQuery截取指定长度字符串的实现原理及代码的使用技巧和注意事项,需要的朋友参考一下 截取指定长度字符串操作在网站建设中大量使用,尤其是在新闻列表这种类型的操作中大量应用。 下面就是一个截取字符串代码实例: 以上代码实现了截取字符串的功能,下面简单介绍一下它如何实现此效果的: 一.实现原理: 获取div中文本的长度,然后和通过和

  • 本文向大家介绍JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码,包括了JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码的使用技巧和注意事项,需要的朋友参考一下 有时候我们的日期等不足两位的补一个0等,都可以使用这个。 这个大家应该都很明白了,就不废话了,代码如下: 测试代码: 更多代码

  • 本文向大家介绍Oracle截取字符串去掉字段末尾指定长度的字符,包括了Oracle截取字符串去掉字段末尾指定长度的字符的使用技巧和注意事项,需要的朋友参考一下 lengthb(string)计算string所占的字节长度:返回字符串的长度,单位是字节 length(string)计算string所占的字符长度:返回字符串的长度,单位是字符 eg: 【备注】一个汉字在Oracle数据库里占多少字节跟

  • 本文向大家介绍JavaScript 截取字符串代码实例,包括了JavaScript 截取字符串代码实例的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了JavaScript 截取字符串代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍在JavaScript中生成指定长度的随机字符串,包括了在JavaScript中生成指定长度的随机字符串的使用技巧和注意事项,需要的朋友参考一下 我们需要编写一个JavaScript函数,该函数接受数字n,并返回长度为n的随机字符串,其中不包含26个英文小写字母。 因此,让我们为该函数编写代码- 示例 为此的代码将是- 输出结果 控制台中的输出将为- 注意-这是许多可能的输出之一。控

  • 我有以下结构: 我试图用len(event.Identificator)获得标识符的长度,但是我得到了len的无效参数 在给伦打电话之前,我先检查一下是不是零。我来自Java/C#/PHP背景,这是我第一次用GO写东西。