javascript使用substring實(shí)現(xiàn)的展開(kāi)與收縮文字功能示例
本文實(shí)例講述了javascript使用substring實(shí)現(xiàn)的展開(kāi)與收縮文字功能。分享給大家供大家參考,具體如下:
效果如圖:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn 展開(kāi)和收縮</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 = "<< 展開(kāi)" } else { oSpan.innerHTML = str.substring(0); oA.innerHTML = "<< 收縮" } onOff=!onOff; } } </script> <body> <p> <span>2017年5月到6月,科學(xué)家們沿著澳大利亞海岸線向珊瑚海行進(jìn),他們從4000米深的海底收集到1000多種海洋生物,其中300多種是新物種。照片里的紅色科芬魚(yú)(coffinfish)長(zhǎng)著藍(lán)色眼睛,頭上有個(gè)蓬松柔軟的“釣竿”,這個(gè)釣竿能勾引獵物上鉤。這是一種甲殼食肉動(dòng)物,在深海中它是“拾荒者”,任何能提供營(yíng)養(yǎng)的東西它們都能吃,包括腐爛的鯨魚(yú)尸體。'這是發(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測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS+CSS實(shí)現(xiàn)DIV層的展開(kāi)、收縮效果
- js實(shí)現(xiàn)div層緩慢收縮與展開(kāi)的方法
- vuejs實(shí)現(xiàn)折疊面板展開(kāi)收縮動(dòng)畫(huà)效果
- JS右下角廣告窗口代碼(可收縮、展開(kāi)及關(guān)閉)
- JavaScript設(shè)置FieldSet展開(kāi)與收縮
- JS實(shí)現(xiàn)固定在右下角可展開(kāi)收縮DIV層的方法
- 在iframe里的頁(yè)面編寫(xiě)js,實(shí)現(xiàn)在父窗口上創(chuàng)建動(dòng)畫(huà)效果展開(kāi)和收縮的div(不變動(dòng)iframe父窗口代碼)
- JS仿QQ好友列表展開(kāi)、收縮功能(第一篇)
- JS仿QQ好友列表展開(kāi)、收縮功能(第二篇)
- Vue.JS實(shí)現(xiàn)垂直方向展開(kāi)、收縮不定高度模塊的JS組件
- JavaScript實(shí)現(xiàn)QQ列表展開(kāi)收縮擴(kuò)展功能
相關(guān)文章
JS如何實(shí)現(xiàn)動(dòng)態(tài)添加的元素綁定事件
這篇文章主要介紹了JS如何實(shí)現(xiàn)動(dòng)態(tài)添加的元素綁定事件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11JS動(dòng)態(tài)修改表格cellPadding和cellSpacing的方法
這篇文章主要介紹了JS動(dòng)態(tài)修改表格cellPadding和cellSpacing的方法,涉及javascript操作cellPadding和cellSpacing屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03bootstrap table列和表頭對(duì)不齊的解決方法
這篇文章主要為大家詳細(xì)介紹了bootstrap table列和表頭對(duì)不齊的解決方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07JavaScript實(shí)現(xiàn)谷歌瀏覽器插件開(kāi)發(fā)的方法詳解
對(duì)于瀏覽器插件相信大家都不陌生,誰(shuí)的瀏覽器不裝幾個(gè)好用的插件呢,更是有油猴這個(gè)強(qiáng)大的神器。所以本文就來(lái)用JavaScript開(kāi)發(fā)一個(gè)谷歌瀏覽器插件,感興趣的小伙伴可以了解一下2022-11-11