function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
himanshu huske 7himanshu huske 7 

VisualForce_Task_4

I want to create Visualforce Page in which their is a timer for Hour,Minute,Seconds which should start when we click on 'START' button and stop When 'STOP' button is clicked
Best Answer chosen by himanshu huske 7
Khan AnasKhan Anas (Salesforce Developers) 
Hi Himanshu,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement. 
<apex:page  sidebar="false" showHeader="false" id="page1">
    <apex:form id="form1">
        <script>
        var startTimer;
        function stopTime() {
            clearInterval(startTimer);
        }
        function startTime() {
            var sec = 0;
            var min = 0;
            var hr = 0;
            startTimer = setInterval(
                function () {
                    if(sec != 59){
                        sec = sec + 1;
                    }
                    else {
                        if(min != 59){
                            min = min + 1; 
                        }
                        else{
                            hr = hr + 1;
                            min = 0;
                        }
                        sec = 0;
                    }
                    document.getElementById("displayTime").innerHTML =  hr + " hrs : " + min + " mins : " + sec + " secs";
                }, 1000);
        }
        </script>
        <body >
            <div><b>Timer :</b><b id="displayTime" style="Color:red;"></b></div>
            <input type="button" value="Start Timer" onclick="startTime()"/>
            <input type="button" value="Stop Timer" onclick="stopTime()"/>
        </body>
    </apex:form>
</apex:page>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Himanshu,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement. 
<apex:page  sidebar="false" showHeader="false" id="page1">
    <apex:form id="form1">
        <script>
        var startTimer;
        function stopTime() {
            clearInterval(startTimer);
        }
        function startTime() {
            var sec = 0;
            var min = 0;
            var hr = 0;
            startTimer = setInterval(
                function () {
                    if(sec != 59){
                        sec = sec + 1;
                    }
                    else {
                        if(min != 59){
                            min = min + 1; 
                        }
                        else{
                            hr = hr + 1;
                            min = 0;
                        }
                        sec = 0;
                    }
                    document.getElementById("displayTime").innerHTML =  hr + " hrs : " + min + " mins : " + sec + " secs";
                }, 1000);
        }
        </script>
        <body >
            <div><b>Timer :</b><b id="displayTime" style="Color:red;"></b></div>
            <input type="button" value="Start Timer" onclick="startTime()"/>
            <input type="button" value="Stop Timer" onclick="stopTime()"/>
        </body>
    </apex:form>
</apex:page>

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
himanshu huske 7himanshu huske 7
Thank you Mr.Khan,
But can we also perform this tash throungh action function..?