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 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
JavaScript网页定位详解
Jan 13 Javascript
JS扩展方法实例分析
Apr 15 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 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
discuz7 phpMysql操作类
2009/06/21 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
python实现隐马尔科夫模型HMM
2018/03/25 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python文件选择对话框的操作方法
2019/06/27 Python
python判断自身是否正在运行的方法
2019/08/08 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
医护人员英文求职信范文
2013/11/26 职场文书
四议两公开实施方案
2014/03/28 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
公司员工离职感言
2015/08/03 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记