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实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
FireFox JavaScript全局Event对象
Jun 14 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
jQuery each函数源码分析
May 25 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
TypeScript高级用法的知识点汇总
Dec 17 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
20招让你的Python飞起来!
2016/09/27 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
设置python3为默认python的方法
2018/10/31 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
基于python中__add__函数的用法
2019/11/25 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
董事长职责范文
2013/11/08 职场文书
优秀中专生推荐信
2013/11/17 职场文书
租房协议书范文
2014/08/20 职场文书
企业公益活动策划方案
2014/08/24 职场文书
免职通知
2015/04/23 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
Python软件包安装的三种常见方法
2022/07/07 Python