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 获取图片颜色
Apr 05 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 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
织梦模板标记简介
2007/03/11 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
13个PHP函数超实用
2015/10/21 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
python生成器generator用法实例分析
2015/06/04 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
对python调用RPC接口的实例详解
2019/01/03 Python
python树莓派红外反射传感器
2019/01/21 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python生成器用法实例详解
2019/11/22 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
大学教师年终总结的自我评价
2013/10/29 职场文书
小学教师的自我评价范例
2013/10/31 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
入党函调证明材料
2014/12/24 职场文书
在Django中使用MQTT的方法
2021/05/10 Python