Как изменить значение SELECT FORM с помощью переключателя и jQuery

Привет всем Я делаю таймер, и у меня есть проблема. я пытаюсь ускорить вверх и вниз по таймеру с помощью выбора формы, но это не работает, может кто-то объяснить, где я не прав, пожалуйста,Как изменить значение SELECT FORM с помощью переключателя и jQuery

, конечно, в конце с переключателем

это мой код :

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: 
     // 
    } 
});

источник

2016-04-09 mathieu

Вы только проверить значение #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, когда выберите изменения окна. Затем выполняйте свои функции, как только вы их раскомментируете. Я не уверен, работает ли код остального, но он должен запускать коммутатор всякий раз, когда изменяется значение в элементе выбора.

Я сделал CodePen, это то, как я пишу JS, так что было легче для меня, чтобы выяснить, что могло идти дальше:

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

В настоящее время временные работы и такие, и, но его только пауза один раз, после повторного запуска интервала, кажется, что он не хочет останавливаться. Хотя он сбрасывает штраф, и я не уверен в управлении скоростью. Посмотрите, надеюсь, это должно заставить вас пойти на полное исправление всего этого.

источник

2016-04-09 22:39:01 Adam

спасибо за ваш ответ, но он по-прежнему не работает, не знаю почему? – mathieu

Извините, опоздал, когда я ответил на это! Я внес некоторые изменения, в основном все, что вы делали, запускало коммутатор всякий раз, когда он менялся, а затем инициализировал событие click, которое запускало бы эту функцию, когда вы нажимаете '# bla'. То, что вам нужно, это запустить функцию всякий раз, когда изменяется '# bla'. Пока функция таймера работает правильно и вы нажимаете '.x05' и т. Д., Тогда я думаю, что это должно сработать! – Adam

Я внес некоторые исправления, а также добавил ручку кода, чтобы вы могли посмотреть на нее, используя большую часть вашего кода, хотя написано, как я пишу свой JS, но, очевидно, вы используете код. Некоторые биты не работают, но, надеюсь, я исправил достаточно, чтобы вы начали. – Adam

Как изменить значение SELECT FORM с помощью переключателя и jQuery

ответ

Смежные вопросы