javascript使用substring实现的展开与收缩文字功能示例
程序员文章站
2023-11-12 22:24:04
本文实例讲述了javascript使用substring实现的展开与收缩文字功能。分享给大家供大家参考，具体如下：
效果如图：
本文实例讲述了javascript使用substring实现的展开与收缩文字功能。分享给大家供大家参考，具体如下：
效果如图：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>www.jb51.net 展开和收缩</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.jb51.net/code/htmljsrun测试上述代码运行效果。
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript页面元素操作技巧总结》、《javascript运动效果与技巧汇总》、《javascript动画特效与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： jQuery实现鼠标跟随效果
下一篇： 用file标签实现多图文件上传预览