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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
js+canvas实现刮刮奖功能
Sep 13 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生成缩略图的函数代码(修改版)
2011/01/18 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
使用索引有什么好处
2016/07/27 面试题
商得四方公司面试题(gid+)
2014/04/30 面试题
毕业生文员求职信
2013/11/03 职场文书
小组合作学习反思
2014/02/18 职场文书
红色故事演讲稿
2014/05/22 职场文书
2014年店长工作总结
2014/11/17 职场文书
525心理健康活动总结
2015/05/08 职场文书
单位提档介绍信
2015/10/22 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers