Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-22-2009, 06:56 AM   PM User | #1
dextras
New to the CF scene

 
Join Date: May 2009
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
dextras is an unknown quantity at this point
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);}}
dextras is offline   Reply With Quote
Old 05-22-2009, 04:13 PM   PM User | #2
Fumigator
UE Antagonizer


 
Fumigator's Avatar
 
Join Date: Dec 2005
Location: Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
Posts: 7,686
Thanks: 42
Thanked 637 Times in 625 Posts
Fumigator is a glorious beacon of lightFumigator is a glorious beacon of lightFumigator is a glorious beacon of lightFumigator is a glorious beacon of lightFumigator is a glorious beacon of light
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
__________________
Fumigator is offline   Reply With Quote
Old 05-23-2009, 02:53 AM   PM User | #3
dextras
New to the CF scene

 
Join Date: May 2009
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
dextras is an unknown quantity at this point
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>
dextras is offline   Reply With Quote
Old 05-23-2009, 06:17 AM   PM User | #4
Fumigator
UE Antagonizer


 
Fumigator's Avatar
 
Join Date: Dec 2005
Location: Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
Posts: 7,686
Thanks: 42
Thanked 637 Times in 625 Posts
Fumigator is a glorious beacon of lightFumigator is a glorious beacon of lightFumigator is a glorious beacon of lightFumigator is a glorious beacon of lightFumigator is a glorious beacon of light
You have to put the code in a Javascript block. It is Javascript code, after all.
__________________
Fumigator is offline   Reply With Quote
Old 05-23-2009, 07:05 AM   PM User | #5
dextras
New to the CF scene

 
Join Date: May 2009
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
dextras is an unknown quantity at this point
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
dextras is offline   Reply With Quote
Old 05-27-2009, 03:32 PM   PM User | #6
Fumigator
UE Antagonizer


 
Fumigator's Avatar
 
Join Date: Dec 2005
Location: Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
Posts: 7,686
Thanks: 42
Thanked 637 Times in 625 Posts
Fumigator is a glorious beacon of lightFumigator is a glorious beacon of lightFumigator is a glorious beacon of lightFumigator is a glorious beacon of lightFumigator is a glorious beacon of light
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).
__________________
Fumigator is offline   Reply With Quote
Reply

Bookmarks

Tags
function, javascript, onclick, timer

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:34 PM.


Advertisement
Log in to turn off these ads.