如何在 onclick 事件后加载函数

How to load a function after an onclick event

本文关键字：加载函数事件 onclick 更新时间：2023-09-26

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-2.1.3.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="webpage.css">
    <style type="text/css">
        #myCanvas {left: 500px; top:500px;
        border: 2px solid black;}
    </style>
    <title>Canvas Basics</title>
</head>
<body>
<canvas id="myCanvas" width="750" height="250">
</canvas>
<br>
<span id="count">3</span>seconds
<button id="next">Play</button>
</body>
</html>
<script type="text/javascript">
    var can;
    var ctx;
    var finish=false;
    function ranNum(max)
    {
        return Math.ceil(Math.random()*max)+1;
    }
window.onclick= function() {
    (function () {
        var counter = 3;
        setInterval(function () {
            counter--;
            if (counter >= 0) {
                span = document.getElementById("count");
                span.innerHTML = counter;
            }
            if (counter === 0) {
                alert('sorry, out of time');
                clearInterval(counter);
            }
        }, 1000);
    })();
}
    $(document).ready(function(){
        var nextBtn = document.getElementById('next');
        nextBtn.addEventListener('click',next,false);
        can = document.getElementById('myCanvas');
        ctx = can.getContext('2d');
        x1 = 0;
        x2 = 0;
        x3 = 0;
        x4 = 0;
        ctx.beginPath();
        ctx.moveTo(can.width-100, 0);
        ctx.lineTo(can.width-100, 400);
        ctx.stroke();

        ctx.fillStyle="red";
        ctx.fillRect(x1,50,50,25);
        ctx.fillStyle="blue";
        ctx.fillRect(x2,100,50,25);
        ctx.fillStyle="orange";
        ctx.fillRect(x3,150,50,25);
        ctx.fillStyle="green";
        ctx.fillRect(x4,200,50,25);
        function next()
        {
            var a = ranNum(10);
            var b = ranNum(10);
            var c = ranNum(10);
            var d = ranNum(8);
            if (x1 <200) {
                ctx.clearRect (0,0, can.width, can.height);
            }
            else {
                ctx.clearRect (120,0, can.width, can.height);
            }
            //ctx.clearRect (0,0, can.width, can.height);
            x1+= a;
            x2+=b;
            x3+=c;
            x4+=d;
            ctx.fillStyle="red";
            ctx.fillRect(x1,50,50,25);
            ctx.fillStyle="blue";
            ctx.fillRect(x2,100,50,25);
            ctx.fillStyle="orange";
            ctx.fillRect(x3,150,50,25);
            ctx.fillStyle="green";
            ctx.fillRect(x4,200,50,25);
            ctx.beginPath();
            ctx.moveTo(can.width-100, 0);
            ctx.lineTo(can.width-100, 400);
            ctx.stroke();
            //context.font="16px Ariel";
            //context.fillStyle="black";
            if (finish == false) {
                if (x1 > 625) {
                    //ctx.fillText("Red Winner",10,80);
                    winner(x1);
                }
                else if (x2 > 625) {
                    //ctx.fillText("Blue Winner",10,80);
                    winner(x2);
                }
                else if (x3 > 625) {
                    //ctx.fillText("Orange Winner",10,80);
                    winner(x3);
                }
                else if (x4 > 625) {
                    //ctx.fillText("Green Winner",10,80);
                    winner(x4);
                }
                //tTimeout(next, 40);
            }
            setTimeout(next, 40);
        }
        function winner(temp)
        {
            ctx.fillStyle= "black";
            finish=true;
            ctx.font="30px Arial";
            ctx.fillText("Winner!", 10,80);
            //alert(x1,x2,x3,x4);
            switch(temp)
            {
                case x1:
                    ctx.fillStyle="red";
                    ctx.fillText("Red", 10,150);
                    break;
                case x2:
                    ctx.fillStyle="blue";
                    ctx.fillText("Blue", 10,150);
                    break;
                case x3:
                    ctx.fillStyle="orange";
                    ctx.fillText("Orange", 10,150);
                    break;
                case x4:
                    ctx.fillStyle="green";
                    ctx.fillText("Green", 10,150);
                    break;
                default:
                    alert("");
            }
        }

    });
</script>

我有一个创建数字网格的代码。如果您单击数字，它将变为绿色，再次单击它将变为红色。我需要知道如何创建一个全部更改为绿色的按钮和另一个全部更改为红色的按钮.....这前面的部分不算只是在点击按钮并且倒计时达到 0 后尝试让比赛开始？

您可以执行以下操作：

使用black类开始并分配red和green按按钮的类

$(".myDiv").on("click", function() {
    if ($(this).hasClass("black")) {
        $(this).addClass("green");
    } else if ($(this).hasClass("green")) {
        $(this).addClass("red");
    } else if ($(this).hasClass("red")) {
        $(this).addClass("black");
    }

使用 CSS 着色

使用类更改所有按钮

$(".green").removeClass("green").addClass("red");

为每个"日历日"元素添加一个类。例如：

<div class="myDiv">1</div>

但是，我建议使用更具描述性的类名，而不是"myDiv"。

<div class="day-on-calendar">1</div>

然后，要选择具有该类的所有元素，请执行以下操作：

$(".day-on-calendar")

并更改所有这些颜色：

$(".day-on-calendar").css("color", "green");

要在单击某个元素时更改颜色：

<button id="all-green-button">Turn all the dates green</button>
$("#all-green-button").click(function(){
    $(".day-on-calendar").css("color", "green");
});