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

最新推荐文章于 2023-04-18 10:26:39 发布

weixin_33963594

最新推荐文章于 2023-04-18 10:26:39 发布

阅读量7k

点赞数 2

文章标签： javascript 前端 java ViewUI

原文链接：https://juejin.im/post/5b5acb085188251af121f646

版权

要求：网页的背景颜色随着时间的变化而变化。间隔为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>
复制代码

weixin_33963594

关注

2
点赞
踩
26

收藏

觉得还不错? 一键收藏
5
评论
JavaScript实现背景颜色随时间变化

要求：网页的背景颜色随着时间的变化而变化。间隔为1s，即每一秒一个色值。实现：用window.onload加载函数(onload 事件会在页面或图像加载完成后立即发生。)用随机数产生rgb数值window.setTimeOut()设置间隔时间ps: document.body.bgColor貌似不能用rgb()的形式赋值唉放代码：&lt;!DOCTYPE html&gt;&lt...
复制链接

扫一扫