Как прокрутить несколько кнопок в одном месте - PullRequest
Новая
       3

Как прокрутить несколько кнопок в одном месте

0 голосов
/ 21 февраля 2019

Я создаю секундомер, который показывает текущее время работы.Мне нужно создать одну кнопку, которая циклически переключается между «Старт», «Стоп» и «Сброс».

Он должен начинаться с «Пуск», а при щелчке по нему он переходит в «Стоп», а позже должен заканчиваться «Сброс».И прокрутите их обратно.

Я не смог найти ни одного руководства, объясняющего это онлайн.И я не могу понять это самостоятельно. 

        start = document.getElementById('Start');
        stop = document.getElementById('Stop');
        reset = document.getElementById('Reset');
        
        let watchRunning = false;

        Start.addEventListener('click', startHandler);
        Stop.addEventListener('click', stopHandler);
        Reset.addEventListener('click', resetHandler);

        function startHandler() {
            if (!watchRunning) {
                watchRunning = setInterval(update, 70);
            }
        }
        function stopHandler() {
            clearInterval(watchRunning);
            watchRunning = null;
        }
        function resetHandler() {
            document.getElementById("Time").innerHTML = "00.00";
            clearInterval(watchRunning);
            watchRunning = false;
        }

        update();
        var seconds;
        var milliseconds;
        var d;

        function update() {
            d = new Date();
            seconds = d.getSeconds();
            milliseconds = Math.floor((d.getMilliseconds() / 10));

            if (milliseconds < 10 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + ".0" + milliseconds;

            } else if (milliseconds < 10 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + ".0" + milliseconds;

            } else if (milliseconds >= 0 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + "." + milliseconds;

            } else if (milliseconds >= 0 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + "." + milliseconds;
            }
        }
#Time {
     background-color: yellow;
     max-width: 2.3%;
}
<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop">Stop</button>
<button id="Reset">Reset</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

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

var startHandler = function (state) { console.log(state); }
var stopHandler = function (state) { console.log(state); }
var resetHandler = function (state) { console.log(state); }

var StopWatch = function (selector) {
  var states = ['Start', 'Stop', 'Reset']
  var handlers = [startHandler, stopHandler, resetHandler]
  var currentState = 0;
  var element = document.querySelector(selector);

  var clickHandler = function () {
    // Execute 'currentState', pass anything you want to handlers
    handlers[currentState](states[currentState])

    // Update currentState after, means 'move to next state'
    if (currentState < (states.length - 1)) {
      currentState++;
    } else {
      currentState = 0;
    }

    element.innerHTML = states[currentState];
  }
  return {
    init: function () {
      // Initial work
      element.addEventListener('click', clickHandler);
    },
    remove: function () {
      // Cleanup
      element.removeEventListener('click', clickHandler)
    }
  }
}

StopWatch('#stopwatch').init();

Вот пример работающего скелета:

https://jsbin.com/zawomorori/edit?html,js,console

0 голосов
/ 21 февраля 2019

Я изменил ваш код, чтобы создать эффект, который вы хотели.Я использовал jquery, чтобы скрыть и показать кнопки на событиях клика.

 <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
    body{
        margin: 0px;
        width: 100%;
        padding: 0px;
    }
        #Time {
     background-color: yellow;
     max-width: 2.3%;
}
.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-65%);    
}
</style>

</head>
<body>
<div class="box">
<h1>Stop Watch</h1>
<button id="Start">Start</button>
<button id="Stop" >Stop</button>
<button id="Reset">Reset</button>
<h3>Elapsed Time:</h3>
<p id="Time"></p>
</div>
<script type="text/javascript">

$('document').ready(function(){
 $("#Stop").prop("disabled",true);
 $("#Reset").prop("disabled",true);
 $("#Stop").prop("hidden",true);
 $("#Reset").prop("hidden",true);
}); 

$('#Start').click(function(){
 $("#Stop").prop("disabled",false);
 $("#Reset").prop("disabled",true);
 $("#Stop").prop("hidden",false);
 $("#Reset").prop("hidden",true);
 $("#Start").prop("disabled",true);
 $("#Start").prop("hidden",true);
});
$('#Stop').click(function(){
 $("#Reset").prop("disabled",false);
 $("#Reset").prop("hidden",false);
 $("#Stop").prop("disabled",true);
 $("#Stop").prop("hidden",true);
});

$('#Reset').click(function(){
 $("#Start").prop("disabled",false);
 $("#Start").prop("hidden",false);
 $("#Reset").prop("disabled",true);
 $("#Reset").prop("hidden",true);
});

        start = document.getElementById('Start');
        stop = document.getElementById('Stop');
        reset = document.getElementById('Reset');

        let watchRunning = false;

        Start.addEventListener('click', startHandler);
        Stop.addEventListener('click', stopHandler);
        Reset.addEventListener('click', resetHandler);

        function startHandler() {
            if (!watchRunning) {
                watchRunning = setInterval(update, 70);
            }
        }
        function stopHandler() {
            clearInterval(watchRunning);
            watchRunning = null;
        }
        function resetHandler() {
            document.getElementById("Time").innerHTML = "00.00";
            clearInterval(watchRunning);
            watchRunning = false;
        }

        update();
        var seconds;
        var milliseconds;
        var d;

        function update() {
            d = new Date();
            seconds = d.getSeconds();
            milliseconds = Math.floor((d.getMilliseconds() / 10));

            if (milliseconds < 10 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + ".0" + milliseconds;

            } else if (milliseconds < 10 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + ".0" + milliseconds;

            } else if (milliseconds >= 0 && seconds < 10) {
                document.getElementById("Time").innerHTML =
                    "0" + seconds + "." + milliseconds;

            } else if (milliseconds >= 0 && seconds >= 10) {
                document.getElementById("Time").innerHTML =
                    seconds + "." + milliseconds;
            }
        }
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...