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继承的实现
Oct 24 Javascript
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
原生JS实现烟花效果
Mar 10 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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/06/06 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
PHP微商城开源代码实例
2019/03/27 PHP
javascript 二进制运算技巧解析
2012/11/27 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
javascript基本语法
2016/05/31 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
python实现指定字符串补全空格的方法
2015/04/30 Python
python3处理含有中文的url方法
2018/05/10 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
flask应用部署到服务器的方法
2019/07/12 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
逻辑链路控制协议
2016/10/01 面试题
Python的两道面试题
2013/06/29 面试题
高一物理教学反思
2014/01/24 职场文书
还款承诺书范文
2014/05/20 职场文书
志愿者个人总结
2015/03/03 职场文书
考试没考好检讨书
2015/05/06 职场文书
繁星春水读书笔记
2015/06/30 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS