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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Defining on click

    I am attempting to make/use some javascript to set up a timer

    The area bolded was originally: function start() but I want to start this timer on click. What i can't figure out is how to make like a button with the onclick function because currently i click anywhere on the webpage and it will start the timer. I am really new to javascrpt bit have been searching the internet for hours and haven't got anywhere

    Here's the code:
    Code:
    var month = '*'; // 1 through 12 or '*' within the next month, '0' for the current month
    var day = '1';   // day of month or + day offset
    var dow = 0;     // day of week sun=1 sat=7 or 0 for whatever day it falls on
    var hour = 14;    // 0 through 23 for the hour of the day
    var tz = 10;     // offset in hours from UTC to your timezone
    var lab = 'cd';  // id of the entry on the page where the counter is to be inserted
    
    function onclick() {displayCountdown(setCountdown(month,day,hour,tz),lab);}
    loaded(lab,start);
    
    // Countdown Javascript
    // copyright 20th April 2005, 17th November 2006 by Stephen Chapman
    // permission to use this Javascript on your web page is granted
    // provided that all of the code in this script (including these
    // comments) is used without any alteration
    // you may change the start function if required
    var pageLoaded = 0; window.onload = function() {pageLoaded = 1;}
    function loaded(i,f) {if (document.getElementById && document.getElementById(i) != null) f(); else if (!pageLoaded) setTimeout('loaded(\''+i+'\','+f+')',100);
    }
    function setCountdown(month,day,hour,tz) {var m = month; if (month=='*') m = 0;  var c = setC(m,day,hour,tz); if (month == '*' && c < 0)  c = setC('*',day,hour,tz); return c;} function setC(month,day,hour,tz) {var toDate = new Date();if (day.substr(0,1) == '+') {var day1 = parseInt(day.substr(1));toDate.setDate(toDate.getDate()+day1);} else{toDate.setDate(day);}if (month == '*')toDate.setMonth(toDate.getMonth() + 1);else if (month > 0) { if (month <= toDate.getMonth())toDate.setFullYear(toDate.getFullYear() + 1);toDate.setMonth(month-1);}
    if (dow >0) toDate.setDate(toDate.getDate()+(dow-1-toDate.getDay())%7);
    toDate.setHours(hour);toDate.setMinutes(0-(tz*60));toDate.setSeconds(0);var fromDate = new Date();fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());var diffDate = new Date(0);diffDate.setMilliseconds(toDate - fromDate);return Math.floor(diffDate.valueOf()/1000);}
    function displayCountdown(countdn,cd) {if (countdn < 0) document.getElementById(cd).innerHTML = "Sorry, you are too late."; else {var secs = countdn % 60; if (secs < 10) secs = '0'+secs;var countdn1 = (countdn - secs) / 60;var mins = countdn1 % 60; if (mins < 10) mins = '0'+mins;countdn1 = (countdn1 - mins) / 60;var hours = countdn1 % 24;var days = (countdn1 - hours) / 24;document.getElementById(cd).innerHTML = days+' days + '+hours+' : '+mins+' : '+secs;setTimeout('displayCountdown('+(countdn-1)+',\''+cd+'\');',999);}}

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Since you posted this in the Javascript Frameworks forum, I offer you a jQuery solution:

    http://keith-wood.name/countdown.html

    You'll need to grab the jQuery script and include it in your page, as well as this fantastic plugin jQuery Countdown, then simply:

    PHP Code:
    $(function() {
        
    //assuming the button has an id of buttonid
       //change the +300 to the duration you desire; see the plugin webpage for details
        
    $('#buttonid').countdown({until: +300format'HMS'});

    http://jquery.com

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you

    Thank you for the reply. I have tried that but am getting nowhere. I keep having the code coming up on the website like showwing as text instead of doiing what it's supposed to do. Here's the code:
    Code:
    <!DOCTYPE html>
     <html lang="en">
    <head>
    <script type="text/javascript" src="text/javascript/jquery-1.3.2.js"></script>
    <style type="text/css">@import "text/css/jquery.countdown.css";</style> 
    <script type="text/javascript" src="text/javascript/jquery.countdown.js"></script>
    $('#noDays').countdown({until: liftoffTime, format: 'HMS'});
    </head>
    <body>
    <a href="http://en28.tribalwars.net/game.php?village=36025&screen=place&mode=command&target=33428" target="_blank">01</a> 
    <a href="http://en28.tribalwars.net/game.php?village=36025&screen=place&mode=command&target=33306" target="_blank">02</a> 
    <a href="http://en28.tribalwars.net/game.php?village=36025&screen=place&mode=command&target=34249" target="_blank">03</a> 
    <a href="http://en28.tribalwars.net/game.php?village=36025&screen=place&mode=command&target=35135" target="_blank">04</a> 
    <a href="http://en28.tribalwars.net/game.php?village=36025&screen=place&mode=command&target=33976" target="_blank">05</a> 
    <a href="http://en28.tribalwars.net/game.php?village=36025&screen=place&mode=command&target=33398" target="_blank">06</a> 
    <a href="http://en28.tribalwars.net/game.php?village=36025&screen=place&mode=command&target=35636" target="_blank">07</a> 
    <a href="http://en28.tribalwars.net/game.php?village=36025&screen=place&mode=command&target=31495" target="_blank">08</a> 
    <a href="http://en28.tribalwars.net/game.php?village=36025&screen=place&mode=command&target=35552" target="_blank">09</a> 
    <a href="http://en28.tribalwars.net/game.php?village=36025&screen=place&mode=command&target=33776" target="_blank">10</a> 
    </body>
    </html>

  • #4
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    You have to put the code in a Javascript block. It is Javascript code, after all.

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still confused. I'm really new to javascript so basics is necessary lol. Sorry. I added the script tags to:
    Code:
    <script>$(function() {
            $('#buttonid').countdown({until: +300, format: 'HMS'});
    }</script>
    But now how do I link the button to the script as such. I have this at the moment:
    Code:
    <button type="#buttonid">Test</button>
    I know that's wrong but not sure how you do it.

    Thanks again

  • #6
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    You need to include type="text/javascript" in your <script> tag... Also there's no such thing as a <button> tag, it's an <input> tag type="button", and the id of that button should be buttonid (in my coding example anyway).


  •  

    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
    •