如何在 onclick 事件后加载函数答案

【问题标题】：How to load a function after an onclick event如何在 onclick 事件后加载函数
【发布时间】：2016-08-10 22:59:05
【问题描述】：

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

【问题讨论】：

您能否发布更多信息，例如示例 html 和 changeColor 函数？
我不知道该怎么做，我一直在尝试，它只是一直说我需要在中间添加文本
有什么想法吗？时间很重要，任何意见都会有所帮助

标签： javascript jquery

【解决方案1】：

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

<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");
});

【讨论】：

我不知道在我的代码中把它放在哪里，而且一个月中的日子没有设置 div 我将不得不更改整个代码
将 HTML 代码放在您希望它显示在页面上的任何位置。将 jQuery 代码放在 document.ready 函数中的任何位置。
您不必对 HTML 进行太多更改。只需确保每个按钮都有一个唯一的 ID（如“all-red-button”或“all-green-button”），并且日历上的每一天都有一个特定的类（“myDiv”适用于此，但您可以使用任何你想要的课程）。

【解决方案2】：

您可以执行以下操作：

使用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");

【讨论】：

现在我只需要添加两个按钮，当按下时将日历上的所有日期变为绿色，或者如果单击第二个按钮将它们全部变为红色