cari

Rumah >hujung hadapan web >tutorial js >JavaScript memintas rentetan panjang yang ditentukan dan klik untuk mengembangkan keseluruhan kemahiran code_javascript

JavaScript memintas rentetan panjang yang ditentukan dan klik untuk mengembangkan keseluruhan kemahiran code_javascript

WBOY
WBOYasal
2016-05-16 15:27:421450semak imbas

Panjang artikel selalunya tidak begitu sesuai Jika ia dipaparkan pada panjang asal, ia mungkin menjejaskan reka letak atau estetika halaman web pada masa ini, perlu memintas rentetan tertentu mengikut situasi untuk menyesuaikan diri dengan reka letak Walau bagaimanapun, apabila anda mengklik butang, anda masih boleh mengembangkan semua kandungan Berikut adalah pengenalan terperinci tentang cara mencapai kesan ini melalui contoh: 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>字符串截取展开效果</title>
<style type="text/css">
#thediv{
 width:200px;
 margin:0px auto;
}
</style>
<script type="text/javascript"> 
function cutStr(){ 
 var odiv=document.getElementById("thediv"); 
 var str=odiv.innerHTML; 
 var ospan=document.createElement("span"); 
 var olink=document.createElement("a"); 
 ospan.innerHTML=str.substring(0,20); 
 olink.innerHTML=str.length>20&#63;"...":""; 
 olink.href="###"; 
 olink.onclick=function(){ 
  if(olink.innerHTML=="..."){ 
   olink.innerHTML="收起"; 
   ospan.innerHTML=str; 
  }
  else{ 
   olink.innerHTML="..."; 
   ospan.innerHTML=str.substring(0,20); 
  } 
 } 
 odiv.innerHTML=""; 
 odiv.appendChild(ospan); 
 odiv.appendChild(olink); 
}; 
window.onload=function(){
 cutStr();
}
</script> 
<body>
<div id="thediv">脚本之家欢迎您，个人的力量再强也只是一只强壮的而已，如果有分享和胸怀和合作的精神，那么就有可能活得巨大进步。</div> 
</body>
</html>


Kod di atas melaksanakan keperluan kami, memintas rentetan yang ditentukan dan berakhir dengan "..." Apabila pengakhiran ini diklik, semua kandungan teks boleh dikembangkan Berikut ialah pengenalan kepada proses pelaksanaan kesan ini.

1. Prinsip pelaksanaan:

Buat elemen span dan elemen, kemudian gunakan fungsi substring() untuk memintas rentetan yang ditentukan dan tetapkannya sebagai kandungan elemen span, dan kemudian tentukan sama ada panjang rentetan asal lebih besar daripada panjang yang ditentukan . Jika ia lebih besar, maka a Kandungan dalam elemen ditetapkan kepada "...". Kemudian kosongkan div asal, dan kemudian tambahkan elemen span dan elemen pada div, dengan itu merealisasikan fungsi pemintasan. Daftarkan fungsi pemprosesan masa untuk elemen a Mengklik butang ini akan melaksanakan fungsi pemprosesan acara Fungsi ini terlebih dahulu menentukan keadaannya. Jika ia berada dalam keadaan runtuh, maka kandungan dalam elemen akan ditetapkan kepada ". runtuhkan" , dan letakkan semua aksara asal ke dalam rentang, sekali gus merealisasikan pengembangan. Jika ia dalam keadaan diperluas, maka aksara akan dipintas dan kandungan dalam elemen diubah suai. Prinsipnya lebih kurang sama, boleh rujuk bacaan berkaitan.

Kandungan di atas ialah JavaScript yang diperkenalkan oleh artikel ini kepada anda untuk memintas rentetan panjang yang ditentukan. Saya harap anda menyukainya.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery jsp menyedari kesan hubungan tiga peringkat wilayah, bandar dan daerah (dengan kod sumber)_jqueryArtikel seterusnya：jQuery jsp menyedari kesan hubungan tiga peringkat wilayah, bandar dan daerah (dengan kod sumber)_jquery

Artikel berkaitan

Lihat lagi