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 相关文章推荐
jQuery 渐变下拉菜单
Dec 15 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
web前端开发也需要日志
Dec 09 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
jquery等待效果示例
May 01 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
vue微信分享插件使用方法详解
Feb 18 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/10/03 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
php创建图像具体步骤
2017/03/13 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
js 走马灯简单实例
2013/11/21 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
python操作CouchDB的方法
2014/10/08 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
python pandas库的安装和创建
2019/01/10 Python
python批量图片处理简单示例
2019/08/06 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
面试必备的求职信
2014/05/25 职场文书
捐款感谢信
2015/01/20 职场文书
实习单位鉴定意见
2015/06/04 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python
golang定时器
2022/04/14 Golang