我试图让我的javascript秒表在某种输入框中运行,这样如果我想改变当前计算的时间我可以编辑小时,分钟或秒。我尝试将时间包装在html标签内,但时间不会从脚本发送到框中。关于如何使这项工作更好的想法???
的Javascript
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>
答案 0 :(得分:0)
这是最终的工作解决方案。
<强>的Javascript 强>
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>