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基础资料整理3 正则
Dec 06 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
js中typeof的用法汇总
Dec 12 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
JavaScript中的Function函数
Aug 27 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 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
推荐文章系统(一)
2006/10/09 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP微信API接口类
2016/08/22 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
js数字转换为float,取N位小数
2014/02/08 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
对于js垃圾回收机制的理解
2017/09/14 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
原生js实现购物车功能
2020/09/23 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[05:05]第三天的dota2
2013/07/29 DOTA
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
报关报检委托书
2014/04/08 职场文书
车间核算员岗位职责
2014/07/01 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL