Click here to Skip to main content
15,884,537 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have this javascript which i m using for implementing timer.
JavaScript
function CountUp(initDate, id) {
            this.beginDate = new Date(initDate);
            this.countainer = document.getElementById(id);
            this.numOfDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
            this.hours = 0, this.minutes = 0, this.seconds = 0;
            this.updateNumOfDays();
            this.updateCounter();
        }

        CountUp.prototype.updateNumOfDays = function () {
            var dateNow = new Date();
            var currYear = dateNow.getFullYear();
            if ((currYear % 4 == 0 && currYear % 100 != 0) || currYear % 400 == 0) {
                this.numOfDays[1] = 29;
            }
            var self = this;
            setTimeout(function () { self.updateNumOfDays(); }, (new Date((currYear + 1), 1, 2) - dateNow));
        }

        CountUp.prototype.datePartDiff = function (then, now, MAX) {
            var diff = now - then - this.borrowed;
            this.borrowed = 0;
            if (diff > -1) return diff;
            this.borrowed = 1;
            return (MAX + diff);
        }

        CountUp.prototype.calculate = function () {
            var currDate = new Date();
            var prevDate = this.beginDate;
            this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60);
            this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60);
            this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
            this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]);
            this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
            this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(), 0);
        }

        CountUp.prototype.addLeadingZero = function (value) {
            return value < 10 ? ("0" + value) : value;
        }

        CountUp.prototype.formatTime = function () {
            this.seconds = this.addLeadingZero(this.seconds);
            this.minutes = this.addLeadingZero(this.minutes);
            this.hours = this.addLeadingZero(this.hours);
        }

        CountUp.prototype.updateCounter = function () {
            this.calculate();
            this.formatTime();
            this.countainer.innerHTML = ""  +
        " " + this.hours + " <small>" + (this.hours == 1 ? "hour" : "hours") + "</small>" +
        " " + this.minutes + " <small>" + (this.minutes == 1 ? "minute" : "minutes") + "</small>" +
        " " + this.seconds + " <small>" + (this.seconds == 1 ? "second" : "seconds") + "</small>";
            var self = this;
            setTimeout(function () { self.updateCounter(); }, 1000);
        }

        var today = new Date();
        window.onload = function () { new CountUp(today, 'counter'); }


It is working fine but as we can see the timer is getting enabled from the page load as i m calling the function on Page load i.e Window.Onload, here 'counter' is user for calling the method which is basically id of a div.

I want to call this fuinction on a button click event and i had tried but didnt get sucess.Please guide me that how we will call this method on Button Click event and we have to pass the system current date to this function also mandatory.
Posted
Updated 28-May-12 1:05am
v2
Comments
Technoses 28-May-12 7:13am    
please write what you have done for this and what error occurs when you call it???
Dharmenrda Kumar Singh 28-May-12 7:19am    
I m not getting that how i ll call this method on Button click.I m not so good in javascript.

You can use onClentClick property of button

follow the links
http://www.w3schools.com/aspnet/prop_webcontrol_button_onclientclick.asp[^]
 
Share this answer
 
You can try the below Code :

Write the below Code in your Page Load :

C#
myButton.Attributes.Add("onclick","yourFunction('" + System.DateTime.Now + "')");


Hope this helps.
 
Share this answer
 
v2
Comments
Rajesh Kariyavula 28-May-12 7:41am    
In your case it is as below:

myButton.Attributes.Add("onclick","CountUp('" + System.DateTime.Now + "','" + counter + "')");

myButton will be your Button ID.
Dharmenrda Kumar Singh 28-May-12 7:55am    
I had used your code but now i m getting an error i.e. "Microsoft JScript runtime error: Unable to set value of the property 'innerHTML': object is null or undefined".
Here counter is a div only like this:-

<div id=counter ></div>
It is working fine when i m calling on window.onload but as on page load i m adding your code and executing i m getting error.
You can try the below Code :

Write the below Code in your Page Load :

C#
myButton.Attributes.Add("onclick","NewFunction('" + System.DateTime.Now + "')");


in js create a new function which will call your created function like that:-

Java
 function NewFunction(dt)
{
CountUp(dt, 'counter'); 
}


and in js remove window.load line
 
Share this answer
 
v2
Comments
Dharmenrda Kumar Singh 28-May-12 8:45am    
Done as per your Suggestion and this time i got "Microsoft JScript runtime error: Object doesn't support property or method 'updateNumOfDays'" Error message.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900