I've created a countdown timer using javascript in asp.net. After completion of time, Button1 becomes disabled, but when I reload the page, the countdown timer is reset and Button1 is enabled.
I want to permanently disable Button1 when timer is equal to zero. My code is:
var tim;
var min = 01;
var sec = 00;
var f = new Date();
function f1() {
f2();
}
function f2() {
if (parseInt(sec) > 0) {
sec = parseInt(sec) - 1;
document.getElementById("showtime").innerHTML = ""+min+" Minutes ,"+sec+" Seconds";
tim = setTimeout("f2()", 1000);
}
else {
if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
if (parseInt(min) == -1) {
clearTimeout(tim);
$("#Button1").prop('disabled', true);
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "" + min + " Minutes ," + sec + " Seconds";
tim = setTimeout("f2()", 1000);
}
}
}
}
<body onload="f1()">
<div><h3>Time will be finished after:</h3>
</div>
<div id="showtime"></div>
<div> <asp:Button ID="Button1" runat="server" Text="Submit"/></div>`
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
function f2() {
if (parseInt(sec) > 0) {
sec = parseInt(sec) - 1;
document.getElementById("showtime").innerHTML = ""+min+" Minutes ,"+sec+" Seconds";
tim = setTimeout("f2()", 1000);
}
else {
if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
if (parseInt(min) == -1) {
clearTimeout(tim);
$("#Button1").prop('disabled', 'true');
storeValue('disabled', 'true');
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "" + min + " Minutes ," + sec + " Seconds";
tim = setTimeout("f2()", 1000);
}
}
}
}
function storeValue(key, value) {
if (localStorage) {
localStorage.setItem(key, value);
} else {
$.cookies.set(key, value);
}
}
function getStoredValue(key) {
if (localStorage) {
return localStorage.getItem(key);
} else {
return $.cookies.get(key);
}
}
function f1() {
f2();
var model =getStoredValue('disabled');
if(model == 'true')
{
$("#Button1").prop('disabled', 'true');
}
}
var tim;
var min = 01;
var sec = 00;
var f = new Date();
</script>
Use this code and make the thrid party localstorage to use in browser
When you reload the page, the state of the page is completely reset so it's as if a new visitor has found your page so you need to be able to store that state between visits.
One solution would be to use a cookie which you could set when the timer expires, and check for the presence of the cookie when the page loads. If it's there, disable the button straight away without a timer.
A more complicated solution would be to investigate saving session state on your server, but I've no idea what you have going on server-side so I can't give you much to go on there.
You could set a cookie when timer is off. And at every page load check for the cookie and disable the button if required. There is no other way.
FYI: you could use the same cookie to disable the button at server side itself.
Javascript
document.getElementById("myBtn").disabled = true;
or if u need it with a jquery- Click
$('.rbutton').on('click',function() {
$(this).prop("disabled",true);
});
Related
I'm making a shot clock for my school's basketball team. A shot clock is a timer that counts down from 24 seconds. I have the skeleton for the timer right now, but I need to have particular key bindings. The key bindings should allow me to rest, pause, and play the timer.
var count=24;
var counter=setInterval(timer, 1000);
function timer()
{
count=count-1;
if (count <= 0)
{
clearInterval(counter);
return;
}
document.getElementById("timer").innerHTML=count + " secs";
}
I'm not sure what you meant by "rest" the timer, I interpret this as "pause", so:
Space = Pause / Play.
R = Reset.
var
count=24,
counter = setInterval(timer, 1000),
running = true;
function timer() {
count -= 1;
if (count <= 0) {
clearInterval(counter);
}
document.getElementById("timer").innerHTML = count + " secs";
}
window.addEventListener("keydown", function(e) {
switch(e.keyCode) {
case 32: // PLAY
running ? clearInterval(counter) : counter = setInterval(timer, 1000);
running = !running;
break;
case 82: // RESET
clearInterval(counter);
document.getElementById("timer").innerHTML = 24 + " secs";
count = 24;
running = false;
}
});
<div id="timer">24 secs</div>
I am not able to comment yet, but I recommend checking out this post Binding arrow keys in JS/jQuery
The linked post explains how to bind arrow keys using js/jquery. Using http://keycode.info/ you can find out the keycodes of your desired keys and replace the current values then continue to build your code from there.
Here is my code sample: http://codepen.io/anon/pen/vLvWJM
$(document).ready(function() {
var $timer = $('#timer');
var $timerStatus = $('#timerStatus');
var timerValue = 24;
var intervalId = null;
var timerStatus = 'stopped';
if(!$timer.length) {
throw 'This timer is missing a <div> element.';
}
$(document).keydown(function(k) {
if(k.which == 80) {
if(timerStatus === 'playing') {
clearInterval(intervalId);
timerStatus = 'stopped';
updateTimerStatus();
return;
}
intervalId = setInterval(function() {
playTimer();
timerStatus = 'playing';
updateTimerStatus();
}, 1000);
} else if(k.which == 82) {
clearInterval(intervalId);
resetTimer();
updateText();
timerStatus = 'stopped';
updateTimerStatus();
}
});
function playTimer() {
if(timerValue > 0) {
timerValue--;
updateText();
}
}
function resetTimer() {
timerValue = 24;
}
function updateText() {
$timer.html(timerValue);
}
function updateTimerStatus() {
$timerStatus.html(timerStatus);
}
});
<div id="timerStatus">stopped</div>
<div id="timer">24</div>
Please help me with my code.My problem is when the timer is finished, it shows -1:60 instead of showing 0:00.I tried different ways of else statement,but in vain. When I change the condition in if statement to x>0,the timer doesn't go down from 0:60. Any help will be appreciated. I tried different else, if else statements,nothing helps.
Thank you in advance.
<h1 id='session' onClick='general()'>2</h1>
JS:
var seconds=60;
var x=document.getElementById('session').innerHTML-1;
var t;
function timer(){
if(x>=0){
seconds--;
if(seconds<10){
seconds='0'+seconds;
};
if(seconds==0){
x--;
seconds=60;
}
}
document.getElementById('session').innerHTML=x+':'+seconds;
}
function stoptimer(){
clearInterval(t);
}
var on=true;
function general(){
if(on){
on=false;
t = setInterval(timer,200);
}else{
on=true;
stoptimer();
}
}
The problem is all because of the timer funtion, so I've made a few changes to your function, and rewritten it. I ran it in the jsfiddle and it's working.
function timer(){
if(x>=0 && flag==false){
seconds--;
if(seconds<10){
seconds='0'+seconds;
};
if(seconds==0){
x--;
seconds=60;
}
}
if (x == -1){
flag=true;
x = 0;
seconds = '00';
}
document.getElementById('session').innerHTML=x+':'+seconds;
}
Make sure you take a global variable var flag=false; in order for this function properly.
Here is the link for the jsfiddle I created: https://jsfiddle.net/35w4nkzm/1/
I hope that helped.
I created a fiddle for you, it countdowns the timer from 60 seconds to 00.
Fiddle : https://jsfiddle.net/njw73naj/
HTML
<h1>
<span id="min">0</span>
:
<span id="sec">00</span>
</h1>
JS
var seconds = 60,
secondDom = document.getElementById("sec");
secondDom.innerHTML = seconds;
var countdown = function(){
seconds--;
if(seconds < 0){
clearInterval(timer);
}else{
secondDom.innerHTML = (seconds < 10 ? "0" + seconds : seconds);
}
}
var timer = setInterval(countdown,1000);
Hope this helps. :)
I've removed certain unnecessary things from your code. though,
you should know it's not really 2 minutes. my "setInterval" is based
on your original setInterval.
HTML:
<h1 id='session' onclick='general()'>1</h1>
JS:
<script>
var seconds = 60;
var x = document.getElementById('session').innerHTML;
var t;
function timer(){
if (x === 0 && seconds === 0)
{
stoptimer(t);
}
else if(seconds === 0){
seconds = 60;
x--;
}
else{
seconds--;
}
document.getElementById('session').innerHTML = x + ':' + seconds;
}
function stoptimer(){
clearInterval(t);
}
var on = true;
function general(){
if(on){
on=false;
t = setInterval(timer,200);
}else{
on=true;
stoptimer();
}
}
</script>
i am doing online exam. I set the timer for exam using javascript. that is working perfect.i have little knowledge in javascript. i don't know how to show the alert box when the half of the test over. Please give the solution to me.
My code for timer:
function countDown() {
sec--;
if (sec == -01) {
sec = 59;
min = min - 1;
if(min==-01)
{
min=59;
hour=hour-1;
}else
{
hour=hour;
}
} else {
min = min;
}
if (sec<=9) { sec = "0" + sec; }
time = (hour<=9 ? "0" + hour : hour) + " : " + (min<=9 ? "0" + min : min) + " : " + sec + "";
if (document.getElementById) { document.getElementById('timer').innerHTML = time; }
SD=window.setTimeout("countDown();", 1000);
if (hour=='00'&& min == '00' && sec == '00') { sec = "00";min="00"; window.clearTimeout(SD); window.location=document.forms[0].action+"?fs=yes";}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();`enter code here`
}
}
}
I think you have total number of questions with you.
When the user answering each question u can increment a temp variable.
then check whether that temp equals to half of your total questions then u can give an alert.
like .
alert("Half of the test completed");
I am trying to create a timeout on my webpage by counting down from 1min to 0 seconds, then displaying a message. If the user moves the mouse (i.e is still active on the page) the timer gets reset. I cant get the reset function to reset my values. What it is doing is counting down the time faster than before and getting stuck in an unbreakable cycle.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var mins = 1;
var secs = 0;
var timer;
function start()
{
timer = setInterval("update()", 1000);
}
function reset() {
var mins = 1
var secs = 0;
var timer;
start();
}
function update()
{
var timeField = document.getElementById("time");
if (secs == 0)
{
if (mins == 0)
{
timeField.innerHTML = "Time's up!";
clearInterval(timer);
alert("Time's up");
return;
}
mins--;
secs = 59;
}
else
{
secs--;
}
if (secs < 10)
{
timeField.innerHTML = 'Time left: ' + mins + ':0' + secs;
}
else
{
timeField.innerHTML = 'Time left: ' + mins + ':' + secs;
}
}
</script>
</head>
<body onload="start();" onmousemove="reset();">
<div id="time" >
</div>
</body>
</html>
How can I get it to reset the countdown and start again? I am new to javascript so please be patient.
Modify your reset function,
function reset() {
mins = 1;
secs = 0;
window.clearInterval(timer);
start();
}
Declare timer outside of all functions.
I have a Javascript block in which it creates a timer based on mouse movements. If you are not doing any activity the timer starts and when it reaches say 1 minute left time it displays an alert to the user and if the user does not respond it navigates to another page. The problem I am facing is that when I show an alert to the user the timer execution stops and it just waits for the user to press enter. What I need is that the timer should continue in the background whether the user clicks OK or not.
var mins, secs, TimerRunning, TimerID;
TimerRunning = false;
var activity;
document.documentElement.onmousemove = function () {
clearInterval(activity);
activity = Init();
// activity = setInterval(saySomething, 5000);
}
function Init() //call the Init function when u need to start the timer
{
mins = 2;
secs = 0;
StopTimer();
StartTimer();
}
function StopTimer() {
if (TimerRunning)
clearTimeout(TimerID);
TimerRunning = false;
}
function StartTimer() {
TimerRunning = true;
window.status = "if no activity is detected you will be logged out in " + Pad(mins) + ":" + Pad(secs);
TimerID = self.setTimeout("StartTimer()", 1000);
Check();
if (mins == 0 && secs == 0)
StopTimer();
if (secs == 0) {
mins--;
secs = 60;
}
secs--;
}
function Check() {
if (mins == 1 && secs == 0)
toggle();
alert("You have only 2 minutes remaining");
if (mins == 0 && secs == 0) {
window.location = "http://Test";
}
}
function Pad(number) //pads the mins/secs with a 0 if its less than 10
{
if (number < 10)
number = number;
return number;
}
Instead of using an alert, just use a modal dialog (basically a div that floats on top of everything else), or in the worst case a popup window.
I highly doubt this is feasible in javascript as it runs inside browser's ui thread...
But you can do what you want with jquery-ui (dialog widget) or similar javascript framework!