Solved

complex javascript user defined time counter

Posted on 2009-04-03
24
308 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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

708 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