欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年06月17日 08:34:21   作者:longzhoufeng  
這篇文章主要介紹了javascript使用substring實(shí)現(xiàn)的展開(kāi)與收縮文字功能,涉及javascript元素遍歷與屬性設(shè)置相關(guān)操作技巧,需要的朋友可以參考下

本文實(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ì)有所幫助。

相關(guān)文章

  • js 下拉菜單實(shí)現(xiàn)代碼

    js 下拉菜單實(shí)現(xiàn)代碼

    js 下拉菜單實(shí)現(xiàn)代碼,原理比較簡(jiǎn)單,需要的朋友可以參考下,具體的美化要靠自己。
    2010-05-05
  • JS中的數(shù)組方法筆記整理

    JS中的數(shù)組方法筆記整理

    這篇文章主要介紹了JS中的數(shù)組方法筆記整理 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-07-07
  • JavaScript交換兩個(gè)變量方法實(shí)例

    JavaScript交換兩個(gè)變量方法實(shí)例

    這篇文章主要介紹了JavaScript交換兩個(gè)變量方法實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-11-11
  • js中的數(shù)組對(duì)象排序分析

    js中的數(shù)組對(duì)象排序分析

    這篇文章為大家分析一下js中的數(shù)組對(duì)象排序的一些知識(shí),方便大家在以后使用中知道這些排序的原理
    2018-12-12
  • 瘋掉了,盡然有js寫(xiě)的操作系統(tǒng)

    瘋掉了,盡然有js寫(xiě)的操作系統(tǒng)

    瘋掉了,盡然有js寫(xiě)的操作系統(tǒng)...
    2007-04-04
  • JS如何實(shí)現(xiàn)動(dòng)態(tài)添加的元素綁定事件

    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-11
  • JS動(dòng)態(tài)修改表格cellPadding和cellSpacing的方法

    JS動(dòng)態(tài)修改表格cellPadding和cellSpacing的方法

    這篇文章主要介紹了JS動(dòng)態(tài)修改表格cellPadding和cellSpacing的方法,涉及javascript操作cellPadding和cellSpacing屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-03-03
  • bootstrap table列和表頭對(duì)不齊的解決方法

    bootstrap table列和表頭對(duì)不齊的解決方法

    這篇文章主要為大家詳細(xì)介紹了bootstrap table列和表頭對(duì)不齊的解決方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • 防止文件緩存的js代碼

    防止文件緩存的js代碼

    原理其實(shí)就是通過(guò)在固定地址后面,加上一個(gè)不同值的日期數(shù)值,以達(dá)到地址不重復(fù)的目的,讓瀏覽器每次都實(shí)時(shí)加載,不從緩存中讀取文件
    2013-01-01
  • JavaScript實(shí)現(xiàn)谷歌瀏覽器插件開(kāi)發(fā)的方法詳解

    JavaScript實(shí)現(xiàn)谷歌瀏覽器插件開(kāi)發(fā)的方法詳解

    對(duì)于瀏覽器插件相信大家都不陌生,誰(shuí)的瀏覽器不裝幾個(gè)好用的插件呢,更是有油猴這個(gè)強(qiáng)大的神器。所以本文就來(lái)用JavaScript開(kāi)發(fā)一個(gè)谷歌瀏覽器插件,感興趣的小伙伴可以了解一下
    2022-11-11

最新評(píng)論