Maison  >  Article  >  interface Web  >  Méthode JS pour acquérir des compétences effet de texte néon_javascript

Méthode JS pour acquérir des compétences effet de texte néon_javascript

WBOY
WBOYoriginal
2016-05-16 15:46:371713parcourir

L'exemple de cet article décrit comment obtenir l'effet de texte néon avec JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Ici, nous utilisons JS pour implémenter le code des effets spéciaux du texte néon sur la page Web. Jetez un œil à l'effet de course. Vous verrez que la couleur du texte est comme une lumière néon, changeant continuellement, colorée et éblouissante. c'est ce qu'on appelle le texte néon, vous pouvez également l'appeler effet de changement de couleur du texte.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>霓虹灯</title>
</head>
<body>
<script>
var Tname="欢迎您的到来!";
var Tlen=Tname.length;
document.write("<div id='a' style='font-size:40px;'>"+Tname+"</div>");
var col=new Array("#FFCC00","#3333FF","#FFCC00","#FF0000","#FFCC00","#CC33FF");
var ic=0;
function Dcolor(){
 var Strname="";
 for (i=0;i<Tlen;++i){
  var Strname=Strname+"<font color="+col[ic]+">"+Tname.substring(i,i+1)+"</font>";
 ic=ic+1;
  if (ic==col.length) ic=0;
 }
 a.innerHTML=Strname;
 setTimeout("Dcolor()",200);
}
Dcolor();
</script>
<span class="style5"></span>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

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