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中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
js select option对象小结
Dec 20 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
基于vue配置axios的方法步骤
2017/11/09 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
parser.add_argument中的action使用
2020/04/20 Python
在keras里实现自定义上采样层
2020/06/28 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
优秀应届毕业生自荐信
2013/11/16 职场文书
教师职称自我鉴定
2014/02/12 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle