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 相关文章推荐
ExtJs使用IFrame的实现代码
Mar 24 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
vue实现登录拦截
Jun 29 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 版获取重定向后的地址(代码)
2013/06/26 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python xml解析实例详解
2016/11/14 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
python单例模式的多种实现方法
2019/07/26 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
主题酒店策划书
2014/01/28 职场文书
晨会主持词
2014/03/17 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
销售顾问工作计划书
2014/09/15 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
股权投资协议书
2016/03/23 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript