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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    May 2017
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with a countdown timer

    Hello ,

    First of all i am not a programmer so i am truly stepping on unknown paths here . I did read and research a lot about this but i couldn't really understand how to make it work . So .....

    I've got a countdown timer that works for me like a charm BUT my problem is that when ever i refresh the page the timer starts allover again , something that i do not want . I do understand that i have to save it inside the server , in order for all users be able to see exactly the same counter , but i don't know how .

    Here is the code (i have it inside a div that the editor auto creates it , i am using winx webside editor so it's not like real html coding ) .


    <script type = "text/javascript">

    var timeInSecs;
    var ticker;

    var audio = new Audio('http://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3');


    function startTimer(secs) {
    timeInSecs = parseInt(secs);
    ticker = setInterval("tick()", 1000);
    }

    function tick( ) {
    var secs = timeInSecs;
    if (secs > 0) {
    timeInSecs--;

    }
    else {
    clearInterval(ticker);
    audio.play();
    startTimer(43 * 60); // start again
    }

    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    var pretty = ( (hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs;
    document.getElementById("countdown").innerHTML = pretty;
    }



    startTimer(43 * 60); // 48 hours in seconds

    </script>

    <span id="countdown" style="font-weight: bold;"></span>

    </div>

    Thank you for your time and for any response and if i am in the wrong section please forgive me cause i know not what i am doing ....
    Oh and if you kindly could post the hole thing back again cause i don't want to get lost trying to figure out where to put partial codes . I am sorry for being so ignorance .

    P.S : This is for a clan website so it's not like i will get a profit by doing that .

    Thank you again

  2. #2
    Regular Coder
    Join Date
    Oct 2014
    Location
    California
    Posts
    397
    Thanks
    1
    Thanked 82 Times in 81 Posts
    If you want to store this information on a server then you have a surprisingly complex need. You need server-side code, not JavaScript. You would need to use PHP or something similar and you'd need to store the information in a database such as a MySQL database.

    If it's a countdown then all you really need to store is the target time, when you want the countdown to end. From there you just read the target time by connecting to the server and getting it and then you can use JavaScript to calculate the difference between the target time and the current time and display a count-down.

    You may not need a Database though ...

    You could also just hard-code the target time into the source code of the page I suppose. In that case, all you really need to do is calculate the difference between the current time and the target time and start the count-down at that calculated time whenever someone visits the page!

    In that case, this StackOverflow post illustrates it better than I can think to at the moment so check it out:

    javascript - how to countdown to a date - Stack Overflow

    Pay no mind to the question but look at the first answer, it pretty much explains how to do exactly what you're asking for without using any kind of Database or server-side code. If you want to change the target time you just have to update your HTML file.

    EDIT:

    On principle I think it's important to actually post an answer here because that link could go dead in the future, thus robbing someone else of possibly getting the answer. Here's what it says:

    PHP Code:
    <script>
    var 
    end = new Date('02/19/2012 10:1 AM');

        var 
    _second 1000;
        var 
    _minute _second 60;
        var 
    _hour _minute 60;
        var 
    _day _hour 24;
        var 
    timer;

        function 
    showRemaining() {
            var 
    now = new Date();
            var 
    distance end now;
            if (
    distance 0) {

                
    clearInterval(timer);
                
    document.getElementById('countdown').innerHTML 'EXPIRED!';

                return;
            }
            var 
    days Math.floor(distance _day);
            var 
    hours Math.floor((distance _day) / _hour);
            var 
    minutes Math.floor((distance _hour) / _minute);
            var 
    seconds Math.floor((distance _minute) / _second);

            
    document.getElementById('countdown').innerHTML days 'days ';
            
    document.getElementById('countdown').innerHTML += hours 'hrs ';
            
    document.getElementById('countdown').innerHTML += minutes 'mins ';
            
    document.getElementById('countdown').innerHTML += seconds 'secs';
        }

        
    timer setInterval(showRemaining1000);
    </script>
    <div id="countdown"></div> 
    The important part here is that showRemaining() function and the end variable. The end variable is your target time, when the countdown will reach ZERO. The showRemaining() function creates a new date object that, by default, represents the time RIGHT NOW. Then it just subtracts one from the other to get the difference and find out if the time is up or not.

    If the time is not up, it then uses some simple math to show the remaining time in days, hours, minutes and seconds.

    SPECIAL NOTE: This will use the user's local time. Why does that matter? If you set your target time considering your location but your user is in a different timezone, their countdown will not be accurate because it will countdown between their current time and the target time in their timezone. So if the target time is noon and you're in California, a user in Texas will have their timer expire when it's only 10:00 am your time because Texas is two hours ahead.

    One way to avoid this is to put your target time in UTC like so:

    PHP Code:
    <script>
    var 
    end = new Date('05/19/2017 17:00 UTC'); 
    </script> 
    You could also use your actual time zone but I don't recommend it if you're somewhere that uses daylight savings time. For example right now California is in daylight savings time so the correct acronym would be "PDT"
    (Pacific Daylight-Savings Time) and not the normal "PST" (Pacific Standard Time). That's more confusing in my book than just looking up the UTC time for your event.
    Last edited by sagebrushfire; 05-19-2017 at 06:43 PM.
    I almost always format my code examples with [php][/php] tags because it looks nicer than the regular [code] tag. That does not mean the code example is in PHP.

  3. #3
    New Coder
    Join Date
    May 2017
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah but restarting the timer everytime someone is visit the page is exactly what i do not want .

    What i want is the same timer that this guy has on his page BnS Celestial Basin (the countdown hour : minutes : seconds not the date etc) .

    I guess tho it's something that i will not get cause that requires to be a true programmer rather than a "hobbyist" like me .

    Anyway thank you very much for your respond and if i find anything i will come back and post it here so it might help someone else in the future .

  4. #4
    Regular Coder
    Join Date
    Oct 2014
    Location
    California
    Posts
    397
    Thanks
    1
    Thanked 82 Times in 81 Posts
    Quote Originally Posted by archangelic View Post
    Yeah but restarting the timer everytime someone is visit the page is exactly what i do not want .

    What i want is the same timer that this guy has on his page BnS Celestial Basin (the countdown hour : minutes : seconds not the date etc) .

    I guess tho it's something that i will not get cause that requires to be a true programmer rather than a "hobbyist" like me .

    Anyway thank you very much for your respond and if i find anything i will come back and post it here so it might help someone else in the future .
    Re-read everything I wrote carefully. We're not "restarting" the timer every time they visit the page. You select a specific time and it will always be counting down to that specific time.

    That's pretty much what you described unless you want something else. How does that not fulfill your requirements? It's exactly what that website you linked to does.

    Look, here's the source code from that guy's web page, it's doing the same thing I just showed you:

    PHP Code:
    <script>
    (function() {
        var 
    between 30;
        var 
    announcement 3;
        var 
    duration 10;
        var 
    offset = ((new Date).getTimezoneOffset());
        var 
    totalduration between announcement duration;
        
    // Month is offset by 1!
        
    var startdate = new Date(20174653100);
        var 
    startdate addMinutes(startdate, (offset * -1));
        var 
    camps = ["Excavation""Aomak""Croxar"];
        var 
    camps1 = ["Croxar""Excavation""Aomak"];
        var 
    camps2 = ["Croxar""Aomak""Excavation"];
        var 
    camps3 = ["Aomak""Croxar""Excavation"];
        var 
    camps4 = ["Excavation""Croxar""Aomak"];
        var 
    camps5 = ["Aomak""Excavation""Croxar"];
        var 
    interval window.setInterval(update1000);
        var 
    interval window.setInterval(calculate30000);
        var 
    boxes_to_show 10;
        var 
    boss_offset 0;
        
    calculate();
        
    update();

        function 
    calculate() {
            var 
    date addMinutes(startdatetotalduration);
            
    boss_offset++;
            while (
    date.getTime() < Date.now()) {
                
    date addMinutes(datetotalduration);
                
    boss_offset++;
            }
            var 
    dateover date;
            
    date addMinutes(date, (totalduration * -1) + announcement);
            if (
    date Date.now()) {
                
    date dateover;
            } else {
                
    date addMinutes(date, (announcement * -1));
                
    boss_offset--;
            }
            
    startdate date;
            
    updatelist();
        }

        function 
    update() {
            var 
    now = new Date();
            var 
    ndiff startdate.getTime() - now.getTime();
            var 
    diff Math.abs(ndiff);
            var 
    tseconds Math.floor(diff 1000);
            var 
    tminutes Math.floor(tseconds 60);
            var 
    eminutes tminutes 60;
            var 
    ehours Math.floor(tminutes 60);
            var 
    eseconds tseconds 60;
            
    ehours ehours 12;
            
    eseconds eseconds 10 "0" eseconds eseconds;
            
    eminutes eminutes 10 "0" eminutes eminutes;
            var 
    strTime ehours " : " eminutes " : " eseconds;
            
    strTime ndiff "- " strTime "+ " strTime;
            
    document.getElementById("live").innerHTML getPrintDate(now) + " " strTime;
        }

        function 
    updatelist() {
            var 
    newrows document.createElement("div");
            var 
    time startdate;
            var 
    currboss boss_offset;
            
    newrows.id "rowholder";
            for (var 
    0boxes_to_showi++) {
                var 
    row document.createElement("div");
                
    row.className "row";
                
    // ETA
                
    var eta document.createElement("div");
                
    eta.className "eta";
                var 
    ndiff time.getTime() - Date.now();
                var 
    diff Math.abs(ndiff);
                var 
    tminutes Math.floor((diff 1000) / 60);
                var 
    eminutes tminutes 60;
                var 
    ehours Math.floor(tminutes 60);
                
    ehours ehours 12;
                
    eminutes eminutes 10 "0" eminutes eminutes;
                var 
    strTime ehours " : " eminutes;
                
    strTime ndiff "- " strTime "+ " strTime;
                
    eta.innerHTML strTime;
                
    // Announce
                
    var announce document.createElement("div");
                
    announce.className "announce";
                
    announce.innerHTML getPrintDate(time);
                
    row.appendChild(announce);
                
    time addMinutes(timeannouncement);
                
    // Start
                
    var start document.createElement("div");
                
    start.className "start";
                
    start.innerHTML getPrintDate(time);
                
    row.appendChild(start);
                
    time addMinutes(timeduration);
                
    // End
                
    var end document.createElement("div");
                
    end.className "end";
                
    end.innerHTML getPrintDate(time);
                
    row.appendChild(end);
                
    time addMinutes(timebetween);
                
                
    // Append Eta after END
                
    row.appendChild(eta);
            
                
    // Boss
                
    var dateObjj = new Date(); //for even or odd day clockwise or counterclockwise
                
    var curday dateObjj.getUTCDate();
                var 
    boss document.createElement("div");
                
    boss.className "boss";
                
                
    //if even or odd switch between boss order
                //if( curday % 2 == 0){
                
    boss.innerHTML camps3[currboss++ % 3];
                
    //} else {
                //boss.innerHTML = camps3[currboss++ % 3];
                //}
                //end even or odd
                
                
    row.appendChild(boss);
                
    newrows.appendChild(row);
            }
            var 
    oldrows document.getElementById("rowholder");
            
    oldrows.parentNode.removeChild(oldrows);
            
    document.getElementById("table").appendChild(newrows);
        }

        function 
    getPrintDate(date) {
            var 
    hours date.getHours();
            var 
    minutes date.getMinutes();
            var 
    ampm hours >= 12 "PM" "AM";
            
    hours hours 12;
            
    hours hours hours 12// the hour '0' should be '12'
            
    hours hours 10 "&nbsp" hours hours;
            
    minutes minutes 10 "0" minutes minutes;
            var 
    strTime hours " : " minutes " " ampm;
            return 
    strTime;
        }

        function 
    addMinutes(dateminutes) {
            return new 
    Date(date.getTime() + minutes 60000);
        }
    })();
    </script> 
    What you asked for is exactly what I showed you how to do, I promise you. You've just misinterpreted a single phrase I used and decided to discount my entire post.
    I almost always format my code examples with [php][/php] tags because it looks nicer than the regular [code] tag. That does not mean the code example is in PHP.

  5. #5
    New Coder
    Join Date
    May 2017
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Forgive me but as i said i know little to nothing when it comes to html - javascript - php coding and i did misunderstood what you said cause i couldn't recognize anything on the code . So i did run your code and the output i get is "Expired !" , then runs the timer and on refresh of the page the timer starts allover again showing "Expired !" first . Did i do something wrong ? I've put your code after my last </script> command .

    Thank you very much for your time and i am sorry if i wasted it .

  6. #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,342
    Thanks
    217
    Thanked 2,681 Times in 2,657 Posts
    archangelic - please help me by stating clearly what exactly is your countdown to do? Do you wish to show the countdown (time remaining) to a specific date/time? Or to a specific time each day? Or do you wish to show the time from when the user started his visit to your page? Are you trying to play some audio file after a certain interval of time? If so, the counter will always restart on page refresh.

    sagebrushfire's code returns "Expired" because the defined date (May 6th 2017) in that particular code has passed. The syntax for a date is

    new Date(year, month, day, hours, minutes, seconds, milliseconds) (note that in Javascript the months are 0-11 so Month 4 is May).


    Here is another example which counts down to the next 24-hour time interval specified (0000, 0230, 1445 or whatever):-

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function getSeconds() {
    var now = new Date();
    
    // if desired convert to UTC time so countdown is the same in all timezones
    /*
    var now_utc = new Date( now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(),  now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds(),now.getUTCMilliseconds() );
    now = now_utc;
    */
    
    var time = now.getTime();  // time now in milliseconds
    var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0); // midnight 0000 hrs
    // midnight - change time hh,mm,ss to whatever time required, e.g. 9,15,0 (0915)
    var ft = midnight.getTime() + 86400000;  // add one day
    var diff = ft - time;  
    diff = parseInt(diff/1000);
    if (diff > 86400) {diff = diff - 86400}
    startTimer (diff);
    }
    
    
    var timeInSecs;
    var ticker;
    
    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
    //getSeconds();  // and start again if required
    }
    
    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    var result = ((hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) + mins
                      + ":" + ( (secs < 10) ? "0" : "" ) + secs;
    document.getElementById("countdown").innerHTML = "The next update of this site will be in " + result;
    }
    
    
    </script>
    
    </head>
    
    <body onload = "getSeconds()">
    
    <span id="countdown" style="font-weight: bold;"></span>
    
    </body>
    </html>
    Last edited by Philip M; 05-20-2017 at 08:54 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.

  7. #7
    New Coder
    Join Date
    May 2017
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want a timer that counts down from 43 min to 0 , when it gets to 0 i want it to play http://soundbible.com/mp3/A-Tone-His...1266414414.mp3 and start all over again from 43 min and down to 0 .
    Also when i hit the refresh button of the page (the default one where all browsers have , not someone of my own) i want the counter not to reset back to 43 min but to keep on counting down like the refresh never happen .
    With that in mind i am hopping that who ever visit that page will see the exactly same counting down . For example i see 00:20:15 and you just open the page and you also see 00:20:15 .

    So i took your code and i manage to make look like that it's a timer looping (thanks to the explanation instruction you had in it ) but now my problem is how i will make play my audio and synchronize it with the event that i want the timer .

    Here is your code that i modify it :

    <!DOCTYPE html>
    <html>
    <head>

    <script type = "text/javascript">


    function getSeconds() {
    var now = new Date();


    // if desired convert to UTC time so countdown is the same in all timezones
    /*
    var now_utc = new Date( now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds(),now.getUTCMilliseconds() );
    now = now_utc;
    */

    var time = now.getTime(); // time now in milliseconds
    var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0); // midnight 0000 hrs
    // midnight - change time hh,mm,ss to whatever time required, e.g. 9,15,0 (0915)
    var ft = midnight.getTime() + 8640000000000; // add one day
    var diff = ft - time ;
    diff = parseInt(diff/1000);
    if (diff > 86400) {diff = diff - 86400}
    startTimer (diff);
    }


    var timeInSecs;
    var ticker;

    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
    //getSeconds();
    }


    var hours= Math.floor(secs/2580);
    secs %= 2580;
    var mins = Math.floor(secs/60);
    secs %= 60;
    var result = ((hours < 10 ) ? "0" : "" ) + ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs;
    document.getElementById("countdown").innerHTML = result;
    }


    </script>

    </head>

    <body onload = "getSeconds()">

    <span id="countdown" style="font-weight: bold;"></span>

    </body>
    </html>


    Thank you so much for your help and the time that you spent for this . Sorry that it took me so long to reply but i was trying to make it work (i am repeating , i am not a web designer ) .

  8. #8
    New Coder
    Join Date
    May 2017
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    owh and P.S i did try to make the time UTC but i messed up ( badly ... ) and couldn't . I do understand that probably is a minor thing and i should be able to do it but .... /cry ....

    If you do bother with it again could you please make that for me ? Thank all off you again and i do appreciate all your help

  9. #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,342
    Thanks
    217
    Thanked 2,681 Times in 2,657 Posts
    Quote Originally Posted by archangelic View Post
    I want a timer that counts down from 43 min to 0 , when it gets to 0 i want it to play http://soundbible.com/mp3/A-Tone-His...1266414414.mp3 and start all over again from 43 min and down to 0 .
    Also when i hit the refresh button of the page (the default one where all browsers have , not someone of my own) i want the counter not to reset back to 43 min but to keep on counting down like the refresh never happen .
    That is not possible using Javascript alone. Javascript is a client-side language, so refreshing the page will always cause the timer to restart. You will need to use server-side coding. You say that you are not a programmer, so I am afraid that this task may be beyond you.

    Quote Originally Posted by archangelic View Post
    With that in mind i am hopping that who ever visit that page will see the exactly same counting down . For example i see 00:20:15 and you just open the page and you also see 00:20:15 .
    Again, this is not possible using Javascript, which takes the time from the user's computer, not the server.
    Last edited by Philip M; 05-20-2017 at 06:45 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.

  10. #10
    New Coder
    Join Date
    May 2017
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah i did understood that i just reply on what you asked . Anyways i made a small progress , i realize that i don't need UTC time cause minutes are universal the same (lol) and i wanted only the minutes not the hours , so i am ok on that part . Now i am working on the audio file and try to make it play when the clock goes to 00:00 (like an alarm) and trying to find a way to synchronize the clock with the event . I will get there eventually but i am just hopping to be before the event ends (lol) . But if i don't get there in time i don't mind cause someone else could benefit from that one day . Who knows xD .

    Thank you again for your time and support xD

  11. #11
    New Coder
    Join Date
    May 2017
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Update * i manage to manipulate the code and synchronize it with the current event at my desire and now i am fighting with the sound ....

    I am trying to create an if{} condition so when the time shows 00 min and 00 sec the src="http://soundbible.com/mp3/A-Tone-His...1266414414.mp3 " will play ....

    I will appreciate any ideas give on that one cause it's really the only one left to do .

    Thank you so much again .

  12. #12
    New Coder
    Join Date
    May 2017
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Since i can't edit the last post i will need to repost ...

    Maybe the if{} command is not the correct approach for this one but so far everything i've read do not really make sense to me except that command , still i keep on researching .

    Thank you for everything on advance xD

  13. #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,342
    Thanks
    217
    Thanked 2,681 Times in 2,657 Posts
    Thre is no problem in playing the audio file when the timer reaches 00:00 after a countdown of 43 seconds. You say you can do that already. But what is not possible is to prevent the counter from resetting on page refresh, which was your original question.

    I have no idea what you mean when you refer to the if "command".

    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.

  14. #14
    New Coder
    Join Date
    May 2017
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I made it !!!!!

    Here is the code for who ever want to use it maybe . I've try to use explanation on the side of the code lines on what they effect ( ironically since i don't know html - js etc. :P ) I will post the page also where i put it for who ever wants to take a pick but the timer eventually will go off the page .

    Da code !

    <!DOCTYPE html>
    <html>
    <head>

    <script type = "text/javascript">


    function getSeconds() {

    var now = new Date();


    // if desired convert to UTC time so countdown is the same in all timezones
    /*
    var now_utc = new Date( now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds(),now.getUTCMilliseconds() );
    now = now_utc;
    */

    var time = now.getTime(); // time now in milliseconds
    var midnight = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(),0,-9,0); // midnight 0000 hrs // midnight 0000 hrs // manipulate the ,0,0,0); in order to add or remove hours , minutes or seconds so you pseudo synchronize your timer with any countdown you need//

    // midnight - change time hh,mm,ss to whatever time required, e.g. 9,15,0 (0915)
    var ft = midnight.getTime() + 8640000000000; // add one day
    var diff = ft - time ;
    diff = parseInt(diff/1000);
    if (diff > 86400) {diff = diff - 86400}
    startTimer (diff);

    }


    var timeInSecs;
    var ticker;

    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
    //getSeconds();
    }


    var audio = new Audio('http://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3'); // This is the ouside source for out audio file . You can name your Var what ever you like . Ex: Audio or Sd or Gg or etc. //

    var hours= Math.floor(secs/2580); // Manipulate this number in order to have the desire minutes showing . ex: 3600 = 60 min 3540 = 59 min etc. Decrease 60 sec for every minute //

    secs %= 2580; // put here the same number that you put above for the condition to work properly //

    var mins = Math.floor(secs/60); // do not mess with this otherwise the seconds will not work properly //

    secs %= 60;// do not mess with this otherwise the seconds will not work properly //

    var result = ((hours < 10 ) ? "0" : "" ) + ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs; // hide or show hours , minutes , seconds by simply adding the name of the var and a ":" symbol . Ex: ((hours < 10 ) ? "0" : "" ) + hours + ":" + ( (mins < 10) ? "0" : "" ) etc. The conditions iside the brakets are for the output to show a 0 infrond of the numbers when those are less than 10 . Ex: if the hours are less than 10 then the output that you see is 09 etc. so you can be able to have a 00:00:00 format on your view //
    document.getElementById("countdown").innerHTML = result;

    if (mins<=0 && secs<=0) {
    audio.play();}
    } // this is the if condition i used in order to play my external audio when the timer would reach 00:00 . Do not forget that in front of the .play you should put the name that you used when you created the var for the audio file . Ex: if you putted Sd then you should write Sd.play(); etc. //


    </script>


    <p id="demo"> </p>


    </head>

    <body onload = "getSeconds()" >

    <span id="countdown" style="font-weight: bold;"></span>

    </body>
    </html>

    Thank you Philip that you gave me this and for all of your help xD

  15. #15
    New Coder
    Join Date
    May 2017
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was referring the hole time to the code that you gave me not the one i've posted original xD .

    But yet again thank you so much xD


 
Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

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