Question

大家好我制作一个计时器，我有一个问题。我试图使用选择表单来加速和减少计时器，但这不起作用，有人可以解释我错在哪里

当然最后是开关

这是我的代码：

html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>

`：：

<input id="reset" type="button" value="reset">
<input id="pauseButton" type="button" value="Pause">
<input id="reprendreButton" type="button" value="Reprendre">

<form>
<select id="bla" >
<option value="x05">x05</option>
<option value="x1" selected>x1</option>
<option value="x2">x2</option>
<option value="x4">x4</option>
</select>
</form>

`

的javascript

<script>





var timer = {
    totalSeconds: 0,
    start: function () {
        var mat = this;

        this.interval = setInterval(function () {
            mat.totalSeconds += 1;

            $("#heure").text(Math.floor(mat.totalSeconds / 3600));
            $("#min").text(Math.floor(mat.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(mat.totalSeconds % 60));
        }, 1000);
    },





    pause: function () {

        this.interval =  clearInterval(this.interval);
        this.interval =  delete this.interval;

    },

    x05: function () {

        // this.interval = this.totalSeconds += 2;
        var mat = this;

        this.interval = setInterval(function () {
            mat.totalSeconds += 1/2;

            $("#heure").text(Math.floor(mat.totalSeconds / 3600));
            $("#min").text(Math.floor(mat.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(mat.totalSeconds % 60));
        }, 1000);


    },

    x1: function () {

        // this.interval = this.totalSeconds += 2;
        var mat = this;

        this.interval = setInterval(function () {
            mat.totalSeconds += 1;

            $("#heure").text(Math.floor(mat.totalSeconds / 3600));
            $("#min").text(Math.floor(mat.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(mat.totalSeconds % 60));
        }, 1000);


    },

    x2: function () {

       // this.interval = this.totalSeconds += 2;
        var mat = this;

        this.interval = setInterval(function () {
            mat.totalSeconds += 2;

            $("#heure").text(Math.floor(mat.totalSeconds / 3600));
            $("#min").text(Math.floor(mat.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(mat.totalSeconds % 60));
        }, 1000);


    },

    x4: function () {

        // this.interval = this.totalSeconds += 2;
        var mat = this;

        this.interval = setInterval(function () {
            mat.totalSeconds += 4;

            $("#heure").text(Math.floor(mat.totalSeconds / 3600));
            $("#min").text(Math.floor(mat.totalSeconds / 60 % 60));
            $("#sec").text(parseInt(mat.totalSeconds % 60));
        }, 1000);


    },

    Reprendre: function () {

        this.interval = !this.interval;
        this.interval = this.start();
    },

    reset: function () {

      // clearInterval(this.interval);

        this.interval = this.totalSeconds -= this.totalSeconds +=1 ;


    }

};

timer.start();


$('#pauseButton').click(function () { timer.pause(); });
$('#reprendreButton').click(function () { timer.Reprendre(); });
$('#reset').click(function () { timer.reset(); });


$(document).ready(function(){
    switch($('#bla' ).val()) {

        case 'x05':
           /* $('#bla').click(function () { timer.x05(); }); */
            break;
        case 'x1':
          /*  $('#bla').click(function () { timer.x1(); }); */
            break;
        case 'x2':
           /* $('#bla').click(function () { timer.x2(); });  */
            break;
        case 'x4':
          /*  $('#bla').click(function () { timer.x4(); });  */
            break;
        default:
        //
    }
});

Answer 1

您只需在文档准备好后检查#bla的值。你需要这样做：

$(document).ready(function(){
   $('#bla' ).on('change', function(){
     switch($(this.val())) {
        case 'x05':
             timer.x05(); 
            break;
        case 'x1':
           timer.x1();
            break;
        case 'x2':
             timer.x2();  
            break;
        case 'x4':
            timer.x4(); 
            break;
        default:
            //
            break;
      }
   });
});

在选择框更改时，您将检查#bla的值。然后在取消注释后运行您的功能。我不确定你们其他人的代码是否正常工作，但只要更改了select中的值，就应该运行切换。

我已经编写了CodePen，这就是我编写JS的方式，因此我更容易弄清楚可能发生的事情：

https://codepen.io/dammeul/pen/GZQpqZ?editors=1010

目前时间有效，但它只暂停一次，再次开始间隔之后，它似乎不想暂停。虽然它重置得很好，但我不确定速度控制。看看，希望这可以让你全力以赴解决这一切。

如何使用switch和jquery

1 个答案: