Heim > Artikel > Web-Frontend > JavaScript fängt eine Zeichenfolge mit der angegebenen Länge ab und klickt darauf, um die gesamten Code_Javascript-Fähigkeiten zu erweitern

JavaScript fängt eine Zeichenfolge mit der angegebenen Länge ab und klickt darauf, um die gesamten Code_Javascript-Fähigkeiten zu erweitern

WBOYOriginal: 2016-05-16 15:27:421394Durchsuche

Die Länge des Artikels ist oft nicht so angemessen, wenn er in der Originallänge angezeigt wird. Dies kann das Layout oder die Ästhetik der Webseite beeinträchtigen. Zu diesem Zeitpunkt ist es erforderlich, bestimmte Zeichenfolgen entsprechend der Situation abzufangen Wenn Sie jedoch auf eine Schaltfläche klicken, können Sie den gesamten Inhalt erweitern. Hier finden Sie eine detaillierte Einführung, wie Sie diesen Effekt anhand eines Beispiels erzielen können:

<!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>

Der obige Code implementiert unsere Anforderungen, fängt die angegebene Zeichenfolge ab und endet mit „…“. Wenn auf diese Endung geklickt wird, kann der gesamte Textinhalt erweitert werden.

1. Umsetzungsprinzip:

Erstellen Sie ein Span-Element und ein Element, fangen Sie dann mit der Funktion substring () die angegebene Zeichenfolge ab, legen Sie sie als Inhalt des Span-Elements fest und bestimmen Sie dann, ob die Länge der ursprünglichen Zeichenfolge größer als die angegebene Länge ist . Ist er größer, dann wird der Inhalt im Element auf „…“ gesetzt. Löschen Sie dann das ursprüngliche Div und fügen Sie dann das Span-Element und ein Element zum Div hinzu, um so die Abfangfunktion zu realisieren. Registrieren Sie eine Zeitverarbeitungsfunktion für das a-Element. Durch Klicken auf diese Schaltfläche wird die Ereignisverarbeitungsfunktion zunächst ermittelt. Wenn es sich im reduzierten Zustand befindet, wird der Inhalt im a-Element auf „eingestellt“. collapse“ und fügt alle ursprünglichen Zeichen in span ein, wodurch die Erweiterung realisiert wird. Wenn es sich im erweiterten Zustand befindet, werden die Zeichen abgefangen und der Inhalt im a-Element wird geändert. Das Prinzip ist ungefähr das gleiche, Sie können auf verwandte Lektüren zurückgreifen.

Der obige Inhalt ist das JavaScript, das Ihnen in diesem Artikel vorgestellt wird, um eine Zeichenfolge mit einer bestimmten Länge abzufangen. Klicken Sie, um den gesamten Code zu erweitern.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery jsp realisiert den dreistufigen Verknüpfungseffekt von Provinzen, Städten und Landkreisen (mit Quellcode)_jqueryNächster Artikel：jQuery jsp realisiert den dreistufigen Verknüpfungseffekt von Provinzen, Städten und Landkreisen (mit Quellcode)_jquery

In Verbindung stehende Artikel

Mehr sehen