给一个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. On-board diagnostics connector SAE J1962

    http://en.wikipedia.org/wiki/On-board_diagnostics#Standard_interfaces OBD-II diagnostic connector Th ...

  2. Leetcode: Longest Palindromic Substring. java

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  3. [转]AsyncDisplayKit 教程:达到 60 FPS 的滚动帧率

    [原文:https://github.com/nixzhu/dev-blog/blob/master/2014-11-22-asyncdisplaykit-tutorial-achieving-60- ...

  4. Codeforces Gym 100015H Hidden Code 暴力

    Hidden Code 题目连接: http://codeforces.com/gym/100015/attachments Description It's time to put your hac ...

  5. 使用Underscore.js的template将Backbone.js的js代码和html代码分离

    这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去 ...

  6. [Ramda] Filter, Reject and Partition

    We'll learn how to get a subset of an array by specifying items to include with filter, or items to ...

  7. iOS开发——实用技术OC篇&简单抽屉效果的实现

    简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一 ...

  8. C++ Qt 访问权限总结

    总结:C++的访问修饰符的作用是以类为单位,而不是以对象为单位. 通俗的讲,同类的对象间可以“互相访问”对方的数据成员,只不过访问途径不是直接访问. 步骤是:通过一个对象调用其public成员函数,此 ...

  9. php连接数据库时候的字符集设置

    最好的办法:设置mysql服务器的字符集,当然也可以通过mysql提供的api来设置运行时的字符集 Ideally a proper character set will be set at the ...

  10. Python Counter()计数工具

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