给一个div添加颜色,使其产生渐变效果,我们设置index为变量,使用setInterval函数方法改变rgb颜色值。

window.onload = function(){
var boxDom = document.getElementById("box");
boxDom.style.width = "200px";
boxDom.style.height = "200px"
var index = 0;
setInterval(function(){
if(index ==255){
index=0;
boxDom.style.background = "rgb(255,255,255)";
}else{
boxDom.style.background = "rgb("+index+","+index+","+index+")";
index++;
}
},1000/30);
};

我们来直观效果图:

 

JavaScript之动画3的更多相关文章

  1. JavaScript实现动画效果

    说到JavaScript实现动画效果,不得不想到两个函数,setTimeout和setInterval. setTimeout的常用的使用方法为 setTimeout(callback, delay) ...

  2. 原生JavaScript中动画与特效的实现原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  3. javascript帧动画

    前面的话 帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. ...

  4. javascript之动画特效

    JavaScript的动画用的最多的3个api就是setInterval().setTimeout()和requestAnimationFrame()

  5. "Javascript高性能动画与页面渲染"笔记

    前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗 ...

  6. Javascript高性能动画与页面渲染

    转自:http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering No setT ...

  7. JavaScript之动画2

    在JavaScript动画中,我们调用setInterval函数(setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象),值得注意的是:setInterval它设置的时 ...

  8. Javascript - Jquery - 动画

    动画(Dynamic) JQuery动画必须是在标准文档下使用 否则可能引起动画时抖动或其它不可预知的结果,标准文档格式:   <!DOCTYPE html PUBLIC "-//W3 ...

  9. [转]Javascript高性能动画与页面渲染

    No setTimeout, No setInterval 作者 李光毅 发布于 2014年4月30日 如果你不得不使用setTimeout或者setInterval来实现动画,那么原因只能是你需要精 ...

  10. JavaScript进阶【五】利用JavaScript实现动画的基本思路

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. windows无法搜索新更新 80072ee2

      http://windows.microsoft.com/zh-cn/windows/windows-update-error-80072ee2#1TC=windows-7    

  2. 一个小巧的C++Log输出到文件类 (转)

      http://blog.csdn.net/dpsying/article/details/17122739 有时候需要输出一些程序运行的信息,供我们不需要调试就可以直接查看程序运行状态.所以我们需 ...

  3. opencv官网

    http://wiki.opencv.org.cn/index.php/Template:Doc

  4. MeetMe

  5. 在XAF应用程序使用现有的数据库?

    https://documentation.devexpress.com/#Xaf/CustomDocument3061

  6. 剑指 offer set 6 打印从 1 到 N 的所有数

    总结 1. 求全排列的变形题, 有些隐晦, 没看出来

  7. c#给用户控件添加事件处理程序

    1.首先在usercontrol后台添加如下代码: public partial class MyControl: UserControl { //添加事件代理       public event ...

  8. 使用boost的deadline_timer实现一个异步定时器

    概述 最近在工作上需要用到定时器,然后看到boost里面的deadline_timer可以实现一个定时器,所以就直接将其封装成了ATimer类,方便使用,ATimer有以下优点: 可以支持纳秒.毫秒. ...

  9. 小白日记47:kali渗透测试之Web渗透-XSS(一)

    XSS [推荐书籍:XSS跨站脚本攻击剖析与防御] xss表示Cross Site Scripting(跨站脚本攻击),它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/ ...

  10. spring 学习总结

    前几天,一直在学spring,然后又学习spring mvc ,再回过头去看spring,本来不是特别熟悉,竟然几乎全部忘记了.于是,立刻写这篇博客来总结一下.这是我写的其中一个程序,大概的逻辑流程. ...