移动的彩虹

最新推荐文章于 2023-03-13 14:40:57 发布
最新推荐文章于 2023-03-13 14:40:57 发布
阅读量1.6k 收藏
点赞数
分类专栏： JavaScript javascript入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dingxiaowei2013/article/details/8145761
版权

 <html>
 <head>
  <style>
   #bg{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#000;
    font-size:40px;
    color:#ccc;
    text-align:center;
   }
   
   #colorLine{
    width:400px;
   }

   #colorLine div{
    width:5px;
    height:2px;
    float:left;
    overflow:hidden;
   }
  </style>
 </head>
<body>
 <table id="bg">
  <tr height="300">
   <td>
    彩虹进度条
   </td>
  </tr>
  <tr  height="100">
   <td align=center>
    <div id="colorLine">
    </div>
   </td>
  </tr>
  <tr>
   <td></td>
  </tr>
 </table>
</body>
</html>

<script>
 var IE6 = navigator.userAgent.toLowerCase().indexOf('ie')+1 &&
/MSIE (5\.5|6\.)/i.test(navigator.userAgent);
 var CL = document.getElementById('colorLine');
 
 //创建彩虹条
 function makeCLine(){
  
  var r = 255;
  var g = 0;
  var b = 0;
  var step = 1;
  
  // 1. 增加绿色
  // 2. 减少红色
  // 3. 增加蓝色
  // 4. 减少绿色
  for(var i = 0; i < 80; i ++ ){
     var node = document.createElement('div');
     if(g > 255 && step == 1)
      step = 2;
     if(r < 0 && step == 2)
      step = 3;
     if(b > 255 && step == 3)
      step = 4;
     node.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
     CL.appendChild(node);
     if(step == 1)
     g += 14;
     if(step == 2)
     r -= 14;
     if(step == 3)
     b += 14;
     if(step == 4)
     g -= 14;
  }
  
  var oNodeL = IE6 ? CL.firstChild : CL.firstChild.nextSibling;
  var oNodeR = CL.lastChild;

  //制作两端渐变效果
     for(var i = 0; i < 20; i ++ ){
      oNodeL.style.cssText += ';opacity:'+ (0.05 * i) +
';filter:Alpha(Opacity=' + (0.05 * i * 100) +')';
      oNodeR.style.cssText += ';opacity:'+ (0.05 * i) +
';filter:Alpha(Opacity=' + (0.05 * i * 100) +')';

        oNodeL = oNodeL.nextSibling;
         oNodeR = oNodeR.previousSibling;
     }
 }


//移动彩虹条
function makeCLMove()
{
   var colors = [];
   for(var i = CL.lastChild; i; i = i.previousSibling)
   {
      if(i.style)
      colors.unshift(i.style.backgroundColor);
   }
   var flag = 1;
   var j = 0;
   setInterval(function()
   {
      var sTempColor = CL.lastChild.style.backgroundColor;
      var oNodeL = IE6 ? CL.firstChild : CL.firstChild.nextSibling;
      for(var i = CL.lastChild; i; i = i.previousSibling)
      {
         if(i.previousSibling && i.previousSibling.style)
         i.style.backgroundColor = i.previousSibling.style.backgroundColor;
      }
      if(j > (colors.length - 1))
       flag = 0;
      else if(j < 1)
       flag = 1;
      oNodeL.style.backgroundColor = flag ? colors[j ++ ] : colors[j -- ];
   }, 1);
}

makeCLine();
makeCLMove();
</script>

丁小未
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
彩虹退款插件源码下载！
11-24
介绍：针对三天以内的待处理和异常订单，登录用户前台可以手动...彩虹云商城版本号：V6.6 (Build 2051)三个文件分别移动到指定文件夹，并覆盖原文件：main.js -> /assets/jslist.php -> /userajax.user.php -> /user
css制作彩虹以及鼠标移入的效果
Dcripple的博客
05-06 202
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ width: 100px; height: 100px; background-color: white; position: relative; } .box_containe
Python绘制彩虹
m0_46688827的博客
03-13 2628
Python绘制彩虹和七彩跑道
彩虹形成原理
TaoShiLei的博客
04-15 5883
彩虹形成原理 本文摘自书籍《有趣的透镜》 对于彩虹形成原理的探索，先从折射引起的散射开始吧！最先解释了彩虹发生的基本原理的是,前面提到的笛卡儿和牛顿。 笛卡儿–光的折射 笛卡儿提到了光的折射，在笛卡儿·斯涅尔定律中提到：入射角的正弦值和折射角的正弦值之比，是一个定值，且和入射角的大小无关。如下图， 牛顿–光的色散 牛顿提到了光的色散，他发现无色的太阳光通过三棱镜后，出现从红到紫连续变化的光的彩带现象。 笛卡儿根据光的折射定律,从太阳光射入盛满水的球形玻璃这一实验入手,研究了彩虹的
linux开发板显示横向彩虹,如何使用Linux终端彩虹色
weixin_39613561的博客
05-16 1268
这篇文章是为那些谁相信Linux的命令行是枯燥，没有太多的乐趣。 要创建一个有趣的丰富多彩的设置lolcat 工具可以使用，这产生的彩虹色的Linux终端。 Lolcat公用事业工程为Linux，BSD和OSX这并置像类似cat命令。安装LolcatLolcat效用是Ruby编程语言的宝石之一。 因此，如果你想练习这个技巧，它是安装最新版本的Ruby是必不可少的。要安装Ruby使用以下命令 -$ ...
Linux ubantu 480 * 800 开发板显示移动的七色彩虹.c
08-20
Linux ubantu 480 * 800 开发板显示移动的七色彩虹
彩虹系统ios客户端.zip
01-20
硬件与设备：单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、存储设备、移动设备等 操作系统：LInux、IOS、树莓派、安卓开发、微机操作系统、网络操作系统、分布式操作系统等。此外，还有嵌入式...
js控制单选复选框（全选)
学无止境的专栏
03-17 2802
//获取单选按钮的选项值         function f1() {             //radio集合             var radios = document.getElementsByName("sex");             for (var i = 0; i                 if (radios[i].checked) {
导航效果
学无止境的专栏
04-06 1942
#navigation         {             position:absolute;             top:0px;left:0px;             margin:0px;padding:0px;             width:120px;list-style:none;             }          #navigatio
javascript语法
学无止境的专栏
03-16 1755
alert(new Date().toLocaleString());       varnum = new Number();       num =11;      alert(num);       var a= "a";      alert(a);       var b= 'b';      alert(b);       var a= "123";
js练习
学无止境的专栏
03-21 1742
//验证按钮是否为空 //        window.onload = function () { //            var inputs = document.getElementsByTagName("input"); //            for (var i = 0; i //                if (inputs[i].type == "text
javascript计算器小程序
学无止境的专栏
03-04 1657
javascript测试             var n1 = '', n2 = '';         var item1_flag = true; //默认设置为第一运算符         var opr_type = '+';  //运算符默认是加号         //设置初始值函数         function SetVal(item) {
node-v16.12.0-darwin-x64.tar.xz
最新发布
04-23
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
试用Dev Containers的示例项目-Go
04-23
计算机技术是指评价计算机系统的各种知识和技能的总称。它涵盖了计算机硬件、软件、网络和信息安全等方面。计算机技术的发展使我们能够进行高效的数据处理、信息存储和传输。现代计算机技术包括操作系统、数据库管理、编程语言、算法设计等。同时，人工智能、云计算和大数据等新兴技术也在不断推动计算机技术的进步。计算机技术的应用广泛，涵盖了各个领域，如商业、医疗、教育和娱乐等。随着计算机技术的不断革新，我们可以更加高效地实现预期自动化、标准化
NTsky新闻发布v1.0测试版(提供JavaBean).zip
04-23
### 内容概要： 《NTsky新闻发布v1.0测试版》是一款基于 Java 开发的新闻发布系统的测试版本，旨在为新闻机构和媒体提供一个简单易用的新闻发布平台。该系统具有基本的新闻发布和管理功能，包括新闻分类、新闻编辑、新闻发布等核心功能。此外，该版本还提供了 JavaBean，使开发人员能够方便地将系统集成到自己的项目中，快速实现新闻发布的功能。 ### 适用人群： 本测试版本适用于新闻机构、媒体从业者以及Java开发人员。如果你是一家新闻机构或媒体，希望拥有一个简单易用的新闻发布平台，方便快捷地发布和管理新闻，那么这个测试版本将为你提供一个初步的体验。同时，如果你是一名Java开发人员，希望学习和掌握新闻发布系统的开发技术，并且对新闻行业有一定的了解，那么通过这个测试版本，你可以获取到一些JavaBean，并且可以参考系统的设计和实现，为你的项目开发提供参考和借鉴。无论是从业务需求还是技术学习的角度，该测试版本都将为你提供一定的帮助和支持。
JavaScript介绍.zip
04-23
javascript，JavaScript 最初由 Netscape 公司的 Brendan Eich 在 1995 年开发，用于 Netscape Navigator 浏览器。随着时间的推移，JavaScript 成为了网页开发中不可或缺的一部分，并且其应用范围已经远远超出了浏览器，成为了全栈开发的重要工具。
pythonturtle绘制彩虹
07-28
接下来，我们将画笔移动到起始位置，并开始绘制彩虹的弧形。每次绘制一个弧形后，画笔会向右转动一定角度，以便绘制下一个弧形。最后，我们隐藏了画笔，并且通过点击窗口来退出程序。 运行这段代码，你将看到一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值