How do we complete the role in JS?



  • There's a field with scores and three buttons.

    A number of points out of the total shall be subtracted for each button. At the same time, when compressing any of the buttons, the timers from which the buttons are based shall be started. When the timer reaches zero, the button again acquires the original view. When repressing the button, the timers should start counting on the new one.

    At this point, the re-enactment of the functions is re-launched and the timer begins to move faster. Thank you for your help in advance.

    //Нажатие на кнопки и изменение кол-ва баллов
    $(document).ready(function() {
      $('#new').click(function() {
        $('#counter').html(+$('#counter').html() - 5);
      });
    

    $('#save').click(function() {
    $('#counter').html(+$('#counter').html() - 2);
    });

    $('#deact').click(function() {
    $('#counter').html(+$('#counter').html() - 1);
    });

    });

    function start_timers() {
    /* timer_new('click');

    • это должен быть выход их рекурсии, н оон не робит((
      */
      timer_new();
      timer_save();
      timer_deact();
      }

    function timer_new(click) {
    if (click !== 'click') {
    var obj = document.getElementById('new');
    if (obj.innerHTML == 'New') {
    obj.innerHTML = 10;
    setTimeout(timer_new, 1000);
    } else if (obj.innerHTML == 0) {
    obj.innerHTML = 'New';
    } else {
    obj.innerHTML--;
    setTimeout(timer_new, 1000);
    }
    } else {return true;}
    }

    function timer_save() {
    var obj = document.getElementById('save');
    if (obj.innerHTML == 'Save') {
    obj.innerHTML = 100;
    setTimeout(timer_save, 1000);
    } else if (obj.innerHTML == 0) {
    obj.innerHTML = 'Save';
    } else {
    obj.innerHTML--;
    setTimeout(timer_save, 1000);
    }
    }

    function timer_deact() {
    var obj = document.getElementById('deact');
    if (obj.innerHTML == 'Deact') {
    obj.innerHTML = 85;
    setTimeout(timer_deact, 1000);
    } else if (obj.innerHTML == 0) {
    obj.innerHTML = 'Deact';
    } else {
    obj.innerHTML--;
    setTimeout(timer_deact, 1000);
    }
    }

     #wrapper {
    width: 400px;
    margin: 0 auto;
    padding: 50px;
    border: 2px green solid;
    }

    #counter {
    text-align: center;
    width: 216px;
    margin: 0 auto 10px auto;
    padding: 15px;
    border: 2px black solid;
    }

    #buttons {
    margin: 0 auto 0 86px;
    }

    #buttons div {
    display: inline-block;
    font-weight: 700;
    color: white;
    text-decoration: none;
    margin-right: 7px;
    width: 36px;
    padding: .8em 1em calc(.8em + 3px);
    border-radius: 3px;
    transition: 0.2s;
    cursor: pointer;
    }

    #new {
    background: rgb(64, 199, 129);
    box-shadow: 0 -3px rgb(53, 167, 110) inset;
    }

    #new:hover {
    background: rgb(53, 167, 110)
    }

    #new:active {
    background: rgb(33, 147, 90);
    }

    #save {
    background: rgb(135, 206, 250);
    box-shadow: 0 -3px rgb(124, 174, 231) inset;
    }

    #save:hover {
    background: rgb(124, 174, 231)
    }

    #save:active {
    background: rgb(104, 154, 211);
    }

    #deact {
    background: rgb(255, 160, 122);
    box-shadow: 0 -3px rgb(244, 128, 103) inset;
    }

    #deact:hover {
    background: rgb(244, 128, 103)
    }

    #deact:active {
    background: rgb(224, 108, 83);
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="wrapper">
    <div id="counter">294</div>
    <div id="buttons">
    <div id="new" onclick="start_timers();">New</div>
    <div id="save" onclick="start_timers();">Save</div>
    <div id="deact" onclick="start_timers();">Deact</div>
    </div>
    </div>

    Reference to code ♪ http://codepen.io/iWillCrashYou/pen/NAgWvg



  • The state of the timers could be placed in a separate facility where the timer itself, the name, the primary condition could be kept.

    Keeping it all on every launch is just calling https://developer.mozilla.org/ru/docs/Web/API/WindowTimers/clearTimeout that will stop the timers that have begun.

    For example:

    //Нажатие на кнопки и изменение кол-ва баллов
    $(document).ready(function() {
      $('#new').click(function() {
        $('#counter').html(+$('#counter').html() - 5);
      });
    

    $('#save').click(function() {
    $('#counter').html(+$('#counter').html() - 2);
    });

    $('#deact').click(function() {
    $('#counter').html(+$('#counter').html() - 1);
    });

    });
    var timerStates = [{
    text: 'New',
    count: 10
    }, {
    text: 'Save',
    count: 100
    }, {
    text: 'Deact',
    count: 85
    }, ];

    function start_timers() {
    timerStates.forEach(function(timerState) {
    clearTimeout(timerState.timer);
    startTimer(timerState);
    });
    }

    function startTimer(timerState) {
    var el = document.getElementById(timerState.text.toLowerCase());
    counterExec(timerState.count);

    function counterExec(count) {
    el.innerHTML = count || timerState.text;
    if (count)
    timerState.timer = setTimeout(counterExec, 1000, count-1);
    }
    }

    #wrapper {
    width: 400px;
    margin: 0 auto;
    padding: 50px;
    border: 2px green solid;
    }
    #counter {
    text-align: center;
    width: 216px;
    margin: 0 auto 10px auto;
    padding: 15px;
    border: 2px black solid;
    }
    #buttons {
    margin: 0 auto 0 86px;
    }
    #buttons div {
    display: inline-block;
    font-weight: 700;
    color: white;
    text-decoration: none;
    margin-right: 7px;
    width: 36px;
    padding: .8em 1em calc(.8em + 3px);
    border-radius: 3px;
    transition: 0.2s;
    cursor: pointer;
    }
    #new {
    background: rgb(64, 199, 129);
    box-shadow: 0 -3px rgb(53, 167, 110) inset;
    }
    #new:hover {
    background: rgb(53, 167, 110)
    }
    #new:active {
    background: rgb(33, 147, 90);
    }
    #save {
    background: rgb(135, 206, 250);
    box-shadow: 0 -3px rgb(124, 174, 231) inset;
    }
    #save:hover {
    background: rgb(124, 174, 231)
    }
    #save:active {
    background: rgb(104, 154, 211);
    }
    #deact {
    background: rgb(255, 160, 122);
    box-shadow: 0 -3px rgb(244, 128, 103) inset;
    }
    #deact:hover {
    background: rgb(244, 128, 103)
    }
    #deact:active {
    background: rgb(224, 108, 83);
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="wrapper">
    <div id="counter">294</div>
    <div id="buttons">
    <div id="new" onclick="start_timers();">New</div>
    <div id="save" onclick="start_timers();">Save</div>
    <div id="deact" onclick="start_timers();">Deact</div>
    </div>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2