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 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
详解vue的diff算法原理
May 20 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
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中使用X-SendFile头让文件下载更快
2014/06/01 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
python实现随机漫步方法和原理
2019/06/10 Python
基于Python中的yield表达式介绍
2019/11/19 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Python代码需要缩进吗
2020/07/01 Python
Python实现像awk一样分割字符串
2020/09/15 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
采购部主管岗位职责
2014/01/01 职场文书
运动会入场解说词300字
2014/01/25 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
党员先进事迹材料
2014/12/19 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
javaScript Array api梳理
2021/03/31 Javascript
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL