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 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
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
第一个无线电台是由谁发明的
2021/03/01 无线电
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python对视频画框标记后保存的方法
2018/12/07 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
Python使用Matlab命令过程解析
2020/06/04 Python
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
节能减排倡议书
2014/04/15 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js