JS实现霓虹灯文字效果的方法


Posted in Javascript onAugust 06, 2015

本文实例讲述了JS实现霓虹灯文字效果的方法。分享给大家供大家参考。具体如下:

这里使用JS实现网页上的霓虹灯文字特效代码特效,运行效果看一下,你会看到文字的颜色像霓虹灯一样,连续不停变化,五颜六色的,很炫的样子,所以就叫做霓虹文字吧,也可以叫他文字变色效果。

运行效果截图如下:

JS实现霓虹灯文字效果的方法

具体代码如下:

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

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
jquery easyui使用心得
Jul 07 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
javascript实现网页背景烟花效果的方法
Aug 06 #Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 #Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 #Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 #Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 #Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 #Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 #Javascript
You might like
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
js获取变量
2006/08/24 Javascript
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
python机器学习之神经网络(一)
2017/12/20 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
在Python中表示一个对象的方法
2019/06/25 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
编写strcpy函数
2014/06/24 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
精通CAD能手自荐书
2014/01/31 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
护士辞职信怎么写
2015/02/27 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python