Question

我正在制作带有休息计时器和会话计时器的番茄钟。我通过尝试嵌套o＆＃clock活动来设置每个时钟，使用单个小键盘将数据输入到每个时钟。要实现这一点，请单击时钟显示，然后开始输入按钮。删除按钮和输入按钮有0-9。我甚至无法为任何一种功能显示任何内容。所以我开始怀疑我尝试做的事情是否会起作用？只是在寻找是否可以嵌套点击事件，如果是，那么我做错了什么。或者我正在寻找的另一种方法。做一个小提琴来查看它最小化js和css窗口。 https://jsfiddle.net/zackluckyf/jhe98j05/1/

 $(".session-time-clock").click(function(){
            // changes the color to make it flash, add a duration and then change it back
            $(".num-button").css("background-color", "#BCC6CC");
            function myFunction() {
                myVar = setTimeout(changeBackground, 500);
            }
            function changeBackground() {
                $(".num-button").css("background-color", "#575e62");
            }
            myFunction();
            sessionTimeClock = "00:00";
            counter = 4;
        /*

        Will this work?

        */
        $("button").click(function(){
            // gets button text label
            var input = $(this).text();
            // if, else if chain for calculator functions
            if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1)
                {
                    if(counter === 4)
                        {
                            sessionTimeClock = sessionTimeClock.slice(0,counter-1) + input;
                        }
                    if(counter === 3)
                        {
                            sessionTimeClock = "00:" + input + sessionTimeClock.slice(4);
                        }
                    if(counter === 1)
                        {
                            sessionTimeClock = "0" + input + sessionTimeClock.slice(2);
                        }
                    if(counter === 0)
                        {
                            sessionTimeClock = input +  sessionTimeClock.slice(1);
                        }
                    counter--;
                    if(counter === 2)
                        {
                            counter--;
                        }
                }
            else if(input === "X")
                {
                    if(counter === 3)
                        {
                            sessionTimeClock = "00:0" + sessionTimeClock.slice(4);
                        }
                    else if(counter === 1)
                        {
                            sessionTimeClock = "00:" + sessionTimeClock.slice(3);
                        }
                    else if(counter === 0)
                        {
                            sessionTimeClock = "0" + sessionTimeClock.slice(1);
                        }
                }
            else if(input === "Enter")
                {
                    return;
                }
            $(".session-time-clock").text("hello");
        }); 
    });

    $(".break-time-clock").click(function(){
        $(".num-button").css("background-color", "#BCC6CC");
        function myFunction() {
            myVar = setTimeout(changeBackground, 500);
        }
        function changeBackground() {
            $(".num-button").css("background-color", "#575e62");
        }
        myFunction();
        breakTimeClock = "00:00";
        counter = 4;
        $("button").click(function(){
            // gets button text label
            var input = $(this).text();
            // if, else if chain for calculator functions
            if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1)
                {
                    if(counter === 4)
                        {
                            breakTimeClock = breakTimeClock.slice(0,counter-1) + input;
                        }
                    if(counter === 3)
                        {
                            breakTimeClock = "00:" + input + breakTimeClock.slice(4);
                        }
                    if(counter === 1)
                        {
                            breakTimeClock = "0" + input + breakTimeClock.slice(2);
                        }
                    if(counter === 0)
                        {
                            breakTimeClock = input +  breakTimeClock.slice(1);
                        }
                    counter--;
                    if(counter === 2)
                        {
                            counter--;
                        }
                }
            else if(input === "X")
                {
                    if(counter === 3)
                        {
                            breakTimeClock = "00:0" + breakTimeClock.slice(4);
                        }
                    else if(counter === 1)
                        {
                            breakTimeClock = "00:" + breakTimeClock.slice(3);
                        }
                    else if(counter === 0)
                        {
                            breakTimeClock = "0" + breakTimeClock.slice(1);
                        }
                }
            else if(input === "Enter")
                {
                    return;
                }
            $(".break-time-clock").text(breakTimeClock);
        }); 
    });

Answer 1

提供的代码与jsfiddle不同。我将与jsfiddle有关：

您有以下代码：

    $("button").click(function(){
        if(input === "Start")
            {
                // start clock code
            }
        else if(input === "Pause")
            {
                // pause clock code
            }
        else if(input === "Reset")
            {
                sessionTimeClock = "00:00";
                breakTimeClock = "00:00";
            }
        return true;
    });

这是您第一次将点击处理程序分配给“按钮”，因此首先调用它。

未定义“input”变量，因此不调用其他处理程序。（您可以在Dev Tools控制台中看到错误。）

你能点击点击活动吗？

1 个答案: