给一个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. php safe mode bypass all <转>

    PHP safe mode bypass from 4.x to 5.x all. Functions: * mb_send_mail* curl_init* imap_open* mail* ion ...

  2. Codeforces Round #337 (Div. 2) D. Vika and Segments 线段树扫描线

    D. Vika and Segments 题目连接: http://www.codeforces.com/contest/610/problem/D Description Vika has an i ...

  3. Codeforces Round #311 (Div. 2) C. Arthur and Table Multiset

    C. Arthur and Table Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/557/p ...

  4. poj 1941 The Sierpinski Fractal 递归

    //poj 1941 //sep9 #include <iostream> using namespace std; const int maxW=2048; const int maxH ...

  5. LintCode 子树

    easy 子树 19% 通过 有两个不同大小的二进制树: T1 有上百万的节点: T2 有好几百的节点.请设计一种算法.判定 T2 是否为 T1的子树. 您在真实的面试中是否遇到过这个题? Yes 例 ...

  6. HTML之一字符集

    ASCII字符集 ISO字符集 GBK等等. 1>首先,说一说为什么要设置html文件的字符集 如果不指定的话,浏览器会使用本地操作系统的字符集,那么,如果你的应用需要支持多国语言的话,就会有问 ...

  7. 可以将一些配置信息已json格式存在数据库中读取的时候序列化。

    public partial class json序列化 : System.Web.UI.Page    {        protected void Page_Load(object sender ...

  8. 判断浏览器是否IE10

    项目中做打印预览时,在IE10中出现兼容性问题,需要针对IE10做特殊处理. 在网上搜了一下,有三种方法可以实现 一.特性检测:@cc_on <!--[if !IE]><!--> ...

  9. 最少javascript代码完成一个2048游戏

    原生javascript代码写的2048游戏.建议在谷歌浏览器下跑.'WASD'控制方向.演示地址请移步:http://runjs.cn/detail/bp8baf8b 直接贴代码~ html: &l ...

  10. IOS 开发过程中的 消息通知 小红点

    大致分为两种方法:系统方法和自定义方法 系统方法: 系统自带的方法可以显示具体的消息数量,这个就是苹果设备常见的小红点.实现思路如下: NSArray *tabBarItems = self.navi ...