как поменять назначение кнопки?

308

06 июля 2017, 04:11

есть 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);
 })

Answer 1

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

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

Например:

var isStarted = false; // при первой загрузке все остановлено
$('#toggle').click(function() {
    if(!isStarted){ // если не запущено - запускаем и выставляем флаг
        isStarted = true; // код обработчиков можно вынести и в отдельные функции.
        audio.play(); 
        ...
    } else {
        isStarted = false;
        audio.pause();
        clearInterval(timer);
    }
}

Answer 2

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

$(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>

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Vue JS 2: Изменение binding.value в custom directive

Интересует возможность изменения входящего параметра в дериктиве

293

javascript

Создание бота на Python + JS [требует правки]

Мне нужно создать одну программуВ ней требуются знания JS, которых у меня пока нет

308

javascript

Почему фильтр ищет только по числам? VueJS

Почему данный фильтр, с помощью v-model, фильтрует массив terminal исключительно по числам ( если буду вводить символы - ничего не находит )? Ссылка...

185

javascript

Валидация input FALSE or TRUE

Вам нужен метод checkValidity:

158