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 相关文章推荐
splice slice区别
Oct 09 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
javascript操作excel生成报表示例
May 08 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
Django 中 cookie的使用
2017/08/17 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
详解使用nvm安装node.js
2017/07/18 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
python读写ini文件示例(python读写文件)
2014/03/25 Python
Python小进度条显示代码
2019/03/05 Python
python仿抖音表白神器
2019/04/08 Python
python如何实现代码检查
2019/06/28 Python
Python面向对象编程基础实例分析
2020/01/17 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
医院总经理职责
2013/12/26 职场文书
环保建议书作文
2014/03/12 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
影视后期实训报告
2014/11/05 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
运动会表扬稿范文
2015/05/05 职场文书
导师鉴定意见
2015/06/05 职场文书
老兵退伍感言
2015/08/03 职场文书
python基础之模块的导入
2021/10/24 Python