자바 스크립트는 이런 식으로, 내 자바 스크립트 스톱워치가 입력 상자의 일종 내에서 실행을 시도하고 스톱워치 편집

Question

시간을 확인합니다. 나는 html 태그 안에 시간을 감싸려고 노력했지만 시간은 스크립트에서 박스로 보내지는 않을 것이다. 이 작품을 만드는 방법에 대한 더 좋은 아이디어 ???

자바 스크립트

function _timer(callback) 
{ 
    var time = 0;  // The default time of the timer 
    var status = 0; // Status: timer is running or stoped 
    var timer_id; // This is used by setInterval function 

    // this will start the timer 
    this.start = function(interval) 
    { 
     interval = (typeof(interval) !== 'undefined') ? interval : 1000; 

     if(status == 0) 
     { 
      status = 1; 
      timer_id = setInterval(function() 
      { 
       switch(1) 
       { 
        case 1: 
        if(time < 86400) 
        { 
         time++; 
         generateTime(); 
         if(typeof(callback) === 'function') callback(time); 
        } 
        break; 
       } 
      }, interval); 
     } 
    } 

    // this will stop or pause the timer ex. timer.stop() 
    this.stop = function() 
    { 
     if(status == 1) 
     { 
      status = 0; 
      clearInterval(timer_id); 
     } 
    } 

    // Reset the timer to zero or reset it to your own custom time 
    this.reset = function(sec) 
    { 
     sec = (typeof(sec) !== 'undefined') ? sec : 0; 
     time = sec; 
     generateTime(time); 
    } 
    // This methode return the current value of the timer and sends it to the database 
    this.getTime = function() 
    { 
     return time; 
    } 
    // This methode return the status of the timer 
    this.getStatus 
    { 
     return status; 
    } 

    // This methode will render the time variable to hour:minute:second format 
    function generateTime() 
    { 
     var second = time % 60; 
     var minute = Math.floor(time/60) % 60; 
     var hour = Math.floor(time/3600) % 60; 

     second = (second < 10) ? '0'+second : second; 
     minute = (minute < 10) ? '0'+minute : minute; 
     hour = (hour < 10) ? '0'+hour : hour; 

     $('div.timer span.second').html(second); 
     $('div.timer span.minute').html(minute); 
     $('div.timer span.hour').html(hour); 
    } 
} 

var timer; 

$(document).ready(function(e) 
{ 
    timer = new _timer 
    (
     function(time) 
     { 
      if(time == 0) 
      { 
       timer.stop(); 
      } 
     } 
    ); 
    timer.reset(0); 
}); 

HTML은

<div class="timer"> 
    <span class="hour"></span>:<span class="minute"></span>:<span class="second"></span> 
</div> 
<div> 
    <button onClick="timer.start(1000)">Start</button> 
    <button onClick="timer.stop()">Stop</button> 
    <button onClick="timer.reset(0)">Reset</button> 
</div> 

Answer 1

여기에 최종 작업 솔루션입니다.

자바 스크립트

function _timer(callback, interval) 
{ 
var time = time || 0;  // The default time of the timer 
var status = 0; // Status: timer is running or stoped 
var timer_id; // This is used by setInterval function 
var interval = interval || 1000; 
// this will start the timer 
this.start = function() 
{ 
      verifyTime(); 
    if(status == 0) 
    { 

     status = 1; 
     timer_id = setInterval(function() 
     { 
      switch(1) 
      { 
       case 1: 
       if(time < 86400) 
       { 
        time++; 
        generateTime(); 
        if(typeof(callback) === 'function') callback(time); 
       } 
       break; 
      } 
     }, interval); 
    } 
} 

// this will stop or pause the timer ex. timer.stop() 
this.stop = function() 
{ 
    if(status == 1) 
    { 
     status = 0; 
     clearInterval(timer_id); 
    } 
} 

// Reset the timer to zero or reset it to your own custom time 
this.reset = function(sec) 
{ 
    time = 0 
    generateTime() 
} 
// This methode return the current value of the timer and sends it to the database 
this.getTime = function() 
{ 
    return time; 
} 
// This methode return the status of the timer 
this.getStatus 
{ 
    return status; 
} 

// This methode will render the time variable to hour:minute:second format 
function generateTime() 
{ 
    console.log(time); 
    second = time % 60; 
    minute = Math.floor(time/60) % 60; 
    hour = Math.floor(time/3600) % 60; 

    second = (second < 10) ? '0'+second : second; 
    minute = (minute < 10) ? '0'+minute : minute; 
    hour = (hour < 10) ? '0'+hour : hour; 

    $('div.timer input.second').val(second); 
    $('div.timer input.minute').val(minute); 
    $('div.timer input.hour').val(hour); 
} 
function verifyTime() 
{ 
    var verifySec = Number($('div.timer input.second').val()); 
    second = time % 60; 
    verifySec === second ? second = second : time += verifySec - second % 60; 
      var verifyMin = Number($('div.timer input.minute').val()); 
      minute = (verifyMin - Math.floor(time/60)) * 60; 
      verifyMin === minute ? minute = minute : time += (verifyMin - Math.floor(time/60)) * 60; 
      var verifyHour = Number($('div.timer input.hour').val()); 
      hour = ((verifyHour - Math.floor(time/3600)) * 60) * 60; 
      verifyHour === hour ? hour = hour : time += ((verifyHour - Math.floor(time/3600)) * 60) * 60; 
} 
} 

var timer; 

$(document).ready(function(e) 
{ 
    timer = new _timer 
    (
     function(time) 
     { 
      if(time == 0) 
      { 
       timer.stop() 
      } 
     }, 
     1000 
    ); 
    $('#start').click(timer.start) 
    $('#stop').click(timer.stop) 
    $('#reset').click(timer.reset) 
    $('.hour').focus(timer.stop) 
    $('.hour').focusout(timer.start) 
    $('.minute').focus(timer.stop) 
    $('.minute').focusout(timer.start) 
    $('.second').focus(timer.stop) 
    $('.second').focusout(timer.start) 
}); 

HTML

<div class="timer"> 
<input type='text' class="hour" />:<input type='text' class="minute" />:<input type='text' class="second" /> 
</div> 
<div> 
    <button id='start'>Start</button> 
    <button id='stop'>Stop</button> 
    <button id='reset'>Reset</button> 
</div> 

대신 당신이 대신`$ ('div.timer span.second')의 입력을 사용할 수 스팬의