Question

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

Answer 1

您可以执行以下操作：

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

Answer 2

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

   A_to_B            B_to_C
0  -9.339710e+10     2.135599e+02

但我会推荐一个更具描述性的类名，而不是“myDiv”。

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

然后，选择该类的所有元素：

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

并改变所有颜色：

$(".day-on-calendar")

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

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

如何在onclick事件后加载函数

2 个答案: