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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
理解JS事件循环
Jan 07 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
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
德生9700DX电路分析
2021/03/02 无线电
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP速成大法
2015/01/30 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Python configparser模块操作代码实例
2020/06/08 Python
python中如何写类
2020/06/29 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis