JavaScript实现彩虹文字效果的方法


Posted in Javascript onApril 16, 2015

本文实例讲述了JavaScript实现彩虹文字效果的方法。分享给大家供大家参考。具体如下:

<HTML>
<HEAD>
<TITLE>Rainbow Text</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin hide from old browsers
function createHexArray(n)
{
 this.length = n;
 for (var i = 1; i <= n; i++)
 this[i] = i - 1;
 this[11] = "A";
 this[12] = "B";
 this[13] = "C";
 this[14] = "D";
 this[15] = "E";
 this[16] = "F";
 return this;
}
hx = new createHexArray(16);
function convertToHex(x)
{
 if (x < 17)
  x = 16;
 var high = x / 16;
 var s = high+"";
 s = s.substring(0, 2);
 high = parseInt(s, 10);
 var left = hx[high + 1];
 var low = x - high * 16;
 if (low < 1)
  low = 1;
 s = low + "";
 s = s.substring(0, 2);
 low = parseInt(s, 10);
 var right = hx[low + 1];
 var string = left + "" + right;
 return string;
}
function makeRainbow(text)
{
 text = text.substring(0, text.length);
 color_d1 = 255;
 mul = color_d1 / text.length;
 for(var i = 0; i < text.length; i++) {
  color_d1 = 255*Math.sin(i / (text.length / 3));
  color_h1 = convertToHex(color_d1);
  color_d2 = mul * i;
  color_h2 = convertToHex(color_d2);
  k = text.length;
  j = k - i;
  if (j < 0)
   j = 0;
  color_d3 = mul * j;
  color_h3 = convertToHex(color_d3);
  document.write("<FONT COLOR=\"#" + color_h3 + color_h1 + 
  color_h2 + "\">" + text.substring(i, i + 1) + "</FONT>");
 }
}
// End hide from old browsers -->
</script>
</HEAD>
<body bgcolor="#FFFFCC">
<center>
<strong>
<font size=6>
<script>
<!--
// change to your own text ...
makeRainbow("Welcome to Boulder City Nevada");
document.write("<br>");
makeRainbow("The best dam city in the USA");
// -->
</script>
</font>
</strong>
</center>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Prototype ObjectRange对象学习
Jul 19 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 #Javascript
JQuery跳出each循环的方法
Apr 16 #Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 #Javascript
jQuery Ajax中的事件详细介绍
Apr 16 #Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 #Javascript
JavaScript实现随机替换图片的方法
Apr 16 #Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 #Javascript
You might like
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
javascript插入样式实现代码
2012/02/22 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
python实现数通设备端口监控示例
2014/04/02 Python
从零学Python之入门(三)序列
2014/05/25 Python
Python切片工具pillow用法示例
2018/03/30 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
大专生自荐信
2013/10/04 职场文书
职工趣味运动会方案
2014/02/10 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
提拔干部考察材料
2014/05/26 职场文书
村创先争优活动总结
2014/08/28 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python