Color Effect in Text using JavaScript

Submitted by alpha_luna on Wednesday, July 27, 2016 - 17:00.
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. Result
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.
Tags
Neon
neon light effect
neon text
neon text effect
Javascript

Add new comment

About text formats
  • 48 views