给一个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. PostgreSQL没有redo log multiplexing

    与Oracle不同的是,PostgreSQL中压根没有这种的东西. 若以,如果因为写在线WAL文件是发生磁盘I/O错误,那么数据库系统就启动不了了. 解决的办法,我想,在PostgreSQL中,如论如 ...

  2. Codeforces Gym 100803G Flipping Parentheses 线段树+二分

    Flipping Parentheses 题目连接: http://codeforces.com/gym/100803/attachments Description A string consist ...

  3. 分享 Java微信开发SDK

    分享 Java微信开发SDK •发布于 4周前  •作者 朋也  •432 次浏览  •最后一次编辑是 2周前  •来自 分享 给大家分享两个java开发微信公众号的sdk jfinal-weixin ...

  4. 关于pushState

    window.pushState({}, "title", "/index.html");---------------->改变URL的值,但是并不刷新 ...

  5. [Angular2 Router] Use Params from Angular 2 Routes Inside of Components

    Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. ...

  6. 更换VS2012序列号的方法

    转自:http://blog.sina.com.cn/s/blog_58c506600101ja49.html 今天不小心把还在试用期内的VS2012 Ultimate填上盗版Key激活了……找遍了菜 ...

  7. xcode中没有autoSizing的设置

    转自:http://blog.sina.com.cn/s/blog_954bb2f001016oyx.html 学习Xcode的iOS编程时,可能会发现Autosizing Control不见了,其原 ...

  8. Python Counter()计数工具

    Table of Contents 1. class collections.Counter([iterable-or-mapping]) 1.1. 例子 1.2. 使用实例 2. To Be Con ...

  9. linux安装问题

    java: cannot execute binary file问题 主要原因是 linux系统是32位的,jdk版本是64位的. 补充知识: 1.查看linux位数: #uname -a 如果有x8 ...

  10. How to make remote key fob for 2002 BMW 3 series

    Here share with you on how to make remote key fob for 2002 BMW 3 series: Method 1: 1. Working within ...