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 相关文章推荐
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 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
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
PHP中each与list用法分析
2016/01/08 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
PHP会话控制实例分析
2016/12/24 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
js保存当前路径(cookies记录)
2010/12/14 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
Python partial函数原理及用法解析
2019/12/11 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
通俗讲解python 装饰器
2020/09/07 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
怎样自定义一个异常类
2016/09/27 面试题
安全责任书范文
2014/03/12 职场文书
户外宣传策划方案
2014/05/25 职场文书
主题团日活动总结
2014/06/25 职场文书
旷课检讨书
2015/01/26 职场文书
与死神共舞观后感
2015/06/15 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
Python实现自动玩连连看的脚本分享
2022/04/04 Python