<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
function init(){
var len = 14; //默认显示字数
var ctn = document.getElementById("content"); //获取div对象
var content = ctn.innerHTML; //获取div里的内容
//alert(content);
var span = document.createElement("span"); //创建<span>元素
var a = document.createElement("a"); //创建<a>元素
span.innerHTML = content.substring(0,len); //span里的内容为content的前len个字符
a.innerHTML = content.length>len?"<img src='d:\\right.jpeg' width='15' height='15' />展开":""; //设置a的显示
a.href = "javascript:void(0)";
a.onclick = function(){
if(a.innerHTML.indexOf("展开")>0){ //如果a中含有"展开"则显示"收起"
a.innerHTML = "<img src='d:\\up.jpeg' width='15' height='15' />收起";
span.innerHTML = content;
}else{
a.innerHTML = "<img src='d:\\right.jpeg' width='15' height='15' />展开";
span.innerHTML = content.substring(0,len);
}
}
// 设置div内容为空，span元素 a元素加入到div中
ctn.innerHTML = "";
ctn.appendChild(span);
ctn.appendChild(a);
}
</script>
<body onload="init()">
<div id="content">
那片笑声让我想起我的那些花儿</br>
在我生命每个角落静静为我开着</br>
我曾以为我会永远守在他身旁</br>
今天我们已经离去在人海茫茫
</div>
</body>
</html>
截图
分享到：
相关推荐
JavaScript 实现文字的显示与隐藏 在 Web 开发中，能够控制文字的显示与隐藏是非常实用的技术。这篇文章将介绍如何使用 JavaScript 实现文字的显示与隐藏，并提供了两个不同的示例代码。 示例一：直接在标签内调用...
JavaScript实现文字展开和收起效果 列表式的文字的展开和收起的实现，供大家参考，具体内容如下 需求： 1、当文字超出目标值，则截取目标值，其他隐藏,同时显示“展开”二字和下拉箭头； 2、点击“展开”显示...
主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下
本文实例讲述了JavaScript实现定时隐藏与显示图片的方法。分享给大家供大家参考。具体如下： 这里使用JavaScript实现定时隐藏与显示图片，设定图片在几秒后会自动显示，也会自动隐藏，秒数这个自己去定义吧，在...
本文实例讲述了JavaScript实现隐藏省略文字效果的方法。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv=Content-Type content=text/html; charset=GB2312 /> <title>...
* 图片对象可以实现图片的显示和隐藏 七、 JavaScript 在表单中的应用 * 表单是HTML中的一种基本结构单元 * 表单可以使用JavaScript来实现交互功能 * 表单可以使用JavaScript来实现数据的验证 * 表单可以使用...
这是一款基于纯JavaScript实现的侧边栏菜单，因为整个菜单并没有使用jQuery等第三方插件，因此菜单比较轻量级的。这款JS侧边栏菜单的特点是点击按钮可以展开和隐藏，并且在隐藏时自动显示提示文字，展开后又隐藏提示...
3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本...
3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...
在这篇文章中，我们将主要介绍 javascript 中的作用域的相关资料，并分享一个实例，讲解并描述了如何实现javascript 弹出带文字信息的提示框效果。 一、javascript 作用域 在javascript 中，作用域（Scope）是指...
实例385 自动隐藏式菜单 637 第18章 JavaScript与PHP结合 641 18.1 窗口与对话框 642 实例386 弹出提示对话框并重定向网页 642 实例387 关闭弹出窗口时自动刷新父窗口 643 实例388 在弹出的网页模式...
本文介绍了使用JavaScript实现鼠标跟随文字滚动效果的方法。该效果可以让文字在鼠标的周围滚动，增加用户体验。 知识点1：JavaScript中的Mousemove事件 在该示例中，我们使用了JavaScript中的Mousemove事件来实现...
12.7.4 改变位置--创建一个绕圆圈旋转的文字 12.7.5 编辑控制及其范例 12.7.6 改变样式及其范例 12.7.7 改变行为 12.8 XML DOM 12.8.1 什么是XML DOM 12.8.2 如何使用XML DOM--一个利用...
116.425, 39.900】），页面里面也实现了隐藏poi文字、还有覆盖物清除、进行测距（在地图上随意标俩个点就可以获得之间的直线距离）、随意放大和缩小地图的按键也可通过鼠标。最后一个路径规划的输入框，是输入一个...
文字溢出隐藏组件，基于 vue 编写，用于 web 表单页面，支持移动端。一、组件功能支持单行、多行文字溢出显示点点点 or【更多】按钮，如下图所示（对应 App.vue 中的示例）点击【更多】按钮可展开显示所有文字，点击...