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

 更新时间:2015年04月02日 11:24:07   投稿:hebedich  
这篇文章主要介绍了javascript实现随时变化着的背景颜色的方法,非常的简单实用,有需要的小伙伴可以直接拿走。

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

<!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有所帮助。

相关文章

  • js中addEventListener()与removeEventListener()用法案例分析

    js中addEventListener()与removeEventListener()用法案例分析

    这篇文章主要介绍了js中addEventListener()与removeEventListener()用法,结合实例形式分析了js中addEventListener()与removeEventListener()基本功能、用法与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • JS调用安卓手机摄像头扫描二维码

    JS调用安卓手机摄像头扫描二维码

    这篇文章主要为大家详细介绍了JS调用安卓手机摄像头扫描二维码,并用JS解析二维码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • JS实现仿百度输入框自动匹配功能的示例代码

    JS实现仿百度输入框自动匹配功能的示例代码

    本篇文章主要是对JS实现仿百度输入框自动匹配功能的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • js实现简单计算器

    js实现简单计算器

    一个简洁的网页JS计算器,附详细代码释义。通过下边的效果演示就可以看到,这是一个挺小的js网页计算器,界面美化的我想还是不错的,毕竟在没有使用任何图片修饰的情况下,很好看,而且功能挺实用,可以完成基本的数学算数运算。
    2015-11-11
  • js纯数字逐一停止显示效果的实现代码

    js纯数字逐一停止显示效果的实现代码

    下面小编就为大家带来一篇js纯数字逐一停止显示效果的实现代码。小编觉得非常不错。现在分享给大家。给大家一个参考
    2016-03-03
  • javascript函数的call、apply和bind的原理及作用详解

    javascript函数的call、apply和bind的原理及作用详解

    javascript函数的call、apply和bind 本质是用来实现继承的,专业点说法就是改变函数体内部this的指向,当一个对象没有某个功能时,就可以用这3个来从有相关功能的对象里借用过来,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • ES6 如何改变JS内置行为的代理与反射

    ES6 如何改变JS内置行为的代理与反射

    这篇文章主要介绍了ES6 如何改变JS内置行为的代理与反射,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • JavaScript函数的使用详解

    JavaScript函数的使用详解

    这篇文章主要为大家介绍了JavaScript函数的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • uni-app中弹窗的使用与自定义弹窗

    uni-app中弹窗的使用与自定义弹窗

    众所周知弹窗在我们实际开发场景中是非常常用的,最近在工作中就遇到了相关需求,所以下面这篇文章主要给大家介绍了关于uni-app中弹窗使用与自定义弹窗的相关资料,需要的朋友可以参考下
    2022-04-04
  • js实现文章目录索引导航(table of content)

    js实现文章目录索引导航(table of content)

    这篇文章主要介绍了js实现文章目录索引导航(table of content),需要的朋友可以参考下
    2020-05-05

最新评论