本文實例講述了javascript使用substring實現的展開與收縮文字功能。分享給大家供大家參考,具體如下:
效果如圖:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.gxlcms.com 展開和收縮</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程序設計有所幫助。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com