• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 334
  • Last Modified:

complex javascript user defined time counter

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
mattibutt
Asked:
mattibutt
  • 12
  • 12
1 Solution
 
HonorGodCommented:
Since the output uses the format:

seconds+"0"+milisec

How will it ever be "50"?
0
 
HonorGodCommented:
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
 
mattibuttAuthor Commented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
HonorGodCommented:
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
 
mattibuttAuthor Commented:
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
 
mattibuttAuthor Commented:
hi
i want to stop the timer when it reaches 50
0
 
HonorGodCommented:
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
 
HonorGodCommented:
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
 
mattibuttAuthor Commented:
complete stop sorry just went on lunch it took
0
 
mattibuttAuthor Commented:
long to reply to you
0
 
HonorGodCommented:
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
 
mattibuttAuthor Commented:
hi
i have tried your recent code it stops after i think 2 seconds on this number shown in the image
counter.JPG
0
 
mattibuttAuthor Commented:
i have tested it on chorome i can test in to ie or firefox to see the results
0
 
mattibuttAuthor Commented:
it doesnt do anything at all in IE
0
 
mattibuttAuthor Commented:
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
 
HonorGodCommented:
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
 
HonorGodCommented:
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
 
mattibuttAuthor Commented:
this value here
counter.value = '3000'.
what exactly does it represent 10 seconds or more then 10
0
 
HonorGodCommented:
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
 
HonorGodCommented:
3000 == 3000 points == 30 seconds.
0
 
mattibuttAuthor Commented:
ok thanks i am still having problems to add this to my application i am going to look into it now
thanks
0
 
HonorGodCommented:
ok, have fun.  Let me know if I can help with anything.
0
 
mattibuttAuthor Commented:
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
 
HonorGodCommented:
Thanks for the grade & points.

Good luck & have a great day
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 12
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now