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 相关文章推荐
网上抓的一个特效
May 11 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
js表头排序实现方法
Jan 16 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
微信小程序入门教程
Nov 18 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP大文件分块上传功能实例详解
2019/07/22 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
青年联谊会致辞
2015/07/31 职场文书
导游词之清晏园
2019/11/22 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技