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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
JavaScript 中的事件教程
Apr 05 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
JsChart组件使用详解
Mar 04 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
js实现电灯开关效果
Jan 19 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
基于pear auth实现登录验证
2010/02/26 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php实现网站留言板功能
2015/11/04 PHP
js的2种继承方式详解
2014/03/04 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
机器学习实战之knn算法pandas
2019/06/22 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
骨干教师考核方案
2014/05/09 职场文书
教师学期个人总结
2015/02/11 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
经典祝酒词大全
2015/08/12 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
导游词之安徽巢湖
2019/12/26 职场文书