<!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. ios二维码扫描

    1.添加AVFoundation.framework框架 2,控制器中实现 //第一步添加AVFoundation.framework框架 #import "ViewController.h ...

  2. document.body / document.ducumentElement /等获取高度和宽度的区别 ----转载

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 《数据结构与算法分析》学习笔记(三)——链表ADT

    今天简单学习了下链表,待后续,会附上一些简单经典的题目的解析作为学习的巩固 首先要了解链表,链表其实就是由一个个结点构成的,然后每一个结点含有一个数据域和一个指针域,数据域用来存放数据,而指针域则用来 ...

  4. Java学习随笔2:Java复合赋值表达式的小问题

    问题:i += j只是i = i + j的简写么? 答案:非也!看下面的程序: int i = 5; long j = 8; i += j; // 可以通过编译且结果正确 i = i + j; // ...

  5. 使用JdbcTemplate报 Incorrect column count: expected 1, actual 5错误解决

    Incorrect column count: expected 1, actual 5 在使用jdbc的querForObject queryForList的时候,出现Incorrect colum ...

  6. DSP using MATLAB 示例Example3.1 3.2 3.3

    上代码: w = [0:1:500]*pi/500; % [0,pi] axis divided into 501 points. X = exp(j*w) ./ (exp(j*w) - 0.5*on ...

  7. java 常见下载合集

    J2SE SDK (JDK): Windows: http://download.oracle.com/auth/otn-pub/java/jdk/6u25-b06/jdk-6u25-windows- ...

  8. [转]使用 HTML5 IndexedDB API

    本地数据持久性提高了 Web 应用程序可访问性和移动应用程序响应能力 索引数据库 (IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 ...

  9. Singleton模式——对象创建型模式

    Singleton模式即为单例模式/单件模式. (一)意图--保证一个类仅有一个实例,并提供一个访问它的全局访问点. 如一台计算机可以有多个端口,但是应该统一管理这些端口,避免访问冲突.--选择Sin ...

  10. 关于ui修改的若干想法

    1.现在发现统一规划好各种xml资源.图片资源还是很重要的. 为什么?因为,很多一些ui设计,比如标题.文字大小.列表的宽高都是统一的, 据我个人理解,一个ui多个部分,如果很多部分都是设计上统一的, ...