Solved

complex javascript user defined time counter

Posted on 2009-04-03
24
311 Views
Last Modified: 2013-11-11
hi
i have a counter which currently counts down it start from 10 seconds displaying as 1000 in the text box and it ends at 0 i want to modify this with the following rules
the current decrement is based on milliseconds i want to change this scale to 10milliseconds each time ten milliseconds goes down then drop one point
when the value in the text box is 50 then it should stop the timer
<form name="counter"><input type="text" size="8" 

name="d2"></form> 
 

<script> 

<!-- 

// 

 var milisec=0 

 var seconds=10 

 document.counter.d2.value='30' 
 

function display(){ 

 if (milisec<=0){ 

    milisec=9 

    seconds-=1 

 } 

 if (seconds<=-1){ 

    milisec=0 

    seconds+=1 

 } 

 else 

    milisec-=1 

    document.counter.d2.value=seconds+"0"+milisec 

    setTimeout("display()",100) 

} 

display() 

--> 

</script>

Open in new window

0
Comment
Question by:mattibutt
  • 12
  • 12
24 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24059385
Since the output uses the format:

seconds+"0"+milisec

How will it ever be "50"?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24059527
What is the value supposed to represent?

Milliseconds?

If not use something like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Countdown </title>

</head>

<body>

Counter: <input id='counter' type='text'/>

<script type='text/javascript'>

  var counter   = document.getElementById( 'counter' )

  counter.value = '30000'

  var interval  = 10

  var timerID   = null
 

  function display(){

    var millisec = parseInt( counter.value )

    millisec -= interval

    counter.value = millisec

    if ( millisec == 50 ) {

      clearTimeout( timerID )

    }

  }

  timerID = setInterval( "display()", 10 )

</script>

</body>

</html>

Open in new window

0
 
LVL 11

Author Comment

by:mattibutt
ID: 24059546
hi HonorGod
thanks for your reply, i see your point what do you recommend since i have done this format it helped me see the 10 seconds as 1000 and it goes down from there you are right i don't see 50 the other thing is confusing me basically i want to decrement 10 seconds based on 10 millseconds each time 10 milliseconds goes down drop one point

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24059613
If you want 1000 to represent 10 seconds then we can display the time remaining (in milliseconds), divided by 10.  So, 10 seconds == 10000 milliseconds = 1000 points.

Then, we can simply decrement the counter every 10 milliseconds.

So, do you want to stop when the result == 50, or 5, or 0, or something else?
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24059616
hi HonorGod
sorry i didnt see your code posting before now i have seen it and tried it doesnt seem to work basically the counter stops at weird places

my scale
1000 units in the counter
each unit = 10 milliseconds

0
 
LVL 11

Author Comment

by:mattibutt
ID: 24059633
hi
i want to stop the timer when it reaches 50
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24059664
For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Countdown </title>

</head>

<body>

Counter: <input id='counter' type='text'/>

<script type='text/javascript'>

  var counter   = document.getElementById( 'counter' )

  counter.value = '3000'

  var interval  = 10

  var timerID   = null
 

  function display(){

    var val = parseInt( counter.value )

    val -= 1

    counter.value = val

    if ( val == 50 ) {

      clearTimeout( timerID )

    }

  }

  timerID = setInterval( "display()", 10 )

</script>

</body>

</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24059682
Is the "stop" you mentioned, a "pause", or a "complete stop"?

If it is a "pause", that reflects that your machine is busy doing something else, and the browser is getting interrupted...
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24059870
complete stop sorry just went on lunch it took
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24059875
long to reply to you
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24059910
What browser(s) are you using?  It works for me on:

FireFox 3.0.8
IE 7.0.5730.11
Chrome 1.0.154.53
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24059922
hi
i have tried your recent code it stops after i think 2 seconds on this number shown in the image
counter.JPG
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 11

Author Comment

by:mattibutt
ID: 24059933
i have tested it on chorome i can test in to ie or firefox to see the results
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24059990
it doesnt do anything at all in IE
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24060073
hi
i have tested your page without inserting into my application and it works , i have one question you know the total time is it 10 seconds?
0
 
LVL 41

Accepted Solution

by:
HonorGod earned 500 total points
ID: 24060075
What version of IE?!?

and did you test the complete HTML, or did you copy/paste the routine?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title> Countdown </title>

<script type='text/javascript'>

  var counter   = null

  var interval  = 10

  var timerID   = null
 

  function display(){

    var val = parseInt( counter.value )

    val -= 1

    counter.value = val

    if ( val == 50 ) {

      StopCount()

    }

  }
 

  function StartCount( id ) {

    counter = document.getElementById( id )

    if ( counter ) {

      timerID = setInterval( "display()", interval )

    }

    var starter = document.getElementById( 'starter' )

    var stopper = document.getElementById( 'stopper' )

    if ( starter ) {

      starter.setAttribute( 'disabled', 'disabled' )

    }

    if ( stopper ) {

       stopper.removeAttribute( 'disabled' )

    }

  }
 

  function StopCount() {

    if ( timerID ) {

      clearTimeout( timerID )

      timerID = null

      var starter = document.getElementById( 'starter' )

      var stopper = document.getElementById( 'stopper' )

      if ( starter ) {

        starter.removeAttribute( 'disabled' )

      }

      if ( stopper ) {

         stopper.setAttribute( 'disabled', 'disbled' )

      }

    }

  }

</script>

</head>

<body>

Counter: <input id='counter' type='text' value='30000'/>

<input type='button' id='starter' value='Start' onclick='StartCount("counter")'>

<input type='button' id='stopper' value='Stop'  onclick='StopCount()' disabled>

</body>

</html>

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24060106
Huh?

ok, so my stand alone HTML works for you.

What, exactly do you mean by:

i have one question you know the total time is it 10 seconds?
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24060114
this value here
counter.value = '3000'.
what exactly does it represent 10 seconds or more then 10
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24060116
The (integer) value in the counter field represents points.
Every 10 milliseconds, the count is decremented by 1.

So, if you want the value to represent 10 seconds, start the count at 1000.
ok?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24060123
3000 == 3000 points == 30 seconds.
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24060142
ok thanks i am still having problems to add this to my application i am going to look into it now
thanks
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24060194
ok, have fun.  Let me know if I can help with anything.
0
 
LVL 11

Author Closing Comment

by:mattibutt
ID: 31566212
thanks buddy i really appreciate your help i need add this to my application seems to me it will take longer as i have some other old script there which is causing a conflict
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24060409
Thanks for the grade & points.

Good luck & have a great day
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now