标签 HTMl 下的文章

利用js实现html闪烁蹦迪


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Annuo</title>
<script crossorigin="anonymous" integrity="sha384-mlceH9HlqLp7GMKHrj5Ara1+LvdTZVMx4S1U43/NxCvAkzIo8WJ0FE7duLel3wVo" src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
    <style>
        .red {
            width: 1366px;
            height: 768px;
            background-color: red;
        }

        .blue {
            width: 1366px;
            height: 768px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="red"></div>
<!-- <input type="button" id="stop" value="停止"/>
<input type="button" id="continue" value="继续"/> -->

<script type="text/javascript">
    var interval = null;
    $(function () {

        interval = setInterval(function () {

            $("div").toggleClass("blue");
        }, 100);

        $("#stop").on("click", function () {
            clearInterval(interval);
        });

        $("#continue").on("click", function () {
            interval = setInterval(function () {
                $("div").toggleClass("blue");
            }, 100);
        });
    });
</script>
</body>
<html>