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 相关文章推荐
jQuery TextBox自动完成条
Jul 22 Javascript
JavaScript作用域链示例分享
May 27 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
微信小程序云开发之云函数详解
May 16 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
介绍一下28个JS常用数组方法
May 06 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
获取body标签的两种方法
2011/10/13 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Django 视图层(view)的使用
2018/11/09 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
经贸日语毕业生自荐信
2013/11/03 职场文书
小学生打架检讨书
2014/01/26 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
员工工作及收入证明
2014/10/28 职场文书
2019个人半年工作总结
2019/06/21 职场文书
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python
MySQL添加索引特点及优化问题
2022/07/23 MySQL