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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
layui 弹出删除确认界面的实例
Sep 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
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
php截取视频指定帧为图片
2016/05/16 PHP
php while循环控制的简单实例
2016/05/30 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
offsetParent 算法分析
2010/04/05 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
浅析Python数据处理
2018/05/02 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
简单的Python调度器Schedule详解
2019/08/30 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
python中pop()函数的语法与实例
2020/12/01 Python
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
学校大课间活动方案
2014/01/30 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
会计求职信怎么写
2015/03/20 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
培训心得体会怎么写
2016/01/25 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android