Post
Ask Question

Start and Stop Timer on Input Click in Asp.net with JS

Introduction

 
In this blog, we will make a simple timer. We will use three files, .aspx page, CSS and Jquery
 
Step 1: ASPX page
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="textBoxClickStartTimer.Index" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html>  
  4.   
  5.   <head>  
  6.     <link href="style/flipclock.css" rel="stylesheet" />  
  7.     <style>  
  8.       .clock    
  9.     {    
  10.     display: none;    
  11.     }    
  12.     </style>  
  13.   </head>  
  14.   
  15.   <body>  
  16.     <form runat="server">  
  17.       <table>  
  18.         <tr>  
  19.           <td>  
  20.             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  21.           </td>  
  22.           <td>  
  23.             <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>  
  24.           </td>  
  25.           <td>  
  26.             <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>  
  27.           </td>  
  28.           <td>  
  29.             <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>  
  30.           </td>  
  31.           <td>  
  32.             <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>  
  33.           </td>  
  34.           <td>  
  35.             <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>  
  36.           </td>  
  37.           <td>  
  38.             <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>  
  39.           </td>  
  40.         </tr>  
  41.         <tr>  
  42.           <td>  
  43.             <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>  
  44.           </td>  
  45.           <td>  
  46.             <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>  
  47.           </td>  
  48.           <td>  
  49.             <asp:TextBox ID="TextBox10" runat="server"></asp:TextBox>  
  50.           </td>  
  51.           <td>  
  52.             <asp:TextBox ID="TextBox11" runat="server"></asp:TextBox>  
  53.           </td>  
  54.           <td>  
  55.             <asp:TextBox ID="TextBox12" runat="server"></asp:TextBox>  
  56.           </td>  
  57.           <td>  
  58.             <asp:TextBox ID="TextBox13" runat="server"></asp:TextBox>  
  59.           </td>  
  60.           <td>  
  61.             <asp:TextBox ID="TextBox14" runat="server"></asp:TextBox>  
  62.           </td>  
  63.         </tr>  
  64.         <tr>  
  65.           <td>  
  66.             <asp:TextBox ID="TextBox15" runat="server"></asp:TextBox>  
  67.           </td>  
  68.           <td>  
  69.             <asp:TextBox ID="TextBox16" runat="server"></asp:TextBox>  
  70.           </td>  
  71.           <td>  
  72.             <asp:TextBox ID="TextBox17" runat="server"></asp:TextBox>  
  73.           </td>  
  74.           <td>  
  75.             <asp:TextBox ID="TextBox18" runat="server"></asp:TextBox>  
  76.           </td>  
  77.           <td>  
  78.             <asp:TextBox ID="TextBox19" runat="server"></asp:TextBox>  
  79.           </td>  
  80.           <td>  
  81.             <asp:TextBox ID="TextBox20" runat="server"></asp:TextBox>  
  82.           </td>  
  83.           <td>  
  84.             <asp:TextBox ID="TextBox21" runat="server"></asp:TextBox>  
  85.           </td>  
  86.         </tr>  
  87.       </table>  
  88.       <div class="clock" style="margin: 2em;"></div>  
  89.       <div class="message"></div>  
  90.     </form>  
  91.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>  
  92.     <script src="script/flipclock.min.js"></script>  
  93.     <script type="text/javascript">  
  94.     var clock;  
  95.     $(document).ready(function() {  
  96.       clock = $('.clock').FlipClock(0, {  
  97.         clockFace: 'MinuteCounter',  
  98.         autoStart: false  
  99.       });  
  100.       $("input:text").focus(function() {  
  101.         $('.clock').css("display", "inline");  
  102.         clock.start();  
  103.       });  
  104.       $("input:text").focusout(function() {  
  105.         clock.stop();  
  106.         if (confirm("Do you wanna reset clock?") == true) {  
  107.           clock.setTime(0);  
  108.         }  
  109.         $('.clock').css("display", "none");  
  110.       });  
  111.     });  
  112.     </script>  
  113.   </body>  
  114.   
  115. </html> 
Step 2: CSS
 
Now in CSS, we have some tasks:
 
