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提交表单 Form.js官方插件介绍
Mar 01 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
BootStrap中
Dec 10 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
JS实现手风琴特效
Nov 08 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.ini中文版
2006/10/09 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
javascript版2048小游戏
2015/03/18 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
python中redis的安装和使用
2016/12/04 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python中if及if-else如何使用
2020/06/02 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
毕业生自荐书模版
2014/01/04 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
文明家庭事迹材料
2014/12/20 职场文书
消费者理赔投诉书
2015/07/02 职场文书
七年级英语教学反思
2016/02/15 职场文书
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL