I am sure that there is an easy way to do this, I just been going around for the past two days trying to figure this out.
I have create a timer on a page, and it works great, but when saved I need to capture the time and save it to a field then store it in the database.
My code in the JavScript OnLoad Event is here:
var Clock = {
totalSeconds: 0,
startTimer: function() {
if (!this.interval) {
var self = this;
function pad(val) {
return val > 9 ? val : '0' + val;
}
this.interval = setInterval(function() {
self.totalSeconds += 1;
document.getElementById('minutes').innerHTML =
pad(Math.floor(self.totalSeconds / 60 % 60));
document.getElementById('seconds').innerHTML =
pad(parseInt(self.totalSeconds % 60));
// Update hidden input field with totalSeconds
}, 1000);
}
},
getTimer: function(){
Clock.totalSeconds;
},
resetTimer: function() {
Clock.totalSeconds = null;
clearInterval(this.interval);
document.getElementById('minutes').innerHTML = '00';
document.getElementById('seconds').innerHTML = '00';
delete this.interval;
},
pauseTimer: function() {
clearInterval(this.interval);
delete this.interval;
},
resumeTimer: function() {
this.startTimer();
},
};
document.getElementById('startbtn').addEventListener('click', function() {
Clock.startTimer();
});
document.getElementById('pausebtn').addEventListener('click', function() {
Clock.pauseTimer();
});
document.getElementById('resumebtn').addEventListener('click', function() {
Clock.resumeTimer();
});
document.getElementById('resetbtn').addEventListener('click', function() {
Clock.resetTimer();
});
In designer I have my HTML code
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="timer">
<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<div id="control">
<button id="startbtn">START</button>
<button id="pausebtn">PAUSE</button>
<button id="resumebtn">RESUME</button>
<button id="resetbtn">RESET</button>
<input type="hidden" id="totalSeconds" value="0" />
</div>
</body>
</html>
And my CSS
timer{
font-size: 100px;
font-weight: bold;
color: darkblue;}
control>#startbtn{
background-color:green;
color:white;}
control>#pausebtn{
background-color:blue;
color:white;}
control>#resumebtn{
background-color:orange;
color:white;}
control>#resetbtn{
background-color:red;
color:white;}
So all that works great,
Now when the user clicks save I need to be able to capture that time and save it to a field, i looked through the documentation, just cannot figure it out.
Thanks
Gary