javascript 点击button更换背景图片如何实现？

Posted 2023-04-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 点击button更换背景图片如何实现？相关的知识，希望对你有一定的参考价值。

原来body的颜色是#ccc,通过点击一个按钮改变背景颜色，还有一个按钮是默认颜色，设置有效期24小时

1、首先需要一个作为背景的div，并给出ID或者class属性
2、当点击按钮时，将其属性进行一个背景添加，即可更换背景图片参考技术A <html>
    <head>
            <script type="text/javascript">
                setTimeout("validate()",24*60*60*1000);
                    function firstColor()
                        document.body.bgColor ="#ccc";

                    function changeColor()
                        document.body.bgColor = "#f0f0f0";

                    function validate()
                        var cbutton = document.getElementById("changeColor");
                        var fbutton = document.getElementById("firstColor");
                        cbutton.disabled = true;
                        fbutton.disabled = true;

                </script>
        </head>
    <body bgcolor="#ccc">
        <button id="changeColor" onclick="changeColor()">改变颜色</button>
        <button id="firstColor" onclick="firstColor()">默认颜色</button>
        </body>
    </html>

追问

能不能加个淡化效果

本回答被提问者采纳

启用setInterval()定时器更换背景

关于setInterval定时器的一个小实例，点击换背景按钮，让其每一秒换一个背景，点击停止就让其停止。

html代码
<input id="btn1" type="button" value="开启换背景"/>
<input id="btn2" type="button" value="停止换背景"/>
<div class="box"></div>

css

.box{width:500px;height:500px;border:1px solid #f5f5f5}

js代码

<script>
    window.onload=function(){
        var aBtn1=document.getElementById("btn1");
        var aBtn2=document.getElementById("btn2");
        var oBox=document.getElementsByClassName("box")[0];
        var arrUrl=["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg"];
        var num=0;
        var timer=null;
        function fn(){
            oBox.style.background=‘url("‘+arrUrl[num]+‘")‘;
            num++;
            num%=arrUrl.length;
        }
        aBtn1.onclick=function(){
            clearInterval(timer);//快速点击按钮时，先清除定时器，然后再执行就不会使定时器崩溃
            timer =  setInterval(fn,1000);
        };
        aBtn2.onclick=function(){
            clearInterval(timer);
        }
    };
</script>

注意：关于setInterval还有就是这里在调用fn函数时候不需要传参所以后面不要加括号。当然这是网盘认为的原因，也欢迎各大神给我指出问题。

今天就到这里！

以上是关于javascript 点击button更换背景图片如何实现？的主要内容，如果未能解决你的问题，请参考以下文章

（Android学习）点击按钮Button，更换背景颜色

Android中的Button怎么在点击更换背景？点击后又恢复原来的背景？

JavaScript基础显示/隐藏效果点击图片,DIV显示,图片更换,点击更换后的图片,DIV隐藏

启用setInterval()定时器更换背景

Javascript点击更换背景

JS点击更换网页背景颜色

javascript 点击button更换背景图片 如何实现？

启用setInterval()定时器更换背景

javascript 点击button更换背景图片如何实现？