1

есть 2 кнопки старт и пауза как реализовать код чтобы это была одна кнопка тоесть при нажатии на старт один раз она менялась на паузу потом наоборот подойдет любая интересная идея реализации! вот код обоих кнопок

$('#start').click(function() {
     audio.play();
     timer = setInterval(function() {
         if (secIntr === 0) {
             minIntr--;
             $("#min").text(minIntr);
             secIntr = 59;
         }
         $('#sec').text(secIntr--);
         if ((secIntr === 0) && (minIntr === 0) && (flag === false)) {
             flag = true;
             minIntr = minIntrBreak;
             secIntr = 00;
         } else if ((secIntr === 0) && (minIntr === 0) && (flag === true)) {
             flag = false;
             minIntr = minIntrWork;
             secIntr = 00;
         }
         if (flag === false) {
             $('body').css('background-image', 'url(http://vunderkind.info/wp-content/uploads/2012/11/rabotat.jpg)');
         } else if (flag === true) {
             $('body').css('background-image', 'url(http://www.webstar2002.com/attachments/Image/Ricos_y_pobres/ricos2.png)');
         }
     }, 1000)
 })
 $('#pause').click(function() {
     audio.pause();
     clearInterval(timer);
 })
6
  • кому интересно вот весь код codepen.io/xlabuchik/pen/vZrOeN?editors=1010
    – xlabuchik
    Commented 5 июл. 2017 в 8:06
  • Они вроде одного вида, тебе нужно текст поменять да? Commented 5 июл. 2017 в 8:09
  • нет както всунуть их в одну кнопку или чтото еще чтобы нельзя было нажимать старт много раз потомучто таймер увеличивает скорость
    – xlabuchik
    Commented 5 июл. 2017 в 8:10
  • нельзя было нажимать старт много раз, потому что таймер увеличивает скорость - для решения нужно просто на старте очищать таймер, тогда их не будет запускаться несколько.
    – Grundy
    Commented 5 июл. 2017 в 8:13
  • Вообще полагатся на то, что setInterval( , 1000) будет тикать раз в секунду нельзя. Лучше каждый раз берите время из Date.new(), вместо того чтобы пытатся его вычислить. так у вас исчезнет ряд багов, связанных со временем (в том числе и увеличение скорости таймера)
    – Darth
    Commented 5 июл. 2017 в 8:16

2 ответа 2

2

Для этого нужно где-то хранить состояние.

Можно использовать логическую переменную, например isStarted: если значение переменной true - звук запущен, следовательно при нажатии кнопка должна вести себя как stop, и наоборот.

Например:

var isStarted = false; // при первой загрузке все остановлено
$('#toggle').click(function() {
    if(!isStarted){ // если не запущено - запускаем и выставляем флаг
        isStarted = true; // код обработчиков можно вынести и в отдельные функции.
        audio.play(); 
        ...
    } else {
        isStarted = false;
        audio.pause();
        clearInterval(timer);
    }
}
1
  • пробовал оба варианта но этот более мобильнее люблю флажки в коде))) хотя с hide и show тоже не плохой вариант
    – xlabuchik
    Commented 5 июл. 2017 в 8:57
1

Если не отклониться от вашей написанной логики можно сделать так, при нажатии на старт или стоп, убрать другую кнопку. Вот обновленный код вопроса:

