自动更换图片或背景颜色

最新推荐文章于 2022-10-18 15:38:39 发布

manhoho

最新推荐文章于 2022-10-18 15:38:39 发布

阅读量671

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_45742386/article/details/102668792

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

自动更换背景颜色

可以把背景颜色换成图片，从而实现图片的自动更换
下面是效果展示：
在这里插入图片描述

下面就是你们所关心的代码了
replace.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自动替换</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/replace.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/replace.css" type="text/css">
</head>
<body>
<div class="blue"></div>
<input type="button" value="停止"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="开始"/>
</body>
</html>

replace.css

.blue {
    width: 200px;
    height: 200px;
    background-color: blue;
}

.red {
    width: 200px;
    height: 200px;
    background-color: red;
}

replace.js

1//setInterval() 间隔指定的毫秒数不停地执行指定的代码
var interval = setInterval(function () {
    //toggleClass()如果存在（不存在）就删除（添加）一个类。
    $("div").toggleClass("red");
}, 1000);
$(function () {
    var i = false;
    $(":input:first").on("click", function () {
        if (i == false) {
            //clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
            clearInterval(interval);
            i = true;
        } else {
            alert("已经点击停止了！！！")
        }
    });

    $(":input:odd").on("click", function () {
        if (i) {
            interval = setInterval(function () {
                //toggleClass()如果存在（不存在）就删除（添加）一个类。
                $("div").toggleClass("red");
                i = false;
            }, 1000);
        } else {
            alert("已经点击开始了！！！")
        }
    });
});