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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
JavaScript中return false的用法
Mar 12 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
vue中组件的3种使用方式详解
Mar 23 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP伪造referer实例代码
2008/09/20 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
python版DDOS攻击脚本
2019/06/12 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Django之路由层的实现
2019/09/09 Python
编辑个人求职信范文
2013/09/21 职场文书
应届大学生求职信
2014/07/20 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
公司经营目标责任书
2015/01/29 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
python 爬取天气网卫星图片
2021/06/07 Python
JavaScript实例 ODO List分析
2022/01/22 Javascript
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
python前后端自定义分页器
2022/04/13 Python