javascript使用substring实现的展开与收缩文字功能示例


Posted in Javascript onJune 17, 2019

本文实例讲述了javascript使用substring实现的展开与收缩文字功能。分享给大家供大家参考,具体如下:

效果如图:

javascript使用substring实现的展开与收缩文字功能示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 展开和收缩</title>
  <style>
    p {
      margin: 0 auto;
      width: 500px;
      padding: 20px;
      border: 5px solid #888;
      background-color: #ffcc33;
    }
  </style>
</head>
<script>
  window.onload = function() {
    var oP = document.getElementsByTagName("p")[0]
    var oSpan = oP.getElementsByTagName("span")[0];
    var oA = oP.getElementsByTagName("a")[0];
    var str = oSpan.innerHTML;
    var onOff=true;
    oA.onclick = function() {
      if(onOff) {
        oSpan.innerHTML = str.substring(0, 22);
        oA.innerHTML = "<< 展开"
      } else {
        oSpan.innerHTML = str.substring(0);
        oA.innerHTML = "<< 收缩"
      }
      onOff=!onOff;
    }
  }
</script>
<body>
<p>
<span>2017年5月到6月,科学家们沿着澳大利亚海岸线向珊瑚海行进,他们从4000米深的海底收集到1000多种海洋生物,其中300多种是新物种。照片里的红色科芬鱼(coffinfish)长着蓝色眼睛,头上有个蓬松柔软的“钓竿”,这个钓竿能勾引猎物上钩。这是一种甲壳食肉动物,在深海中它是“拾荒者”,任何能提供营养的东西它们都能吃,包括腐烂的鲸鱼尸体。'这是发光的海蛇尾,它们用微弱的荧光警告那些捕食者,不要把它们当作食物。</span>...<a href="javascript:;" rel="external nofollow" ><< 收缩</a>
</p>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js如何获取兄弟、父类等节点
Jan 06 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 #Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 #Javascript
最简单的vue消息提示全局组件的方法
Jun 16 #Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 #Javascript
详解vue微信网页授权最终解决方案
Jun 16 #Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 #Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 #Javascript
You might like
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
bootstrap响应式表格实例详解
2017/05/15 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
js实现点赞效果
2020/03/16 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
python文件的md5加密方法
2016/04/06 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
python实现人脸签到系统
2020/04/13 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
行政主管职责范本
2014/03/07 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
党员证明信
2015/06/19 职场文书
高三教师工作总结2015
2015/07/21 职场文书
投资入股协议书
2016/03/22 职场文书