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 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
详解React的回调渲染模式
Sep 10 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制作新闻系统的思路
2006/10/09 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
PHP7多线程搭建教程
2017/04/21 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
python try 异常处理(史上最全)
2019/03/07 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
应届毕业生求职信范文
2013/12/18 职场文书
运动会邀请函范文
2014/01/31 职场文书
实验教师岗位职责
2014/02/13 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
电影建党伟业观后感
2015/06/01 职场文书
新闻通讯稿模板
2015/07/22 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python