<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

p {

    border:10px solid #ccc;

    background:#FFC;

    width:400px;

    padding:20px;

    font-size:16px;

    font-family:微软雅黑;

    margin:40px auto 0;

}

</style>

<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, 18);

            oA.innerHTML = '>>展开';

        } else {

            oSpan.innerHTML = str;

            oA.innerHTML = '>>收缩';

        }

        onOff = !onOff;

    };

};

</script>

</head>

<body>

<p><span>妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！<br />

  2013年底，妙味课堂最新推出“远程培训”服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升</span>……<a href="javascript:;">>>收缩</a></p>

</body>

</html>

段落的展开收起(substring的应用)的更多相关文章

  1. 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起

    Dom与Event简洁代码实现文本展开收起 Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C/ ...

  2. HTML-003-模拟IDE代码展开收起功能简单示例

    当先我们在日常的编程开发工作中使用编程工具(例如 Eclipse.Sublime 等等)都有相应的代码折叠展开功能,如下图所示,极大的方便了我们的编码工作.

  3. JS点击查看更多内容 控制段落文字展开折叠

    JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...

  4. css实现侧边展开收起

    前言:因为突然想研究研究侧边栏滑动展开收起怎么做的,就去baidu了一下transition. 详情 内容1 内容1 内容1 内容1 内容1 右侧有实现demo.就是那个绿色的详情 先来看一下我的代码 ...

  5. [TimLinux] CSS 纯CSS实现动画展开/收起功能

    内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...

  6. Vue 实现点击展开收起

    Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...

  7. javasript简单实现文字的展开收起（无动画）

    今天在工作遇到展开和收起的需求,在网上找了很多方法,今天来写一下我觉得比较简单的方法 在项目中需要达到如图这种效果 首先想的是使用overflow简单且粗暴,在需要展开的的文字定义样式 { overf ...

  8. vue.js 实现点击展开收起动画

    最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...

  9. el-upload上传列表实现 展开 收起

    # el-upload上传列表实现 展开 收起 #### 无图言*,所以先上最终效果图(想参考代码的可以直接滑到最后) ### 具体实现思路 注意: 每个人的项目环境以及需求,都不尽相同,所以这里仅仅 ...

随机推荐

  1. bzoj1691[Usaco2007 Dec]挑剔的美食家 平衡树treap

    Description 与很多奶牛一样,Farmer John那群养尊处优的奶牛们对食物越来越挑剔,随便拿堆草就能打发她们午饭的日子自然是一去不返了.现在,Farmer John不得不去牧草专供商那里 ...

  2. 虚拟机下玩DXF

    DXF检测虚拟机好象已经很长时间了,记得当时也是在网上找的教程,今天无聊又检测了一下,发现目前依然有效.用记事本打开 虚拟机启动文件 xxxx.vmx 在最后添加如下两行代码monitor_contr ...

  3. vs2015 MFC工程添加消息响应函数

    真不知道这PPT怎么描述的..最后窝找到了解决方法如上图.. 下次找MSDN解决问题好了..而且我们并不知道他所说的这个IDE到底是哪个厂商哪个版本的IDE这就很困惑 不过呢..它主要是让我们添加消息 ...

  4. 【hibernate criteria】hibernate中criteria的完整用法 转

    ---恢复内容开始--- 转自:http://www.360doc.com/content/090313/10/26262_2794855.html 1.Criteria Hibernate 设计了 ...

  5. 新的开始—js客户端onlick无法响应

    第一次写博客,也是为了以后遇到同样的问题时可以找到,onlick无法响应在百度一些都有解释,这只是一个个人记录而已 问题: function change_tp(ProInfo_id, color_i ...

  6. cf429B dp递推

    Description Summer is coming! It's time for Iahub and Iahubina to work out, as they both want to loo ...

  7. Codeforces Round #355 (Div. 2)-C

    C. Vanya and Label 题目链接:http://codeforces.com/contest/677/problem/C While walking down the street Va ...

  8. express－5 质量保证(2)

    跨页测试 跨页测试更有挑战性,因为需要你控制和观测浏览器. 现在设置一个跨页测试情境的例子.比如,你的网站上有一个包含联系表单的Request Group Rate页面.营销部门想知道客户是从哪个页面 ...

  9. Visual Studio: whether auto-building when press the debug button

    Tools -> Options -> Projects and Solutions->Build and Run -> choose an option for On Run ...

  10. iOS开发代码规范(通用)

    1. 关于命名 1> 统一要求 含义清楚,尽量做到不需要注释也能了解其作用,若做不到,就加注释 使用全称,不适用缩写 2> 类的命名 大驼峰式命名:每个单词的首字母都采用大写字母 例子:M ...