Showing FlipClock Using Jquery in Asp.Net

02:01:00  , ,  1 comment

                 Showing FlipClock

Displaying  Jquery Flip Clock to Various Format Using  Jquery Flipclock Plugins in Asp.Net.

                                 DEMO



                            Download

                          HTML Coding
<html>
       <head>
        <title></title>
              <link rel="stylesheet" href="JQuery/flipclock.css">

              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

         <%--Twelve Hour Clock--%>

              <script src="JQuery/flipclock.js"></script>    
       
        <script type="text/javascript">
            var clock;

            $(document).ready(function () {
                clock = $('.clock').FlipClock({
                    clockFace: 'TwelveHourClock'
                   
                });
            });
              </script>
       


       
<%--Twenty Four Hour clock For Particular Set Time--%>
       
        <script type="text/javascript">
            var clock;

            $(document).ready(function () {
                var date = new Date('2015-01-01 01:55:12 pm');

                clock = $('.clock1').FlipClock(date, {
                    clockFace: 'TwentyFourHourClock'
                });
            });
              </script>    


<%--Particular Minute Counter--%>


        <script type="text/javascript">
            var clock;

            $(document).ready(function () {

                clock = $('.clock2').FlipClock(10, {
                    clockFace: 'MinuteCounter',
                    countdown: true,
                    callbacks: {
                        
                    }
                });

            });

       </script>



<%--Current Year Available total Days --%> 

        <script type="text/javascript">
            var clock;

            $(document).ready(function () {

                // Grab the current date
                var currentDate = new Date();

                // Set some date in the future. In this case, it's always Jan 1
                var futureDate = new Date(currentDate.getFullYear() + 1, 0, 1);

                // Calculate the difference in seconds between the future and current date
                var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

                // Instantiate a coutdown FlipClock
                clock = $('.clock3').FlipClock(diff, {
                    clockFace: 'DailyCounter',
                    countdown: true
                });
            });
              </script>



       </head>
       <body>
              <div class="clock">
              </div>       
              <div  class="clock1" ></div>
        <div class="clock2"> </div>
                     <div class="clock3" ></div>

       </body>

</html>


Create New Webform - Add FlipClock Jquery Plugins  & JavaScript Assign Source 



1 comment: