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

Я был разработан нижеприведенный код для секундомера. Вся опция работает правильно, прежде всего, нажимайте кнопку сброса. Но childAppend of lap не работает должным образом. Как только я нажал кнопку сброса, опция круга не показывалась, когда я использовалКак сбросить отсчет секундомера секундомера и снова запустить

< - document.getElementById ("mainContainer"). Remove(); ->

, если я не использовал приведенный выше код, он показывает старые значения в коленях не удалить

var secOne = 0, 
 
    secTwo = 0, 
 
    minOne = 0, 
 
    minTwo = 0, 
 
    hourOne = 0, 
 
    hourTwo = 0; 
 
var t; 
 
var timer_is_on = 0; 
 

 
function timedCount() { 
 
    document.getElementById("txt").value = (hourTwo + hourOne + ":" + minTwo + minOne + ":" + secTwo + secOne); 
 
    secOne++; 
 
    secMinCount(); 
 
    t = setTimeout(function() { 
 
    timedCount(); 
 
    }, 1000); 
 
} 
 

 
function secMinCount() { 
 
    if (secOne == 10) { 
 
    secTwo++; 
 
    secOne = 0; 
 
    if (secTwo == 6) { 
 
     minOne++; 
 
     secTwo = 0; 
 
     if (minOne == 10) 
 
     minHourCount(); 
 
    } 
 
    } 
 
} 
 

 
function minHourCount() { 
 
    minTwo++; 
 
    minOne = 0; 
 
    if (minTwo == 6) { 
 
    hourOne++; 
 
    minTwo = 0; 
 
    if (hourOne == 10) { 
 
     hourOne = 0; 
 
     hourTwo++; 
 
    } 
 
    } 
 
} 
 

 
function startWatch() { 
 
    $('#start').hide(); 
 
    $('#stop').show(); 
 
    $('#lap').show(); 
 
    $('#reset').show(); 
 
    startContinue(); 
 
} 
 

 
function stopWatch() { 
 
    $('#stop').hide(); 
 
    $('#continue').show(); 
 
    clearTimeout(t); 
 
    timer_is_on = 0; 
 
} 
 

 
function continueWatch() { 
 
    $('#continue').hide(); 
 
    $('#stop').show(); 
 
    startContinue(); 
 
} 
 

 
function startContinue() { 
 
    if (!timer_is_on) { 
 
    timer_is_on = 1; 
 
    timedCount(); 
 
    } 
 
} 
 

 
function lapWatch() { 
 
    var mainContainer = document.getElementById('mainContainer'); 
 
    var newDiv = document.createElement('div'); 
 
    var newText = document.createElement('output'); 
 
    newText.type = "output"; 
 
    newText.value = hourTwo + hourOne + ":" + minTwo + minOne + ":" + secTwo + secOne; 
 
    newDiv.appendChild(newText); 
 
    mainContainer.appendChild(newDiv); 
 
} 
 

 
function resetWatch() { 
 
    $('#lap').hide(); 
 
    $('#stop').hide(); 
 
    $('#continue').hide(); 
 
    $('#start').show(); 
 
    $('#reset').hide(); 
 
    clearTimeout(t); 
 
    timer_is_on = 0; 
 
    secOne = 0, secTwo = 0, minOne = 0, minTwo = 0, hourOne = 0, hourTwo = 0; 
 
    document.getElementById("txt").value = hourTwo + hourOne + ":" + minTwo + minOne + ":" + secTwo + secOne; 
 
    document.getElementById("mainContainer").remove(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
    <title>Stopwatch</title> 
 
    
 
</head> 
 

 
<body> 
 
    <button onclick="continueWatch()" id="continue" style="display:none">Continue count!</button> 
 
    <button onclick="startWatch()" id="start">Start count!</button> 
 
    <button onclick="stopWatch()" id="stop" style="display:none">Stop count!</button> 
 
    <button onclick="resetWatch()" id="reset" style="display:none">Reset count!</button> 
 
    <input type="text" id="txt" value="0:00:00"> 
 

 
    <div id="mainContainer"> 
 
    <button onclick="lapWatch()" id="lap" style="display:none">Lap count!</button> 
 
    </div> 
 
    <div id="result"></div> 
 
    <script type="text/javascript" src="js/script.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</body> 
 

 
</html>

источник

2016-10-27 Sathiesh Palanisamy

вы удаляете весь ДИВ и не только divs внутри div. Попробуйте это (jsFiddle):

function resetWatch() { 

    var mainContainer = document.getElementById('mainContainer'); 
    Array.prototype.slice.call(mainContainer.getElementsByTagName('DIV')).forEach(function(e) { 
    e.remove(); 
    }); 
    console.dir(mainContainer); 

    $('#lap').hide(); 
    $('#stop').hide(); 
    $('#continue').hide(); 
    $('#start').show(); 
    $('#reset').hide(); 

    clearTimeout(t); 
    timer_is_on = 0; 
    secOne = 0, secTwo = 0, minOne = 0, minTwo = 0, hourOne = 0, hourTwo = 0; 
    document.getElementById("txt").value = hourTwo + hourOne + ":" + minTwo + minOne + ":" + secTwo + secOne; 
};

Были петли основной continer для всех divs с mainContainer.getElementsByTagName('DIV') поэтому мы не удаляем кнопку и удалить только цифры подсчета коленей. Отличное место для чтения о Array.prototype.slice(), которое позволяет вам перебирать массив элементов.

Также некоторые большие консольные инструменты: console.log и console.dir.

также хотел использовать JQuery попробовать:

$("#mainContainer > div").each(function(v, e) { 
    $(e).remove(); 
    });

Не уверен, что если дизайн, но количество коленей это одна вторая голова иногда, если это нежелательно изменение:

newText.value = hourTwo + hourOne + ":" + minTwo + minOne + ":" + secTwo + secOne;

в newText.value = document.getElementById('txt').value;

источник

2016-10-27 14:10:28 thekodester

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

ответ

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