Create a "flipclock.css" file
  1. .flip-clock-wrapper * {  
  2.   -webkit-box-sizing: border-box;  
  3.   -moz-box-sizing: border-box;  
  4.   -ms-box-sizing: border-box;  
  5.   -o-box-sizing: border-box;  
  6.   box-sizing: border-box;  
  7.   -webkit-backface-visibility: hidden;  
  8.   -moz-backface-visibility: hidden;  
  9.   -ms-backface-visibility: hidden;  
  10.   -o-backface-visibility: hidden;  
  11.   backface-visibility: hidden;  
  12. }  
  13.   
  14. .flip-clock-wrapper a {  
  15.   cursor: pointer;  
  16.   text-decoration: none;  
  17.   color: #ccc;  
  18. }  
  19.   
  20. .flip-clock-wrapper a:hover {  
  21.   color: #fff;  
  22. }  
  23.   
  24. .flip-clock-wrapper ul {  
  25.   list-style: none;  
  26. }  
  27.   
  28. .flip-clock-wrapper.clearfix:before,  
  29. .flip-clock-wrapper.clearfix:after {  
  30.   content: " ";  
  31.   display: table;  
  32. }  
  33.   
  34. .flip-clock-wrapper.clearfix:after {  
  35.   clear: both;  
  36. }  
  37.   
  38. .flip-clock-wrapper.clearfix {  
  39.   *zoom: 1;  
  40. }  
  41.   
  42. /* Main */  
  43. .flip-clock-wrapper {  
  44.   font: normal 11px "Helvetica Neue", Helvetica, sans-serif;  
  45.   -webkit-user-select: none;  
  46. }  
  47.   
  48. .flip-clock-meridium {  
  49.   background: none !important;  
  50.   box-shadow: 0 0 0 !important;  
  51.   font-size: 36px !important;  
  52. }  
  53.   
  54. .flip-clock-meridium a {  
  55.   color: #313333;  
  56. }  
  57.   
  58. .flip-clock-wrapper {  
  59.   text-align: center;  
  60.   position: relative;  
  61.   width: 100%;  
  62.   margin: 1em;  
  63. }  
  64.   
  65. .flip-clock-wrapper:before,  
  66. .flip-clock-wrapper:after {  
  67.   content: " ";  
  68.   /* 1 */  
  69.   display: table;  
  70.   /* 2 */  
  71. }  
  72.   
  73. .flip-clock-wrapper:after {  
  74.   clear: both;  
  75. }  
  76.   
  77. /* Skeleton */  
  78. .flip-clock-wrapper ul {  
  79.   position: relative;  
  80.   float: left;  
  81.   margin: 5px;  
  82.   width: 15px;  
  83.   height: 45px;  
  84.   font-size: 80px;  
  85.   font-weight: bold;  
  86.   line-height: 46px;  
  87.   border-radius: 6px;  
  88.   background: #000;  
  89. }  
  90.   
  91. .flip-clock-wrapper ul li {  
  92.   z-index: 1;  
  93.   position: absolute;  
  94.   left: 0;  
  95.   top: 0;  
  96.   width: 100%;  
  97.   height: 100%;  
  98.   line-height: 46px;  
  99.   text-decoration: none !important;  
  100. }  
  101.   
  102. .flip-clock-wrapper ul li:first-child {  
  103.   z-index: 2;  
  104. }  
  105.   
  106. .flip-clock-wrapper ul li a {  
  107.   display: block;  
  108.   height: 100%;  
  109.   -webkit-perspective: 200px;  
  110.   -moz-perspective: 200px;  
  111.   perspective: 200px;  
  112.   margin: 0 !important;  
  113.   overflow: visible !important;  
  114.   cursor: default !important;  
  115. }  
  116.   
  117. .flip-clock-wrapper ul li a div {  
  118.   z-index: 1;  
  119.   position: absolute;  
  120.   left: 0;  
  121.   width: 100%;  
  122.   height: 50%;  
  123.   font-size: 80px;  
  124.   overflow: hidden;  
  125.   outline: 1px solid transparent;  
  126. }  
  127.   
  128. .flip-clock-wrapper ul li a div .shadow {  
  129.   position: absolute;  
  130.   width: 100%;  
  131.   height: 100%;  
  132.   z-index: 2;  
  133. }  
  134.   
  135. .flip-clock-wrapper ul li a div.up {  
  136.   -webkit-transform-origin: 50% 100%;  
  137.   -moz-transform-origin: 50% 100%;  
  138.   -ms-transform-origin: 50% 100%;  
  139.   -o-transform-origin: 50% 100%;  
  140.   transform-origin: 50% 100%;  
  141.   top: 0;  
  142. }  
  143.   
  144. .flip-clock-wrapper ul li a div.up:after {  
  145.   content: "";  
  146.   position: absolute;  
  147.   top: 22px;  
  148.   left: 0;  
  149.   z-index: 5;  
  150.   width: 100%;  
  151.   height: 3px;  
  152.   background-color: #000;  
  153.   background-color: rgba(0, 0, 0, 0.4);  
  154. }  
  155.   
  156. .flip-clock-wrapper ul li a div.down {  
  157.   -webkit-transform-origin: 50% 0;  
  158.   -moz-transform-origin: 50% 0;  
  159.   -ms-transform-origin: 50% 0;  
  160.   -o-transform-origin: 50% 0;  
  161.   transform-origin: 50% 0;  
  162.   bottom: 0;  
  163.   border-bottom-left-radius: 6px;  
  164.   border-bottom-right-radius: 6px;  
  165. }  
  166.   
  167. .flip-clock-wrapper ul li a div div.inn {  
  168.   position: absolute;  
  169.   left: 0;  
  170.   z-index: 1;  
  171.   width: 100%;  
  172.   height: 200%;  
  173.   color: #ccc;  
  174.   text-shadow: 0 1px 2px #000;  
  175.   text-align: center;  
  176.   background-color: #333;  
  177.   border-radius: 6px;  
  178.   font-size: 40px;  
  179. }  
  180.   
  181. .flip-clock-wrapper ul li a div.up div.inn {  
  182.   top: 0;  
  183. }  
  184.   
  185. .flip-clock-wrapper ul li a div.down div.inn {  
  186.   bottom: 0;  
  187. }  
  188.   
  189. /* PLAY */  
  190. .flip-clock-wrapper ul.play li.flip-clock-before {  
  191.   z-index: 3;  
  192. }  
  193.   
  194. .flip-clock-wrapper .flip {  
  195.   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);  
  196. }  
  197.   
  198. .flip-clock-wrapper ul.play li.flip-clock-active {  
  199.   -webkit-animation: asd 0.5s 0.5s linear both;  
  200.   -moz-animation: asd 0.5s 0.5s linear both;  
  201.   animation: asd 0.5s 0.5s linear both;  
  202.   z-index: 5;  
  203. }  
  204.   
  205. .flip-clock-divider {  
  206.   float: left;  
  207.   display: inline-block;  
  208.   position: relative;  
  209.   width: 20px;  
  210.   height: 50px;  
  211. }  
  212.   
  213. .flip-clock-divider:first-child {  
  214.   width: 0;  
  215. }  
  216.   
  217. .flip-clock-dot {  
  218.   display: block;  
  219.   background: #323434;  
  220.   width: 10px;  
  221.   height: 10px;  
  222.   position: absolute;  
  223.   border-radius: 50%;  
  224.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  
  225.   left: 5px;  
  226. }  
  227.   
  228. .flip-clock-divider .flip-clock-label {  
  229.   position: absolute;  
  230.   top: -1.5em;  
  231.   right: -86px;  
  232.   color: black;  
  233.   text-shadow: none;  
  234. }  
  235.   
  236. .flip-clock-divider.minutes .flip-clock-label {  
  237.   right: -88px;  
  238. }  
  239.   
  240. .flip-clock-divider.seconds .flip-clock-label {  
  241.   right: -91px;  
  242. }  
  243.   
  244. .flip-clock-dot.top {  
  245.   top: 30px;  
  246. }  
  247.   
  248. .flip-clock-dot.bottom {  
  249.   bottom: 30px;  
  250. }  
  251.   
  252. @-webkit-keyframes asd {  
  253.   0% {  
  254.     z-index: 2;  
  255.   }  
  256.   
  257.   20% {  
  258.     z-index: 4;  
  259.   }  
  260.   
  261.   100% {  
  262.     z-index: 4;  
  263.   }  
  264. }  
  265.   
  266. @-moz-keyframes asd {  
  267.   0% {  
  268.     z-index: 2;  
  269.   }  
  270.   
  271.   20% {  
  272.     z-index: 4;  
  273.   }  
  274.   
  275.   100% {  
  276.     z-index: 4;  
  277.   }  
  278. }  
  279.   
  280. @-o-keyframes asd {  
  281.   0% {  
  282.     z-index: 2;  
  283.   }  
  284.   
  285.   20% {  
  286.     z-index: 4;  
  287.   }  
  288.   
  289.   100% {  
  290.     z-index: 4;  
  291.   }  
  292. }  
  293.   
  294. @keyframes asd {  
  295.   0% {  
  296.     z-index: 2;  
  297.   }  
  298.   
  299.   20% {  
  300.     z-index: 4;  
  301.   }  
  302.   
  303.   100% {  
  304.     z-index: 4;  
  305.   }  
  306. }  
  307.   
  308. .flip-clock-wrapper ul.play li.flip-clock-active .down {  
  309.   z-index: 2;  
  310.   -webkit-animation: turn 0.5s 0.5s linear both;  
  311.   -moz-animation: turn 0.5s 0.5s linear both;  
  312.   animation: turn 0.5s 0.5s linear both;  
  313. }  
  314.   
  315. @-webkit-keyframes turn {  
  316.   0% {  
  317.     -webkit-transform: rotateX(90deg);  
  318.   }  
  319.   
  320.   100% {  
  321.     -webkit-transform: rotateX(0deg);  
  322.   }  
  323. }  
  324.   
  325. @-moz-keyframes turn {  
  326.   0% {  
  327.     -moz-transform: rotateX(90deg);  
  328.   }  
  329.   
  330.   100% {  
  331.     -moz-transform: rotateX(0deg);  
  332.   }  
  333. }  
  334.   
  335. @-o-keyframes turn {  
  336.   0% {  
  337.     -o-transform: rotateX(90deg);  
  338.   }  
  339.   
  340.   100% {  
  341.     -o-transform: rotateX(0deg);  
  342.   }  
  343. }  
  344.   
  345. @keyframes turn {  
  346.   0% {  
  347.     transform: rotateX(90deg);  
  348.   }  
  349.   
  350.   100% {  
  351.     transform: rotateX(0deg);  
  352.   }  
  353. }  
  354.   
  355. .flip-clock-wrapper ul.play li.flip-clock-before .up {  
  356.   z-index: 2;  
  357.   -webkit-animation: turn2 0.5s linear both;  
  358.   -moz-animation: turn2 0.5s linear both;  
  359.   animation: turn2 0.5s linear both;  
  360. }  
  361.   
  362. @-webkit-keyframes turn2 {  
  363.   0% {  
  364.     -webkit-transform: rotateX(0deg);  
  365.   }  
  366.   
  367.   100% {  
  368.     -webkit-transform: rotateX(-90deg);  
  369.   }  
  370. }  
  371.   
  372. @-moz-keyframes turn2 {  
  373.   0% {  
  374.     -moz-transform: rotateX(0deg);  
  375.   }  
  376.   
  377.   100% {  
  378.     -moz-transform: rotateX(-90deg);  
  379.   }  
  380. }  
  381.   
  382. @-o-keyframes turn2 {  
  383.   0% {  
  384.     -o-transform: rotateX(0deg);  
  385.   }  
  386.   
  387.   100% {  
  388.     -o-transform: rotateX(-90deg);  
  389.   }  
  390. }  
  391.   
  392. @keyframes turn2 {  
  393.   0% {  
  394.     transform: rotateX(0deg);  
  395.   }  
  396.   
  397.   100% {  
  398.     transform: rotateX(-90deg);  
  399.   }  
  400. }  
  401.   
  402. .flip-clock-wrapper ul li.flip-clock-active {  
  403.   z-index: 3;  
  404. }  
  405.   
  406. /* SHADOW */  
  407. .flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {  
  408.   background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  409.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));  
  410.   background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;  
  411.   background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  412.   background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  413.   background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;  
  414.   -webkit-animation: show 0.5s linear both;  
  415.   -moz-animation: show 0.5s linear both;  
  416.   animation: show 0.5s linear both;  
  417. }  
  418.   
  419. .flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {  
  420.   background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  421.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));  
  422.   background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;  
  423.   background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  424.   background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  425.   background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;  
  426.   -webkit-animation: hide 0.5s 0.3s linear both;  
  427.   -moz-animation: hide 0.5s 0.3s linear both;  
  428.   animation: hide 0.5s 0.3s linear both;  
  429. }  
  430.   
  431. /*DOWN*/  
  432. .flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {  
  433.   background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  434.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));  
  435.   background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;  
  436.   background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  437.   background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  438.   background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;  
  439.   -webkit-animation: show 0.5s linear both;  
  440.   -moz-animation: show 0.5s linear both;  
  441.   animation: show 0.5s linear both;  
  442. }  
  443.   
  444. .flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {  
  445.   background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  446.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));  
  447.   background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;  
  448.   background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  449.   background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  450.   background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;  
  451.   -webkit-animation: hide 0.5s 0.3s linear both;  
  452.   -moz-animation: hide 0.5s 0.3s linear both;  
  453.   animation: hide 0.5s 0.2s linear both;  
  454. }  
  455.   
  456. @-webkit-keyframes show {  
  457.   0% {  
  458.     opacity: 0;  
  459.   }  
  460.   
  461.   100% {  
  462.     opacity: 1;  
  463.   }  
  464. }  
  465.   
  466. @-moz-keyframes show {  
  467.   0% {  
  468.     opacity: 0;  
  469.   }  
  470.   
  471.   100% {  
  472.     opacity: 1;  
  473.   }  
  474. }  
  475.   
  476. @-o-keyframes show {  
  477.   0% {  
  478.     opacity: 0;  
  479.   }  
  480.   
  481.   100% {  
  482.     opacity: 1;  
  483.   }  
  484. }  
  485.   
  486. @keyframes show {  
  487.   0% {  
  488.     opacity: 0;  
  489.   }  
  490.   
  491.   100% {  
  492.     opacity: 1;  
  493.   }  
  494. }  
  495.   
  496. @-webkit-keyframes hide {  
  497.   0% {  
  498.     opacity: 1;  
  499.   }  
  500.   
  501.   100% {  
  502.     opacity: 0;  
  503.   }  
  504. }  
  505.   
  506. @-moz-keyframes hide {  
  507.   0% {  
  508.     opacity: 1;  
  509.   }  
  510.   
  511.   100% {  
  512.     opacity: 0;  
  513.   }  
  514. }  
  515.   
  516. @-o-keyframes hide {  
  517.   0% {  
  518.     opacity: 1;  
  519.   }  
  520.   
  521.   100% {  
  522.     opacity: 0;  
  523.   }  
  524. }  
  525.   
  526. @keyframes hide {  
  527.   0% {  
  528.     opacity: 1;  
  529.   }  
  530.   
  531.   100% {  
  532.     opacity: 0;  
  533.   }  
  534. } 
