渐变背景效果

来源：互联网发布：杭州高达软件编辑：程序博客网时间：2024/05/17 06:08

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

<!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>

0 0