In this article, we are going to learn about Color Effect in Text using JavaScript. You can use this to your future projects or websites to attract the user. This is very simple kind of source code, you can easily change the base color, text color, and the flash speed in the text.

In our example, we have white color for the base, yellow color for the text, and 80 milliseconds for the flash speed.

This is the script source code that you can edit the color and the speed.

1. <
   
   script language=
   
   "JavaScript1.2"
   
   >
   
2. var
   
   message =
   
   "Welcome to Sourcecodester! Free source code."
   
3. var
   
   neonbasecolor =
   
   "white"
   
4. var
   
   neontextcolor =
   
   "yellow"
   
5. var
   
   flashspeed =
   
   80
   
   //in milliseconds
   
6. </
   
   script>
   

Complete Script Source Code

Kindly copy and paste this simple script source code to your BODY tag of your page. To have a great neon effect in your text.

1. <
   
   script language=
   
   "JavaScript1.2"
   
   >
   
2. var
   
   message =
   
   "Welcome to Sourcecodester! Free source code."
   
3. var
   
   neonbasecolor =
   
   "white"
   
4. var
   
   neontextcolor =
   
   "yellow"
   
5. var
   
   flashspeed =
   
   80
   
   //in milliseconds
   
6. 
   
7. ///No need to edit below this line/////
   
8. var
   
   n=
   
   0
   
9. if
   
   (
   
   document.all
   
   ||
   
   document.getElementById
   
   )
   
   {
   
10. document.write
    
    (
    
    ''
    
    )
    
11. for
    
    (
    
    m=
    
    0
    
    ;
    
    m<
    
    message.length
    
    ;
    
    m++
    
    )
    
12. document.write
    
    (
    
    '<span id="neonlight'
    
    +
    
    m+
    
    '">'
    
    +
    
    message.charAt
    
    (
    
    m)
    
    +
    
    '</span>'
    
    )
    
13. document.write
    
    (
    
    ''
    
    )
    
14. }
    
15. else
    
16. document.write
    
    (
    
    message)
    
17. 
    
18. function
    
    crossref(
    
    number)
    
    {
    
19. var
    
    crossobj=
    
    document.all
    
    ?
    
    eval(
    
    "document.all.neonlight"
    
    +
    
    number)
    
    :
    
    document.getElementById
    
    (
    
    "neonlight"
    
    +
    
    number)
    
20. return
    
    crossobj
    
21. }
    
22. 
    
23. function
    
    neon(
    
    )
    
    {
    
24. //Change all letters to base color
    
25. if
    
    (
    
    n==
    
    0
    
    )
    
    {
    
26. for
    
    (
    
    m=
    
    0
    
    ;
    
    m<
    
    message.length
    
    ;
    
    m++
    
    )
    
27. //eval("document.all.neonlight"+m).style.color=neonbasecolor
    
28. crossref(
    
    m)
    
    .style
    
    .color
    
    =
    
    neonbasecolor
    
29. }
    
30. //cycle through and change individual letters to neon color
    
31. crossref(
    
    n)
    
    .style
    
    .color
    
    =
    
    neontextcolor
    
32. if
    
    (
    
    n<
    
    message.length
    
    -
    
    1
    
    )
    
33. n++
    
34. else
    
    {
    
35. n=
    
    0
    
36. clearInterval(
    
    flashing)
    
37. setTimeout(
    
    "beginneon()"
    
    ,
    
    1500
    
    )
    
38. return
    
39. }
    
40. }
    
41. 
    
42. function
    
    beginneon(
    
    )
    
    {
    
43. if
    
    (
    
    document.all
    
    ||
    
    document.getElementById
    
    )
    
44. flashing=
    
    setInterval(
    
    "neon()"
    
    ,
    
    flashspeed)
    
45. }
    
46. beginneon(
    
    )
    
47. </
    
    script>
    

Output

This is the output after constructing the script in your editor.



Kindly click the "Download Code" button below for full source code. Thank very much. Enjoy coding.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download