search

Home >Web Front-end >JS Tutorial >JS method to achieve neon text effect_javascript skills

JS method to achieve neon text effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:46:371729browse

The example in this article describes how to achieve the neon text effect with JS. Share it with everyone for your reference. The details are as follows:

Here we use JS to implement the neon text special effects code on the web page. Take a look at the running effect. You will see that the color of the text is like a neon light, changing continuously, colorful and dazzling, so it is called neon. Text, you can also call it text color changing effect.

The screenshot of the running effect is as follows:

The specific code is as follows: 

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

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How does PHP jQuery Ajax Mysql implement the mood expression function_javascript skillsNext article：How does PHP jQuery Ajax Mysql implement the mood expression function_javascript skills

Related articles

See more