NOTE: if you want to change the height of timer then change in these classes.
 
1. flip-clock-wrapper ul  
      change width and height in 1:3 ratio also you should change 'line-height'
 
2. flip-clock-wrapper ul li a div.up:after -->change top  
 
3. flip-clock-divider --> change height 
 
Step 3: Javascript
Add 'flipclock.min.js'  in aspx page.
 
Here we have some callback function that you can use to can timer properties.
  • Destroy: This callback is triggered when the timer is destroyed.
  • Create: This callback is triggered when the clock face is created.
  • init: This callback is triggered when the FlipClock object is initialized.
  • interval: This callback is triggered with each interval of the time.r
  • start: This callback is triggered when the clock is started.
  • stop: This callback is triggered when the clock is stopped.
  • reset: This callback is triggered when the timer has been reset. 
Methods
 
start() :- This method will start the clock just call the .start() method on an FlipClock object.
  1. clock.start(function() { // this (optional) callback will fire each time the clock flips });  
stop() :- This method will stop the clock just call the .stop() method on an FlipClock object.
  1. clock.stop(function() { // this (optional) callback will fire after the clock stops });  
setTime(): This method will set the clock time after it has been instantiated just call the .setTime() method on an FlipClock object.
  1. clock.setTime(3600);  
setCountdown(): This method will change the clock from counting up or down.
  1. clock.setCountdown(true);  
getTime(): To get the clock time after it has been instantiated just call the .getTime() method on an FlipClock object.
  1. var time = clock.getTime(); // Returns the FlipClock.Time object 
Next Recommended Reading Popup calendar in ASP.NET