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 相关文章推荐
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
javascript的内存管理详解
Aug 07 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
python实现图像全景拼接
2020/03/27 Python
python小白切忌乱用表达式
2020/05/29 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Python实现区域填充的示例代码
2021/02/03 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
调查研究项目计划书
2014/04/29 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技
Vue操作Storage本地化存储
2022/04/29 Vue.js