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代码的方法
Jul 24 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
Angular2入门--架构总览
Mar 29 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
快速解决element的autofocus失效问题
Sep 08 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网页标题中文乱码的有效解决方法
2014/03/05 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
Python执行时间的计算方法小结
2017/03/17 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
党小组考察意见
2015/06/02 职场文书
身份证丢失证明
2015/06/19 职场文书
建筑工程催款函
2015/06/24 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL