JavaScript实现背景颜色随时间变化

2,045 阅读1分钟

要求:网页的背景颜色随着时间的变化而变化。间隔为1s,即每一秒一个色值。

实现:

  • 用window.onload加载函数(onload 事件会在页面或图像加载完成后立即发生。)
  • 用随机数产生rgb数值
  • window.setTimeOut()设置间隔时间
    ps: document.body.bgColor貌似不能用rgb()的形式赋值唉

放代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JavaScript实现背景颜色随时间变化</title>
    <script type="text/javascript">
        //加载函数 
        window.onload=function(){ 
            changeColor();
        }
        //颜色变化函数
        function changeColor(){
            //产生rgb的值
            var r=Math.floor(Math.random()*255);
            var g=Math.floor(Math.random()*255);
            var b=Math.floor(Math.random()*255);
            var rgb=r.toString(16)+g.toString(16)+b.toString(16); 
            //toString(radix) 把数字转化为radix(取值范围2~36)进制值表示的字符串
            document.body.bgColor="#"+rgb;
            window.setTimeout("changeColor()",1000);
            //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
        }
        </script>
</head>
<body>
    
</body>
</html>