Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Feeling beaten and bloodied.

    I have a mediocre grasp on HTML but I am very new to JavaScript. I am also not entirely mathematically minded which makes it even worse. After 72 non consecutive hours, enough stress to burst a blood vessel in my eye and virtually no sleep. I have come up with absolutely NOTHING.

    I have tried a straight up hands on approach by just trying to get a small gist and applying some logic, I have tried cutting and pasting blocks of other peoples freebies, I have even gone to a friend who (supposedly) knows all about this but all I get is vague or no responses.

    I am hoping this will be my last stop before going unequivocally postal.

    All I need is a count down timer that displays on the page (in plain text), that counts down: Hours - Minutes - Seconds and when the count down finishes, a 3 digit random number is placed on the page.

    It doesn't appear to be that easy though? All I can find are timers that count down to or from a certain date and editing those scripts, I found impossible. It went straight over my head.

    Does a script not exist by which you can simply enter (as a script, not while the page is running) the amount of hours, minutes, seconds for the count down?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,517
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
     <span id="count1" ></span>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcCountDown(id,t){
     var o=document.getElementById(id),n=new Date(),s;
     if (typeof(t)=='string'&&o){
      s=t.split(/\D/);
      if (isFinite(s[0]*1)&&isFinite(s[1]*1)&&isFinite(s[2]*1)){
       zxcCountDown(id,new Date(n.getFullYear(),n.getMonth(),n.getDate(),n.getHours()+s[0]*1,n.getMinutes()+s[1]*1,n.getSeconds()+s[2]*1+1),0);
      }
     }
     if (typeof(t)=='object'){
      clearTimeout(zxcCountDown[id]);
      s=Math.floor((t-n)/1000);
      if (s>0){
       o.innerHTML=nu(Math.floor(s/(60*60)))+' Hours '+nu(Math.floor(s/60)%60)+' Minutes '+nu(s%60)+' Seconds';
       zxcCountDown[id]=setTimeout(function(){ zxcCountDown(id,t); },1000);
      }
      else {
       o.innerHTML=(Math.floor(Math.random()*1000)+'000').slice(0,3);
      }
     }
    }
    
    function nu(n){
     return (n>9?'':'0')+n;
    }
    
    zxcCountDown('count1','1:2:20');
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Code:
    <!DOCTYPE HTML>
    <head>
    
    <script type = "text/javascript">
    
    var timeInSecs;
    var ticker;
    var s = "";
    var dhours;  // displayed
    var dmins;
    var dsecs;
    
    function startTimer(secs){
    timeInSecs = parseInt(secs);
    ticker = setInterval("tick()",1000); 
    tick(); // to start counter display right away
    }
    
    function tick() {
    var secs = timeInSecs;
    if (secs>0) {
    timeInSecs--;
    }
    else {
    clearInterval(ticker); // stop counting at zero
    document.getElementById("countdown").innerHTML = "TIME EXPIRED" + "<br>";
    var randy = Math.floor((Math.random()*900)+100);  // 100 to 999
    document.getElementById("rannum").innerHTML = randy;
    return false;
    }
    
    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    
    if (hours<10) {dhours = "0" + hours + ":"}
    else {dhours = hours +":"}
    if (dhours == "00:") {dhours = ""}
    if ((mins<10) && (dhours !="")) {dmins = "0" + mins + ":"}
    else {dmins = mins+ ":"}
    if ((dhours == "") && (dmins == "00:")) {mins = ""}
    if ((dhours == "") && (dmins == "")) {s = " seconds"}
    if ((secs<10) && (dmins !="")) {dsecs = "0" + secs}
    else {dsecs = secs}
    
    var result =  dhours + dmins + dsecs + s;
    
    document.getElementById("countdown").innerHTML = result;
    }
    
    </script>
    
    </head>
    
    <body onload = "startTimer(20 * 60)">
    
    <span id = "countdown" style="font-weight: bold;"></span>
    <span id = "rannum" style="font-weight: bold;"></span>
    </body>
    </html>
    Change the countdown at <body onload = "startTimer(20 * 60)"> i.e. 20 * 60 seconds = 20 minutes. 200 * 60 = 3hrs 20 mins

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 05-18-2014 at 02:42 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts

    another approach...

    only any good if you are counting down from less than 23 hrs 59 minutes 59 seconds...

    Code:
    <body>
    
    <div id="disp"></div>
    <div id="num"></div>
    <script>
    (function () {
    var hrs=0; // number of hours to count down from
    var mins=0; // number of minutes to count down from
    var secs=15; // number of seconds to count down from
    
    var dt = new Date(2104,5,6,hrs,mins,secs);
    
    function clicker(){
    dt.setTime(dt.getTime()-1000);
    var hr = dt.getHours(); 
    var min = dt.getMinutes();
    var sec= dt.getSeconds();
    document.getElementById("disp").innerHTML=hr+":"+min+":"+sec;
    if (hr==0 && min == 0 && sec ==0){
    document.getElementById("num").innerHTML= Math.floor((Math.random()*900)+100); 
    } else {
    setTimeout(clicker,1000);
    }
    }
    clicker();
    })();
    
    
    </script>
    </body>

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by xelawho View Post
    only any good if you are counting down from less than 23 hrs 59 minutes 59 seconds...
    The OP asked for hours, minutes, seconds. And I don't suupose anyone remains on the site for longer than 24 hours.

    But <body onload = "startTimer(3600 * 60)"> starts correctly at 60 hours.

    The OP says "All I can find are timers that count down to or from a certain date" which to me suggests that is not what he wants.

    @Redhorn. Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose.
    Last edited by Philip M; 05-19-2014 at 12:46 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I think you may have misunderstood what my code does, Philip. The date it starts from is irrelevant as we are only looking at the time part of the date object

    And looking at it again, it could be further simplified...

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
    	</head>
        <body>
    
    <div id="disp"></div>
    <div id="num"></div>
    <script>
    (function () {
    var hrs=0; // number of hours to count down from
    var mins=3; // number of minutes to count down from
    var secs=15; // number of seconds to count down from
    
    var dt = new Date(2104,5,6,hrs,mins,secs);
    
    function clicker(){
    dt.setTime(dt.getTime()-1000);
    var str = dt.toTimeString().split(" ")[0];
    document.getElementById("disp").innerHTML=str;
    if (str=="00:00:00"){
    document.getElementById("num").innerHTML= Math.floor((Math.random()*900)+100); 
    } else {
    setTimeout(clicker,1000);
    }
    }
    clicker();
    })();
    
    
    </script>
    </body>
    </html>

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by xelawho View Post
    I think you may have misunderstood what my code does, Philip. The date it starts from is irrelevant as we are only looking at the time part of the date object
    Sorry, my bad. Need new spectacles!

    But it might be better to use setInterval() rather than setTimeout() if accuracy over a longer period is required.

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
    	</head>
        <body>
    
    <div id="disp"></div>
    <div id="num"></div>
    
    <script type = "text/javascript">
    
    (function () {
    var hrs = 0; // number of hours to count down from
    var mins = 3; // number of minutes to count down from
    var secs = (5+1); // number of seconds to count down from - add one to start at once
    
    var dt = new Date(2104,5,6,hrs,mins,secs);
    
    function clicker() {
    dt.setTime(dt.getTime()-1000);
    var str = dt.toTimeString().split(" ")[0];
    document.getElementById("disp").innerHTML=str;
    if (str=="00:00:00"){
    document.getElementById("num").innerHTML= Math.floor((Math.random()*900)+100);   // show a 3-digit random number when time is up
    clearInterval(sint);
    } 
    }
    clicker();  // start at once
    var sint = setInterval(clicker,1000);
    })();
    
    </script>
    
    </body>
    </html>
    Last edited by Philip M; 05-20-2014 at 10:46 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •