JavaScript段落展开收起效果

快乐打工仔 分类:实例代码

JavaScript段落展开收起效果属于前端实例代码,有关更多实例代码大家可以查看

本章节分享一段代码实例,它实现了段落的展开和收起的效果。

通常用于解决大段落文本占用空间过多。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#box {
  width: 280px;
  border: #999 1px solid;
  padding: 10px;
}
p {
  line-height: 24px;
}
a {
  color: #096;
  cursor: pointer;
}
</style>
<script>
window.onload = function () {
  textShow(box, 30)
}
function textShow(obj, num) {
  var oSpan = obj.getElementsByTagName("span")[0];
  var oA = obj.getElementsByTagName("a")[0];
  var str = oSpan.innerHTML;
  var onOff = true;
 
  oSpan.innerHTML = str.substring(0, num);
  oA.onclick = function () {
    if (onOff) {
      oSpan.innerHTML = str;
      oA.innerHTML = "收起";
    } else {
      oSpan.innerHTML = str.substring(0, num);
      oA.innerHTML = "...展开";
    }
    onOff = !onOff;
  }
}
</script>
</head>
<body>
<div id="box">
  <p>
    <span>犀牛前端部落欢迎您,本站的url地址是www.pipipi.net,随时提供有益的建议和意见</span>
    <a>展开..</a>
  </p>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。

(2).textShow(box, 30),此函数的功能在下面会介绍。

(3).function textShow(obj, num) {},此函数实现了展开收起功能,第一个参数是是元素对象,这里是div元素的id属性值,id属性值可以直接作为对象使用,第二个参数规定显示的字符数量,超出的用省略号替代。

(4).var oSpan = obj.getElementsByTagName("span")[0],获取span元素集合中的第一个span元素对象。

(5).var oA = obj.getElementsByTagName("a")[0],获取链接a元素集合中的第一个a元素对象。

(6).var str = oSpan.innerHTML,将span元素中html内容赋值给变量str,暂时存储起来。

(7).var onOff = true,声明一个变量并赋值为true,作为一个标识。

(8). oSpan.innerHTML = str.substring(0, num),将截取指定长度的html内容写入span元素中。

(9). oA.onclick = function () {},为链接a元素注册onclick事件处理函数。

(10).if (onOff) {

  oSpan.innerHTML = str;

  oA.innerHTML = "收起";

},如果onOff等于true。

那么就将oA的html内容设置为str。

同时链接a元素的html内容设置为"收起"。

(11).else {  oSpan.innerHTML = str.substring(0, num);

  oA.innerHTML = "展开...";

},否则的话,span元素的内容设置为截取后的html字符串。

并且将链接a的html设置为"展开..."。

(12).onOff = !onOff,取反。

二.相关阅读:

(1).getElementsByTagName()参阅document.getElementsByTagName()一章节。

(2).innerHTML参阅innerHTML一章节。

(3).substring()参阅javascript substring()一章节。

JavaScript段落展开收起效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript段落展开收起效果就介绍到这了。

回复

我来回复
  • 暂无回复内容