段落的展开收起(substring的应用)
<!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的应用)的更多相关文章
- 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起
Dom与Event简洁代码实现文本展开收起 Xuijs超轻量级的框架 Dom与Event实现文本展开收起 效果图 示例代码 <!DOCTYPE html PUBLIC "-//W3C/ ...
- HTML-003-模拟IDE代码展开收起功能简单示例
当先我们在日常的编程开发工作中使用编程工具(例如 Eclipse.Sublime 等等)都有相应的代码折叠展开功能,如下图所示,极大的方便了我们的编码工作.
- JS点击查看更多内容 控制段落文字展开折叠
JavaScript+jQuery实现的文字展开折叠效果,点击文字后文字内容会完整的显示出来,控制段落来显示文字,不需要的时候,可以再次点击后将内容折叠起来,也就是隐藏了一部分内容.点击查看更多的功能 ...
- css实现侧边展开收起
前言:因为突然想研究研究侧边栏滑动展开收起怎么做的,就去baidu了一下transition. 详情 内容1 内容1 内容1 内容1 内容1 右侧有实现demo.就是那个绿色的详情 先来看一下我的代码 ...
- [TimLinux] CSS 纯CSS实现动画展开/收起功能
内容转自CSS世界,理解之后进行了简化,简化后代码: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /& ...
- Vue 实现点击展开收起
Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...
- javasript简单实现文字的展开收起(无动画)
今天在工作遇到展开和收起的需求,在网上找了很多方法,今天来写一下我觉得比较简单的方法 在项目中需要达到如图这种效果 首先想的是使用overflow简单且粗暴,在需要展开的的文字定义样式 { overf ...
- vue.js 实现点击展开收起动画
最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起, 其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~), ,,接下来分享给大家,先上效果图: .vue页面: ...
- el-upload上传列表实现 展开 收起
# el-upload上传列表实现 展开 收起 #### 无图言*,所以先上最终效果图(想参考代码的可以直接滑到最后) ### 具体实现思路 注意: 每个人的项目环境以及需求,都不尽相同,所以这里仅仅 ...
随机推荐
- loj 1426(dfs + bfs)
题目链接:http://lightoj.com/volume_showproblem.php?problem=1426 思路:首先我们预处理出每一个"*"在某一方向上最终能到达的位 ...
- ios调用系统导航
#import "ViewController.h" #import <MapKit/MapKit.h> @interface ViewController () @p ...
- eclipse 常用快捷键及调试方法
原文链接:http://my.oschina.net/u/1054538/blog/741561 常用快捷键 Eclipse最全快捷键,熟悉快捷键可以帮助开发事半功倍,节省更多的时间来用于做有意义的事 ...
- 廖雪峰js教程笔记3
JavaScript的函数在查找变量时从自身函数定义开始,从"内"向"外"查找.如果内部函数定义了与外部函数重名的变量,则内部函数的变量将"屏蔽&qu ...
- 关于JSP页面字段属性设为disabled或者readonly所带来的问题总结
最近需要将页面一些自动求和的字段设为不可操作,当然disabled和readonly都可以实现,但是我的页面需求是来录入数据的,当用disabled时,该字段值是无法被获取并传到后台的,这时如果使用r ...
- jQuery Cycle Plugin的使用
jQuery幻灯片效果或者Slideshow效果当中如果不考虑touch效果的话,jQuery Cycle插件实在是太强大了,各种高大上的动画效果,如果想加上touch效果可以结合本blog介绍的wi ...
- 获取ItemsControl中当前item的binding数据
直接用 {Binding} 就可以了,如下: <ItemsControl ItemsSource="{Binding Path=ProcessItems}"> < ...
- iOS学习07之C语言指针
本次随笔主要是为了学习和理解C语言中的指针,指针树状图如下: 1.访问数据的两种方式 1> 直接访问:定义变量后,直接访问变量 ; printf("a = %d\n", a) ...
- linux 安装vbox增强工具
首先在虚拟机控制台点设备--------安装增强功能,这样会用虚拟光驱加载增强功能镜象. 然后打开终端,先转到root身份:=================su================= f ...
- [转]Maven实现直接部署Web项目到Tomcat7
From:http://my.oschina.net/angel243/blog/178554 http://yuandingjiema.iteye.com/blog/1752544 以前在项目中很少 ...