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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
web 页面分页打印的实现
2009/06/22 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
简单实现python收发邮件功能
2018/01/05 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Django静态文件加载失败解决方案
2020/08/26 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
初中生物教学反思
2014/01/10 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
申论倡议书范文
2014/05/13 职场文书
学校宣传标语
2014/06/18 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书