$(document).ready(function() {
    var muz = 'http://vozmimp3.com/s1/down3/1-66v4-p10-97b844ea90eb27/Anna_German__Katyusha.mp3';
var audio = new Audio(muz); audio.loop = true;
  var inter, flag,
        minIntr,
        secIntr,
        minIntrM = parseInt($("#MD").text()),
        minIntrM1 = parseInt($("#MD1").text());
    $("input[type='radio']").change(function () {
        if ($(this).val() === "1") {
            flag = false;
        } else flag = true;
      if (flag === false) {
            minIntr = minIntrM;
            secIntr = 00;
            $("#min").text(minIntr);
            $("#sec").text("00");
        } else {
            minIntr = minIntrM1;
            secIntr = 00;
            $("#min").text(minIntr);
            $("#sec").text("00");
        }
    });
    if ($("input[type='radio']").val() === "1") {
        flag = false;
    } else flag = true;
    if (flag === false) {
        minIntr = minIntrM;
        secIntr = 00;
        $("#min").text(minIntr);
        $("#sec").text("00");
    } else {
        minIntr = minIntrM1;
        secIntr = 00;
        $("#min").text(minIntr);
        $("#sec").text("00");
    }
    $("#plusM").click(function() {
        minIntrM++;
        $("#MD").text(minIntrM + " " + "minutes");
    })
    $("#minusM").click(function() {
        minIntrM--;
        $("#MD").text(minIntrM + " " + "minutes");
    })
    $("#plusM1").click(function() {
        minIntrM1++;
        $("#MD1").text(minIntrM1 + " " + "minutes");
    })
    $("#minusM1").click(function() {
        minIntrM1--;
        $("#MD1").text(minIntrM1 + " " + "minutes");
    })
    $('#start').click(function() {
        $(this).hide();
        $('#pause').show();
      audio.play();
        inter = setInterval(function() {
            if (secIntr === 0) {
                minIntr--;
                $("#min").text(minIntr);
                secIntr = 59;
            }
            $('#sec').text(secIntr--);
            if ((secIntr === 0) && (minIntr === 0) && (flag === false)) {
                flag = true;
                minIntr = minIntrM1;
                secIntr = 00;
            } else if ((secIntr === 0) && (minIntr === 0) && (flag === true)) {
                flag = false;
                minIntr = minIntrM;
                secIntr = 00;
            }
            if (flag === false) { 
                $('body').css('background-image', 'url(http://vunderkind.info/wp-content/uploads/2012/11/rabotat.jpg)');
            } else if (flag === true) {
                $('body').css('background-image', 'url(http://www.webstar2002.com/attachments/Image/Ricos_y_pobres/ricos2.png)');
            }
        }, 1000)
    })
    $('#pause').click(function() {
        $(this).hide();
        $('#start').show();
       audio.pause();
      clearInterval(inter);
    })
    $("#reset").click(function rez() {
      $('#start').show();
      $('#pause').show();
      if (flag === false) {
            minIntr = minIntrM;
            secIntr = 00;
            $("#min").text(minIntr);
            $("#sec").text("00");
        } else {
            minIntr = minIntrM1;
            secIntr = 00;
            $("#min").text(minIntr);
            $("#sec").text("00");
        }
    })
});
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>kalculator</title>
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Frijole|Lobster|Pacifico|Monoton" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="container-fluid" style="text-align:center; font-size:30px; color:#FF5950; top:20px">After the time change, click Refresh then Start</div>
    <div class="container-fluid" id="bod">
    <div id="clock" class="row">
        <div id="min" class="time container-fluid"></div>
        <div id="sec" class="time container-fluid"></div>
    </div>

        <div class="container-fluid" id=buti>
            <button id="start" class="btn but">Start</button>
            <button id="pause" class="btn but">Pause</button>
            <button id="reset" class="btn but">
Refresh</button>
        </div>
        <div class="row" id="buti1" >
            <button id="plusM" class="btn but1">+</button>
            <div id="MD">25 minutes</div>
            <button id="minusM" class="btn but1">-</button>
            <p>
                <input name="dzen" type="radio" value="1" checked>WORK time</p>
        </div>
        <div class="row" id="buti2">
            <button id="plusM1" class="btn but1">+</button>
            <div id="MD1">5 minutes</div>
            <button id="minusM1" class="btn but1">-</button>
            <p>
                <input name="dzen" type="radio" value="2"> BREAK time</p>
        </div>
     
    </div>
     
    
      
    <footer class="container-fluid">Copyright ©<a href="https://www.facebook.com/sergey.karachik" target="_blank">xlabuchik</a> 2017. All rights reserved. </footer>
</body>

</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.