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非法字符过滤代码(骂人的话等等)
May 26 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
在小程序开发中使用npm的方法
Oct 17 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
node.js事件轮询机制原理知识点
Dec 22 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
快速了解Python相对导入
2018/01/12 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Python中的Cookie模块如何使用
2020/06/04 Python
详解pandas映射与数据转换
2021/01/22 Python
保密普查工作实施方案
2014/02/25 职场文书
大家访活动实施方案
2014/03/10 职场文书
新品发布会主持词
2014/04/02 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
教师创先争优承诺书
2015/04/27 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js