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之更有效率的字符串替换
Aug 02 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
JS中表单的使用小结
Jan 11 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
javascript去除空格方法小结
May 21 Javascript
js文字横向滚动特效
Nov 11 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 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 判断数组是几维数组
2013/03/20 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php中filter_input函数用法分析
2014/11/15 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
php处理带有中文URL的方法
2016/07/11 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
python绘制双柱形图代码实例
2017/12/14 Python
Python requests模块实例用法
2019/02/11 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python随机数函数代码实例解析
2020/02/09 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
python urllib和urllib3知识点总结
2021/02/08 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
电子信息工程专业推荐信
2014/02/14 职场文书
学校社会实践活动总结
2014/07/03 职场文书
暑期培训心得体会
2014/09/02 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
离职感谢信
2015/01/21 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers