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实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
jquery处理json对象
Nov 03 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
Sea.JS知识总结
May 05 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 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模板,主要想体现一下思路
2006/12/25 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
javascript知识点收藏
2007/02/22 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
简单介绍Python中的floor()方法
2015/05/15 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
django框架如何集成celery进行开发
2017/05/24 Python
python在文本开头插入一行的实例
2018/05/02 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python求质数的3种方法
2018/09/28 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
超级实用的8个Python列表技巧
2020/08/24 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
应届生的求职推荐信范文
2013/11/30 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
教师学期个人总结
2015/02/11 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL