Currently I am trying to create a minutes:second timer by requesting the user to type how long they want in minutes into the textbox which is textbox2 but when I tried to do get.ElementbyID.value for the variable mins,it does not work and gave error(NULL error) as I try global variable which also does not work.
I required the user to be able to type into the textbox in minutes and when pressing the start button will start the time the user requested.
var mins = 1;
var secs = mins * 60;
var currentSeconds = 0;
var currentMinutes = 0;
function start2() {
start();
}
function start() {
setTimeout(Decrement, 1000)
}
function Decrement() {
currentMinutes = Math.floor(secs / 60);
currentSeconds = secs % 60;
if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
secs--;
document.getElementById("timer").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
if (secs !== -1) {
setTimeout('Decrement()', 1000);
}
if (secs == -1) {
alert("hi");
}
}
<input type="text" id="textbox2" value="0"></input>
<br/>
<button onclick="start2();">Start Timer</button>
<br/>
<p id="timer"></p>
I think your problem was you were trying to set the mins variable on page load. Instead, load the value in your start function.
You also need to calculate your seconds after determining the minutes.
var mins = 1;
var secs = mins * 60;
var currentSeconds = 0;
var currentMinutes = 0;
function start2() {
start();
}
function start() {
mins = document.getElementById('textbox2').value;
// set a default of 1 minute if it is less than one or not a number..
mins = isNaN(mins) || mins < 1 ? 1 : mins;
// calculate seconds down here, as well.
secs = mins * 60;
setTimeout(Decrement, 1000);
}
function Decrement() {
currentMinutes = Math.floor(secs / 60);
currentSeconds = secs % 60;
if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
secs--;
document.getElementById("timer").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
if (secs !== -1) {
setTimeout('Decrement()', 1000);
}
if (secs == -1) {
alert("hi");
}
}
<input type="text" id="textbox2" value="0"></input>
<br/>
<button onclick="start2();">Start Timer</button>
<br/>
<p id="timer"></p>
var secs = 0;
function start(s) {
secs = s;
schedule();
}
function schedule() {
setTimeout(Decrement, 1000)
}
function Decrement() {
var currentMinutes = Math.floor(secs / 60);
var currentSeconds = secs % 60;
if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
document.getElementById("timer").innerHTML = currentMinutes + ":" + currentSeconds;
if (secs-- > 0 )
schedule()
else
alert("hi");
}
<input type="text" id="textbox2" value="0"></input>
<br/>
<button onclick="start( parseInt( document.getElementById('textbox2').value ) );">Start Timer</button>
<br/>
<p id="timer"></p>
Related
I have a problem were the timer keeps resetting to a minute when going to other questions is there a way i can keep the time going until it reach the final question ?
here is the code:
<script>
var seconds = 60;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Time Out";
alert("You're out of time!");
window.location.href = "index.php";
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
</script>
and
<h4 style="color:#FF0000;position:absolute;left:70%;top:30%;" align="center" >
<span id="iTimeShow">Time Remaining: </span><br/>
<span id='countdown' style="font-size:25px;"></span>
</h4>
To keep the timer running until the last question or after the timer runs out it will going to the index
I use the following link codes, it works well, but I want the button to be clicked only once when the time is zero?
Enabling Button after certain time frame in Jquery html?
I changed the code as follows but it did not work?
function enableButton() {
var timer2 = "00:05";
var interval = setInterval(function() {
var timer = timer2.split(':');
//by parsing integer, I avoid all extra string processing
var minutes = parseInt(timer[0], 10);
var seconds = parseInt(timer[1], 10);
--seconds;
minutes = (seconds < 0) ? --minutes : minutes;
if (minutes < 0) clearInterval(interval);
seconds = (seconds < 0) ? 59 : seconds;
//minutes = (minutes < 10) ? minutes : minutes;
$('.countdown').html(minutes + ':' + seconds);
timer2 = minutes + ':' + seconds;
if (minutes == 0 && seconds == 0) {
clearInterval(interval);
document.getElementById('Send_Active').addEventListener('click', function() {
enableButton();
alert('ok');
});
} else {
//document.getElementById('Send_Active').setAttribute('hidden', true);
}
}, 1000);
}
enableButton();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div id="countdown" class="countdown"></div>
</div>
<div class="form-group">
<a id="Send_Active">send again</a>
</div>
You can use removeEventListener() to remove the listener you added.
const btnSendActive = document.getElementById('Send_Active');
function buttonClicked() {
btnSendActive.removeEventListener('click', buttonClicked);
enableButton();
alert('ok');
}
function enableButton() {
var timer2 = "00:03";
var interval = setInterval(function() {
var timer = timer2.split(':');
var minutes = parseInt(timer[0], 10);
var seconds = parseInt(timer[1], 10);
--seconds;
minutes = (seconds < 0) ? --minutes : minutes;
if (minutes < 0) clearInterval(interval);
seconds = (seconds < 0) ? 59 : seconds;
$('.countdown').html(minutes + ':' + seconds);
timer2 = minutes + ':' + seconds;
if (minutes == 0 && seconds == 0) {
clearInterval(interval);
btnSendActive.addEventListener('click', buttonClicked);
}
}, 1000);
}
enableButton();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div id="countdown" class="countdown"></div>
</div>
<div class="form-group">
<a id="Send_Active">send again</a>
</div>
Hi there I have a stopwatch embedded in my website, however I have a problem. When the seconds reach 60 therefore 1 minute they should reset to 00. However in this case while the minute will increase every 60 seconds the seconds will not reset to zero. Here is my code
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10);
if (secs <= 9) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if (tenths <= 9) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>
Any help much appreciated
You can use that code
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10);
if(secs >= 60)
{
secs = secs - ( mins * 60 );
}
if ((secs).toString().length === 1) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if ((tenths).toString().length === 1) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>
Just include a modulo by 60 to line number 36 to properly reset seconds to 0 (line commented to highlight):
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10) % 60; // <-- see here for change
if (secs <= 9) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if (tenths <= 9) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>
I found the code which is can run my stopwatch. but iwant to follow denmark country timezone to run my code. how to d
<script type="text/javascript">
ElapsedTimeLogger = function(dateElementId, elapsedElementId, hiden, interval) {
var container = $(elapsedElementId);
var time = parseDate($(dateElementId).val());
var interval = interval;
var timer;
function parseDate(dateString) {
var date = new Date(dateString);
return date.getTime();
}
function update() {
var systemTime = new Date().getTime();
elapsedTime = systemTime - time;
container.html(prettyPrintTime(Math.floor(elapsedTime / 1000)));
$(hiden).val(prettyPrintTime(Math.floor(elapsedTime / 1000)));
}
function prettyPrintTime(numSeconds) {
var hours = Math.floor(numSeconds / 3600);
var minutes = Math.floor((numSeconds - (hours * 3600)) / 60);
var seconds = numSeconds - (hours * 3600) - (minutes * 60);
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
var time = hours + ":" + minutes + ":" + seconds;
return time;
}
this.start = function() {
timer = setInterval(function() {update()}, interval * 1000);
}
this.stop = function() {
clearTimeout(timer);
}
}
$(document).ready(function () {
var timeLogger = new ElapsedTimeLogger("#date", "#elapsed","#stoppedid", 1);
timeLogger.start();
$("#confirm").click(function() { //Stop timer upon clicking the Confirm Button
timeLogger.stop();
});
});
</script>
Thank you in advance.
I cant post another question thats why i need to edit may other questions
remove disabled property of input[name=stwa] and add readonly property for there
Use navigator.cookie to save time on javascript
Here is your solutions
if(localStorage.getItem("sec"))
{
var sec = localStorage.getItem("sec");
var min = localStorage.getItem("min");
var hour = localStorage.getItem("hour");
stopwatch("Start");
}else{
var sec = 0;
var min = 0;
var hour = 0;
}
function stopwatch(text) {
sec++;
if (sec == 60) {
sec = 0;
min = min + 1; }
else {
min = min; }
if (min == 60) {
min = 0;
hour += 1; }
localStorage.setItem("sec", sec);
localStorage.setItem("min", min);
localStorage.setItem("hour", hour);
if (sec<=9) { sec = "0" + sec; }
document.clock.stwa.value = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;
if (text == "Start") { document.clock.theButton.value = "Start "; }
if (text == "Stop ") { document.clock.theButton.value = "Stop"; }
if (document.clock.theButton.value == "Start") {
window.clearTimeout(SD);
return true; }
SD=window.setTimeout("stopwatch();", 1000);
}
function stop() {
x.stop();
document.getElementById('counter').value = formatTime(x.time());
clearInterval(clocktimer);
localStorage.clear();
}
<form name="clock" action="save_time_log.php" method="post">
<div class="form-group">
<input type="text" class="form-control time_tracker" disabled name="stwa" placeholder="00:00:00">
</div>
<input type="button" name="theButton" onClick="stopwatch(this.value);" class="btn btn-block btn-default btn-flat" value="Start" />
<input type="submit" name="stops" value="Stop" onClick="stop();" class="btn btn-block btn-default btn-flat"/>
</form>
I have a timer where it has a pause/resume button, but whenever I hit the pause button, it kills the script and I can't resume the time.
Also is there a way I can get it to say a response once the time has expired? I have another timer count for when the time runs out and it shows how long it is past, but is there way I can have another text field so that I can locate it in a different place on the page?
html..
<script type="text/javascript">
timer = new Countdown();
timer.init();
</script>
<select id="period" onchange="start()">
<option value="0">Select time required</option>
<option value="30">30 Seconds</option>
<option value="60">1 Minute</option>
<option value="120">2 Minutes</option>
<option value="300">5 Minutes</option>
<option value="900">15 minutes</option>
<option value="1800">30 minutes</option>
<option value="2700">45 minutes</option>
<option value="3600">60 minutes</option>
</select> <span id="countdown" style="font-weight: bold;"></span>
<br>
<br>
<input type="button" value="Pause" onclick="stopwatch(this);" />
Javascript
<script>
var timeInSecs;
var ticker;
var start_time;
function Countdown(start) {
this.start_time = start === undefined ? "1:00" : start ;
this.target_id = "#timer";
this.name = "timer";
start_time = this.start_time;
}
Countdown.prototype.init = function () {
this.reset();
ticker = setInterval(this.name + '.tick()', 1000);
}
Countdown.prototype.reset = function () {
time = this.start_time.split(":");
this.minutes = parseInt(time[0]);
this.seconds = parseInt(time[1]);
this.update_target();
}
Countdown.prototype.tick = function () {
if (this.seconds > 0 || this.minutes > 0) {
if (this.seconds == 0) {
this.minutes = this.minutes - 1;
this.seconds = 59
} else {
this.seconds = this.seconds - 1;
}
}
this.update_target()
}
Countdown.prototype.update_target = function () {
seconds = this.seconds;
if (seconds < 10) seconds = "0" + seconds;
$(this.target_id).val(this.minutes + ":" + seconds)
}
var timer = new Countdown();
timer.init();
function start() {
var s = document.getElementById("period").value;
document.getElementById("period").disabled = true;
startTimer(s);
}
function startTimer(secs) {
timeInSecs = parseInt(secs);
document.getElementById("countdown").style.color = "black";
clearInterval(ticker);
ticker = setInterval("tick()", 1000);
tick(); // to start counter display right away
}
function tick() {
var secs = timeInSecs;
if (secs > 0) {
timeInSecs--;
showTime(secs);
} else {
timeInSecs--;
document.getElementById("countdown").style.color = "red";
document.getElementById("countdown").innerHTML = "You have exceeded your time by " + (hhmmss(Math.abs(timeInSecs)));
document.getElementById("period").disabled = false;
}
}
function showTime(secs) {
var hours = Math.floor(secs / 3600);
secs %= 3600;
var mins = Math.floor(secs / 60);
secs %= 60;
var result = ((hours < 10) ? "0" : "") + hours + ":" + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs;
document.getElementById("countdown").innerHTML = result;
}
function stopwatch(btn) {
if (btn.value == "Pause") {
clearInterval(ticker);
btn.value = "Resume";
} else {
btn.value = "Pause"
var timer = new Countdown($('#timer').val());
timer.init();
}
}
function hhmmss(secs) {
var hrs = Math.floor(secs / 3600);
var mns = Math.floor(secs / 60) % 60;
secs = secs % 60;
if (hrs < 10) hrs = "0" + hrs;
if (mns < 10) mns = "0" + mns;
if (secs < 10) secs = "0" + secs;
return mns + " minutes " + secs + " seconds";
}
</script>