Skip to main content
J
Jasi04
Known Participant
November 12, 2022
Answered

Count down timer to allow a button to become clickable

  • November 12, 2022
  • 1 reply
  • 2432 views

Hi there,

 

I'm trying to create a Xmas Advent calendar that will allow a user to click on a button to reveal a product but only on that day.  Once clicked it can stay open indefinitely.  For example Day 1 would be clickable and reveal a product discount but subsequent buttons ( eg Day  2, Day 3, Day 4 etc) wouldn't be clickable until the day that that button is allowed to be clicked (if that makes sense).  Would a count down timer be best to achieve something like this ie  a timer to calcuatate 24 hours after which time a trigger would activate the next sequential button (eg Day 2) to be clickabe?  Any suggestions or help would be greatly appreciated.

This topic has been closed for replies.
Correct answer RvdT

Hi kglad.  Thank you very much for that. I get the logic of the code but I'm still not sure how to integrate the code I've used for the buttons with the code above.   The code I've used makes a button disappear, once clicked, to reveal an object which is on a separate layer directly underneath the button.  I've attached a screen recording as well to help explain what I mean.

Following is the code used for the buttons:-

 

var _this = this;
_this.Day1_btn.on('click', function(){
_this.Day1_btn.visible = false;
});

var _this = this;
_this.Day2_btn.on('click', function(){
_this.Day2_btn.visible = false;
});

var _this = this;
_this.Day3_btn.on('click', function(){
_this.Day3_btn.visible = false;
});

 

 


 

Day1_btn.mouseEnabled = false;
Day2_btn.mouseEnabled = false;
Day3_btn.mouseEnabled = false;

image1.visible = false;
image2.visible = false;
image3.visible = false;

// checking once per hour in case someone has their browser open and your site is loaded for hours.
var checkDateI = setInterval(checkDateF,3600000); 

function checkDateF(){
	var date = new Date();
	if(date.getMonth()==10 && date.getDate()==15){
	trace("15");			
		Day1_btn.mouseEnabled = true;
	} else if(date.getMonth()==10 && date.getDate()==15){
		Day2_btn.mouseEnabled = true;
	} else if(date.getMonth()==10 && date.getDate()==15){
		Day3_btn.mouseEnabled = true;
	}
}

checkDateF();

Day1_btn.addEventListener(MouseEvent.CLICK, fn1);

function fn1(event:MouseEvent){
	trace("hi1");	
	Day1_btn.visible = false;
	image1.visible = true;
}

Day2_btn.addEventListener(MouseEvent.CLICK, fn2);

function fn2(event:MouseEvent){
	trace("hi2");	
	Day2_btn.visible = false;
	image2.visible = true;
}

Day3_btn.addEventListener(MouseEvent.CLICK, fn3);

function fn3(event:MouseEvent){
	Day3_btn.visible = false;
	image3.visible = true;
}

 

 

Add 3 images to your stage and name them image1, image2, image3.

Maybe not the best way to write AS3, but it works.

Change the date of the functions. They are now set to today.

November = 10

December = 11

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
November 12, 2022

something checking the date would be better if that's what you want to check.

J
Jasi04Author
Known Participant
November 12, 2022

that would be better but is there an action script capable of this or do I need to go a different direction?

kglad
Community Expert
kgladCommunity Expert
Community Expert
November 12, 2022

if you trust the user's system clock, you can use:

 

var d = new Date();  // current date/time per local system clock

/*

getFullYear() Get year as a four digit number (yyyy)
getMonth() Get month as a number (0-11)
getDate() Get day as a number (1-31)
getDay() Get weekday as a number (0-6)
getHours() Get hour (0-23)
getMinutes() Get minute (0-59)
getSeconds() Get second (0-59)
getMilliseconds() Get millisecond (0-999)
getTime() Get time (milliseconds since January 1, 1970)

*/

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices