快捷導(dǎo)航

javascript使用substring實(shí)現(xiàn)的展開與收縮文字功能示例

更新時(shí)間：2019年06月17日 08:34:21 作者：longzhoufeng

這篇文章主要介紹了javascript使用substring實(shí)現(xiàn)的展開與收縮文字功能,涉及javascript元素遍歷與屬性設(shè)置相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript使用substring實(shí)現(xiàn)的展開與收縮文字功能。分享給大家供大家參考，具體如下：

效果如圖：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>m.fzitv.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月，科學(xué)家們沿著澳大利亞海岸線向珊瑚海行進(jìn)，他們從4000米深的海底收集到1000多種海洋生物，其中300多種是新物種。照片里的紅色科芬魚(coffinfish)長著藍(lán)色眼睛，頭上有個(gè)蓬松柔軟的“釣竿”，這個(gè)釣竿能勾引獵物上鉤。這是一種甲殼食肉動(dòng)物，在深海中它是“拾荒者”，任何能提供營養(yǎng)的東西它們都能吃，包括腐爛的鯨魚尸體。'這是發(fā)光的海蛇尾，它們用微弱的熒光警告那些捕食者，不要把它們當(dāng)作食物。</span>...<a href="javascript:;" rel="external nofollow" ><< 收縮</a>
</p>
</body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript使用WebSocket實(shí)現(xiàn)實(shí)時(shí)通信的技術(shù)詳解
WebSocket作為一種高效的通信協(xié)議,為開發(fā)者提供了一種在客戶端和服務(wù)器之間進(jìn)行全雙工通信的方法,本文將深入探討WebSocket技術(shù),并提供實(shí)戰(zhàn)代碼示例
2024-04-04
微信小程序淘寶首頁雙排圖片布局排版代碼(推薦)
這篇文章主要介紹了微信小程序淘寶首頁雙排圖片布局排版代碼,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-10
一道常被人輕視的web前端常見面試題(JS)
面試題是招聘公司和開發(fā)者都非常關(guān)心的話題，公司希望通過它了解開發(fā)者的真實(shí)水平和細(xì)節(jié)處理能力，而開發(fā)者希望能夠最大程度地展示自己的水平（甚至超常發(fā)揮）。本文提供了眾多前端開發(fā)面試題，無論是招聘方還是應(yīng)聘方都值得一看
2016-02-02
JS與HTML結(jié)合實(shí)現(xiàn)流程進(jìn)度展示條思路詳解
基于js與html相結(jié)合實(shí)現(xiàn)的流程進(jìn)度展示條，非常實(shí)用，在各大網(wǎng)站都可以用到，下面小編給大家?guī)砹薐S與HTML結(jié)合實(shí)現(xiàn)流程進(jìn)度展示條思路詳解，需要的朋友參考下吧
2017-09-09
TypeScript中類型映射的使用
TypeScript中的映射類型和數(shù)學(xué)中的映射類似,能夠?qū)⒁粋€(gè)集合的元素轉(zhuǎn)換為新集合的元素,本文就來介紹一下TypeScript中類型映射的使用,感興趣的可以了解一下
2023-10-10
JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-02-02
思維導(dǎo)圖插件jsMind的詳細(xì)使用指南
jsMind是一個(gè)顯示/編輯思維導(dǎo)圖的純的javascript類庫,其基于HTML5的帆布進(jìn)行設(shè)計(jì).jsMind以BSD協(xié)議開源,這篇文章主要給大家介紹了關(guān)于思維導(dǎo)圖插件jsMind的詳細(xì)使用指南,需要的朋友可以參考下
2024-07-07
怎樣調(diào)用動(dòng)態(tài)獲取的自定義對(duì)象的方法
怎樣調(diào)用動(dòng)態(tài)獲取的自定義對(duì)象的方法...
2006-10-10
uni-app 項(xiàng)目中 “文件查找失?。骸甤rypto-js‘“ 的問題及解決方法
在開發(fā)使用 uni-app 框架的項(xiàng)目時(shí),遇到依賴問題是常見的,本文將介紹如何解決編譯過程中出現(xiàn)的 “文件查找失?。骸甤rypto-js’” 錯(cuò)誤,并說明這種錯(cuò)誤為什么會(huì)發(fā)生以及如何避免,下面分步驟給大家?guī)斫鉀Q方案,感興趣的朋友一起看看吧
2024-07-07
js判斷空對(duì)象的實(shí)例(超簡單)
下面小編就為大家?guī)硪黄猨s判斷空對(duì)象的實(shí)例(超簡單)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07