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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
vue过滤器用法实例分析
Mar 15 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 接口类与抽象类的实际作用
2009/11/26 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
python读写二进制文件的方法
2015/05/09 Python
Python中return语句用法实例分析
2015/08/04 Python
在Python中移动目录结构的方法
2016/01/31 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python验证码图片处理(二值化)
2019/11/01 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
行政管理专业推荐信
2013/11/02 职场文书
文体活动实施方案
2014/03/27 职场文书
股指期货心得体会
2014/09/10 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
毕业生评语大全
2015/01/04 职场文书
医德医风个人总结
2015/02/28 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
五年级作文之成长
2019/09/16 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
详细介绍python类及类的用法
2021/05/31 Python