javascript实现随时变化着的背景颜色


Posted in Javascript onApril 02, 2015

很简单的一段背景颜色时刻发生变化的代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #dv {width: 100px;height: 100px;}
  </style>
</head>
<script>
  window.onload=function(){
    var oDv = document.getElementById('dv');
      oDv.style.backgroundColor='red'
    setInterval(function(){
      var arrRandNumber = [
          getRandomNumber(0,255),
          getRandomNumber(0,255),
          getRandomNumber(0,255)   
        ];
 
      oDv.style.backgroundColor='rgb('+arrRandNumber[0]+','+arrRandNumber[1]+','+arrRandNumber[2]+')'
         
        function getRandomNumber(rMin,rMax){
          var cha = rMax-rMin;
          var rand = Math.random();
          //return (rMin+Math.round(cha*rand))
        }
       
    },500)
     
    //alert(getRandomNumber(0,255))
  };
</script>
<body>
  <div id="dv"></div>
</body>
</html>

以上所述就是本文给大家分享的全部内容了,希望能够对大家学习使用javascript有所帮助。

Javascript 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
Vue实现购物车功能
Apr 27 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
javascript中call和apply的用法示例分析
Apr 02 #Javascript
原生js实现类似弹窗抖动效果
Apr 02 #Javascript
JavaScript显示表单内元素数量的方法
Apr 02 #Javascript
原创jQuery弹出层插件分享
Apr 02 #Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 #Javascript
Javascript获取表单名称(name)的方法
Apr 02 #Javascript
如何改进javascript代码的性能
Apr 02 #Javascript
You might like
基础的WordPress插件制作教程
2015/11/24 PHP
PHP递归的三种常用方式
2019/02/28 PHP
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
layui实现三级联动效果
2019/07/26 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
编写Python CGI脚本的教程
2015/06/29 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python返回数组/List长度的实例
2018/06/23 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python返回数组的索引实例
2019/11/28 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
python 等差数列末项计算方式
2020/05/03 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
函授自我鉴定
2013/11/06 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
软件售后服务方案
2014/05/29 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
弄虚作假心得体会
2014/09/10 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技