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参数的小问题
Mar 02 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
详解Python编程中包的概念与管理
2015/10/16 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
python实现SOM算法
2018/02/23 Python
python多线程同步实例教程
2019/08/11 Python
python TCP包注入方式
2020/05/05 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
七年级音乐教学反思
2014/01/26 职场文书
网络编辑求职信
2014/04/30 职场文书
爱护公共设施标语
2014/06/24 职场文书
物流专业求职信
2014/06/30 职场文书
咖啡店创业计划书
2014/08/15 职场文书
社区务虚会发言材料
2014/10/20 职场文书
同学聚会祝酒词
2015/08/10 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python