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关于select的相关操作说明
Jan 13 Javascript
JS request函数 用来获取url参数
May 17 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
vue 获取url里参数的两种方法小结
Nov 12 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中日期加减法运算实现代码
2011/12/08 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python实现进程间通信简单实例
2014/07/23 Python
Python字符串中查找子串小技巧
2015/04/10 Python
python中while循环语句用法简单实例
2015/05/07 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
python psutil库安装教程
2018/03/19 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Mac安装python3的方法步骤
2019/08/09 Python
python入门之基础语法学习笔记
2020/02/08 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
珍珠鸟教学反思
2014/02/01 职场文书
社区母亲节活动总结
2015/02/10 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript