渐变背景效果

最新推荐文章于 2023-10-07 23:25:32 发布

原创最新推荐文章于 2023-10-07 23:25:32 发布 · 713 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#杭州 #javascript #前端

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何通过JavaScript实现网页背景颜色的渐变效果。用户可以点击开始按钮启动渐变动画，当点击停止时，背景将变为黑色。内容涉及HTML和JavaScript的基本应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击开始按钮实现背景颜色的渐变，点击停止背景变为黑色

<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>背景渐变效果</title>
    <script>
        var color = 999999;
        var woot = 0;
        function stopLoop(){
            document.bgColor = '#000000';
            clearTimeout(loopID);
        }
        function loopBackground(){
            if(color > 0){
                document.bgColor = '#'+color;
                color -= 111111;
                loopID = setTimeout("loopBackground()",1000);
            }else{
                document.bgColor = '#000000'
                woot += 10;
                color = 999999;
                color -= woot;
                loopID = setTimeout("loopBackground()",1000);
            }
        }
    </script>
</head>
<body>
    <input type="button" value="start" id="button1" onclick="loopBackground()">
    <input type="button" value="stop" id="button2" onclick="stopLoop()">
</body>
</html>