recherche

Maison >interface Web >js tutoriel >JavaScript intercepte une chaîne de longueur spécifiée et clique pour développer l'ensemble des compétences code_javascript

JavaScript intercepte une chaîne de longueur spécifiée et clique pour développer l'ensemble des compétences code_javascript

WBOY
WBOYoriginal
2016-05-16 15:27:421448parcourir

La longueur de l'article n'est souvent pas si appropriée. S'il est affiché à la longueur d'origine, cela peut affecter la mise en page ou l'esthétique de la page web. A ce moment, il est nécessaire d'intercepter certaines chaînes en fonction de la situation. pour s'adapter à la mise en page. Cependant, lorsque vous cliquez sur un bouton, vous pouvez toujours développer tout le contenu. Voici une introduction détaillée sur la façon d'obtenir cet effet à travers un exemple. L'exemple de code est le suivant :

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


Le code ci-dessus implémente nos exigences, intercepte la chaîne spécifiée et se termine par "..." Lorsque vous cliquez sur cette fin, tout le contenu du texte peut être développé. Ce qui suit est une introduction au processus d'implémentation de cet effet.

1.Principe de mise en œuvre :

Créez un élément span et un élément, puis utilisez la fonction substring() pour intercepter la chaîne spécifiée et définissez-la comme contenu de l'élément span, puis déterminez si la longueur de la chaîne d'origine est supérieure à la longueur spécifiée. S'il est supérieur, alors a Le contenu de l'élément est défini sur "...". Effacez ensuite le div d'origine, puis ajoutez l'élément span et un élément au div, réalisant ainsi la fonction d'interception. Enregistrez une fonction de traitement du temps pour l'élément a. Cliquer sur ce bouton exécutera la fonction de traitement d'événement. Cette fonction détermine d'abord dans quel état il se trouve. S'il est dans l'état réduit, alors le contenu de l'élément a sera défini sur ". "effondrement" et placez tous les caractères originaux dans span, réalisant ainsi l'expansion. S'il est dans l'état développé, alors les caractères sont interceptés et le contenu de l'élément a est modifié. Le principe est à peu près le même, vous pouvez vous référer aux lectures associées.

Le contenu ci-dessus est le JavaScript que cet article vous présente pour intercepter une chaîne de longueur spécifiée. Cliquez pour développer l'intégralité du code.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery jsp réalise l'effet de liaison à trois niveaux des provinces, des villes et des comtés (avec le code source)_jqueryArticle suivant：jQuery jsp réalise l'effet de liaison à trois niveaux des provinces, des villes et des comtés (avec le code source)_jquery

Articles Liés

Voir plus