JavaScript

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

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. <head>  
  5. <link href="style/flipclock.css" rel="stylesheet" />  
  6. <style>  
  7. .clock  
  8. {  
  9. display: none;  
  10. }  
  11. </style>  
  12. </head>  
  13. <body>  
  14. <form runat="server">  
  15. <table>  
  16. <tr>  
  17. <td>  
  18. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>  
  19. <td>  
  20. <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>  
  21. <td>  
  22. <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>  
  23. <td>  
  24. <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></td>  
  25. <td>  
  26. <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></td>  
  27. <td>  
  28. <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td>  
  29. <td>  
  30. <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox></td>  
  31. </tr>  
  32. <tr>  
  33. <td>  
  34. <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox></td>  
  35. <td>  
  36. <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox></td>  
  37. <td>  
  38. <asp:TextBox ID="TextBox10" runat="server"></asp:TextBox></td>  
  39. <td>  
  40. <asp:TextBox ID="TextBox11" runat="server"></asp:TextBox></td>  
  41. <td>  
  42. <asp:TextBox ID="TextBox12" runat="server"></asp:TextBox></td>  
  43. <td>  
  44. <asp:TextBox ID="TextBox13" runat="server"></asp:TextBox></td>  
  45. <td>  
  46. <asp:TextBox ID="TextBox14" runat="server"></asp:TextBox></td>  
  47. </tr>  
  48. <tr>  
  49. <td>  
  50. <asp:TextBox ID="TextBox15" runat="server"></asp:TextBox></td>  
  51. <td>  
  52. <asp:TextBox ID="TextBox16" runat="server"></asp:TextBox></td>  
  53. <td>  
  54. <asp:TextBox ID="TextBox17" runat="server"></asp:TextBox></td>  
  55. <td>  
  56. <asp:TextBox ID="TextBox18" runat="server"></asp:TextBox></td>  
  57. <td>  
  58. <asp:TextBox ID="TextBox19" runat="server"></asp:TextBox></td>  
  59. <td>  
  60. <asp:TextBox ID="TextBox20" runat="server"></asp:TextBox></td>  
  61. <td>  
  62. <asp:TextBox ID="TextBox21" runat="server"></asp:TextBox></td>  
  63. </tr>  
  64. </table>  
  65. <div class="clock" style="margin: 2em;"></div>  
  66. <div class="message"></div>  
  67. </form>  
  68. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>  
  69. <script src="script/flipclock.min.js"></script>  
  70. <script type="text/javascript">  
  71. var clock;  
  72. $(document).ready(function () {  
  73. clock = $('.clock').FlipClock(0, {  
  74. clockFace: 'MinuteCounter',  
  75. autoStart: false  
  76. });  
  77. $("input:text").focus(function () {  
  78. $('.clock').css("display", "inline");  
  79. clock.start();  
  80. });  
  81. $("input:text").focusout(function () {  
  82. clock.stop();  
  83. if (confirm("Do you wanna reset clock?") == true) {  
  84. clock.setTime(0);  
  85. }  
  86. $('.clock').css("display", "none");  
  87. });  
  88. });  
  89. </script>  
  90. </body>  
  91. </html>  
Step 2: CSS
 
Now in CSS we have some tasks:
  1. 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. .flip-clock-wrapper a:hover {  
  20.   color: #fff; }  
  21.   
  22. .flip-clock-wrapper ul {  
  23.   list-style: none; }  
  24.   
  25. .flip-clock-wrapper.clearfix:before,  
  26. .flip-clock-wrapper.clearfix:after {  
  27.   content: " ";  
  28.   display: table; }  
  29.   
  30. .flip-clock-wrapper.clearfix:after {  
  31.   clear: both; }  
  32.   
  33. .flip-clock-wrapper.clearfix {  
  34.   *zoom: 1; }  
  35.   
  36. /* Main */  
  37. .flip-clock-wrapper {  
  38.   font: normal 11px "Helvetica Neue", Helvetica, sans-serif;  
  39.   -webkit-user-select: none; }  
  40.   
  41. .flip-clock-meridium {  
  42.   background: none !important;  
  43.   box-shadow: 0 0 0 !important;  
  44.   font-size: 36px !important; }  
  45.   
  46. .flip-clock-meridium a { color: #313333; }  
  47.   
  48. .flip-clock-wrapper {  
  49.   text-align: center;  
  50.   position: relative;  
  51.   width: 100%;  
  52.   margin: 1em;  
  53. }  
  54.   
  55. .flip-clock-wrapper:before,  
  56. .flip-clock-wrapper:after {  
  57.     content: " "; /* 1 */  
  58.     display: table; /* 2 */  
  59. }  
  60. .flip-clock-wrapper:after {  
  61.     clear: both;  
  62. }  
  63.   
  64. /* Skeleton */  
  65. .flip-clock-wrapper ul {  
  66.   position: relative;  
  67.   float: left;  
  68.   margin: 5px;  
  69.   width: 15px;  
  70.   height: 45px;  
  71.   font-size: 80px;  
  72.   font-weight: bold;  
  73.   line-height: 46px;  
  74.   border-radius: 6px;  
  75.   background: #000;  
  76. }  
  77.   
  78. .flip-clock-wrapper ul li {  
  79.   z-index: 1;  
  80.   position: absolute;  
  81.   left: 0;  
  82.   top: 0;  
  83.   width: 100%;  
  84.   height: 100%;  
  85.   line-height: 46px;  
  86.   text-decoration: none !important;  
  87. }  
  88.   
  89. .flip-clock-wrapper ul li:first-child {  
  90.   z-index: 2; }  
  91.   
  92. .flip-clock-wrapper ul li a {  
  93.   display: block;  
  94.   height: 100%;  
  95.   -webkit-perspective: 200px;  
  96.   -moz-perspective: 200px;  
  97.   perspective: 200px;  
  98.   margin: 0 !important;  
  99.   overflow: visible !important;  
  100.   cursor: default !important; }  
  101.   
  102. .flip-clock-wrapper ul li a div {  
  103.   z-index: 1;  
  104.   position: absolute;  
  105.   left: 0;  
  106.   width: 100%;  
  107.   height: 50%;  
  108.   font-size: 80px;  
  109.   overflow: hidden;   
  110.   outline: 1px solid transparent; }  
  111.   
  112. .flip-clock-wrapper ul li a div .shadow {  
  113.   position: absolute;  
  114.   width: 100%;  
  115.   height: 100%;  
  116.   z-index: 2; }  
  117.   
  118. .flip-clock-wrapper ul li a div.up {  
  119.   -webkit-transform-origin: 50% 100%;  
  120.   -moz-transform-origin: 50% 100%;  
  121.   -ms-transform-origin: 50% 100%;  
  122.   -o-transform-origin: 50% 100%;  
  123.   transform-origin: 50% 100%;  
  124.   top: 0; }  
  125.   
  126. .flip-clock-wrapper ul li a div.up:after {  
  127.   content: "";  
  128.   position: absolute;  
  129.   top: 22px;  
  130.   left: 0;  
  131.   z-index: 5;  
  132.   width: 100%;  
  133.   height: 3px;  
  134.   background-color: #000;  
  135.   background-color: rgba(0, 0, 0, 0.4); }  
  136.   
  137. .flip-clock-wrapper ul li a div.down {  
  138.   -webkit-transform-origin: 50% 0;  
  139.   -moz-transform-origin: 50% 0;  
  140.   -ms-transform-origin: 50% 0;  
  141.   -o-transform-origin: 50% 0;  
  142.   transform-origin: 50% 0;  
  143.   bottom: 0;  
  144.   border-bottom-left-radius: 6px;  
  145.   border-bottom-right-radius: 6px;  
  146. }  
  147.   
  148. .flip-clock-wrapper ul li a div div.inn {  
  149.   position: absolute;  
  150.   left: 0;  
  151.   z-index: 1;  
  152.   width: 100%;  
  153.   height: 200%;  
  154.   color: #ccc;  
  155.   text-shadow: 0 1px 2px #000;  
  156.   text-align: center;  
  157.   background-color: #333;  
  158.   border-radius: 6px;  
  159.   font-size: 40px; }  
  160.   
  161. .flip-clock-wrapper ul li a div.up div.inn {  
  162.   top: 0; }  
  163.   
  164. .flip-clock-wrapper ul li a div.down div.inn {  
  165.   bottom: 0; }  
  166.   
  167. /* PLAY */  
  168. .flip-clock-wrapper ul.play li.flip-clock-before {  
  169.   z-index: 3; }  
  170.   
  171. .flip-clock-wrapper .flip {   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }  
  172.   
  173. .flip-clock-wrapper ul.play li.flip-clock-active {  
  174.   -webkit-animation: asd 0.5s 0.5s linear both;  
  175.   -moz-animation: asd 0.5s 0.5s linear both;  
  176.   animation: asd 0.5s 0.5s linear both;  
  177.   z-index: 5; }  
  178.   
  179. .flip-clock-divider {  
  180.   float: left;  
  181.   display: inline-block;  
  182.   position: relative;  
  183.   width: 20px;  
  184.   height: 50px; }  
  185.   
  186. .flip-clock-divider:first-child {  
  187.   width: 0; }  
  188.   
  189. .flip-clock-dot {  
  190.   display: block;  
  191.   background: #323434;  
  192.   width: 10px;  
  193.   height: 10px;  
  194.   position: absolute;  
  195.   border-radius: 50%;  
  196.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  
  197.   left: 5px; }  
  198.   
  199. .flip-clock-divider .flip-clock-label {  
  200.   position: absolute;  
  201.   top: -1.5em;  
  202.   right: -86px;  
  203.   color: black;  
  204.   text-shadow: none; }  
  205.   
  206. .flip-clock-divider.minutes .flip-clock-label {  
  207.   right: -88px; }  
  208.   
  209. .flip-clock-divider.seconds .flip-clock-label {  
  210.   right: -91px; }  
  211.   
  212. .flip-clock-dot.top {  
  213.   top: 30px; }  
  214.   
  215. .flip-clock-dot.bottom {  
  216.   bottom: 30px; }  
  217.   
  218. @-webkit-keyframes asd {  
  219.   0% {  
  220.     z-index: 2; }  
  221.   
  222.   20% {  
  223.     z-index: 4; }  
  224.   
  225.   100% {  
  226.     z-index: 4; } }  
  227.   
  228. @-moz-keyframes asd {  
  229.   0% {  
  230.     z-index: 2; }  
  231.   
  232.   20% {  
  233.     z-index: 4; }  
  234.   
  235.   100% {  
  236.     z-index: 4; } }  
  237.   
  238. @-o-keyframes asd {  
  239.   0% {  
  240.     z-index: 2; }  
  241.   
  242.   20% {  
  243.     z-index: 4; }  
  244.   
  245.   100% {  
  246.     z-index: 4; } }  
  247.   
  248. @keyframes asd {  
  249.   0% {  
  250.     z-index: 2; }  
  251.   
  252.   20% {  
  253.     z-index: 4; }  
  254.   
  255.   100% {  
  256.     z-index: 4; } }  
  257.   
  258. .flip-clock-wrapper ul.play li.flip-clock-active .down {  
  259.   z-index: 2;  
  260.   -webkit-animation: turn 0.5s 0.5s linear both;  
  261.   -moz-animation: turn 0.5s 0.5s linear both;  
  262.   animation: turn 0.5s 0.5s linear both; }  
  263.   
  264. @-webkit-keyframes turn {  
  265.   0% {  
  266.     -webkit-transform: rotateX(90deg); }  
  267.   
  268.   100% {  
  269.     -webkit-transform: rotateX(0deg); } }  
  270.   
  271. @-moz-keyframes turn {  
  272.   0% {  
  273.     -moz-transform: rotateX(90deg); }  
  274.   
  275.   100% {  
  276.     -moz-transform: rotateX(0deg); } }  
  277.   
  278. @-o-keyframes turn {  
  279.   0% {  
  280.     -o-transform: rotateX(90deg); }  
  281.   
  282.   100% {  
  283.     -o-transform: rotateX(0deg); } }  
  284.   
  285. @keyframes turn {  
  286.   0% {  
  287.     transform: rotateX(90deg); }  
  288.   
  289.   100% {  
  290.     transform: rotateX(0deg); } }  
  291.   
  292. .flip-clock-wrapper ul.play li.flip-clock-before .up {  
  293.   z-index: 2;  
  294.   -webkit-animation: turn2 0.5s linear both;  
  295.   -moz-animation: turn2 0.5s linear both;  
  296.   animation: turn2 0.5s linear both; }  
  297.   
  298. @-webkit-keyframes turn2 {  
  299.   0% {  
  300.     -webkit-transform: rotateX(0deg); }  
  301.   
  302.   100% {  
  303.     -webkit-transform: rotateX(-90deg); } }  
  304.   
  305. @-moz-keyframes turn2 {  
  306.   0% {  
  307.     -moz-transform: rotateX(0deg); }  
  308.   
  309.   100% {  
  310.     -moz-transform: rotateX(-90deg); } }  
  311.   
  312. @-o-keyframes turn2 {  
  313.   0% {  
  314.     -o-transform: rotateX(0deg); }  
  315.   
  316.   100% {  
  317.     -o-transform: rotateX(-90deg); } }  
  318.   
  319. @keyframes turn2 {  
  320.   0% {  
  321.     transform: rotateX(0deg); }  
  322.   
  323.   100% {  
  324.     transform: rotateX(-90deg); } }  
  325.   
  326. .flip-clock-wrapper ul li.flip-clock-active {  
  327.   z-index: 3; }  
  328.   
  329. /* SHADOW */  
  330. .flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {  
  331.   background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  332.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));  
  333.   background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;  
  334.   background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  335.   background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  336.   background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;  
  337.   -webkit-animation: show 0.5s linear both;  
  338.   -moz-animation: show 0.5s linear both;  
  339.   animation: show 0.5s linear both; }  
  340.   
  341. .flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {  
  342.   background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  343.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));  
  344.   background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;  
  345.   background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  346.   background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);  
  347.   background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;  
  348.   -webkit-animation: hide 0.5s 0.3s linear both;  
  349.   -moz-animation: hide 0.5s 0.3s linear both;  
  350.   animation: hide 0.5s 0.3s linear both; }  
  351.   
  352. /*DOWN*/  
  353. .flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {  
  354.   background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  355.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));  
  356.   background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;  
  357.   background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  358.   background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  359.   background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;  
  360.   -webkit-animation: show 0.5s linear both;  
  361.   -moz-animation: show 0.5s linear both;  
  362.   animation: show 0.5s linear both; }  
  363.   
  364. .flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {  
  365.   background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  366.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));  
  367.   background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;  
  368.   background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  369.   background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);  
  370.   background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;  
  371.   -webkit-animation: hide 0.5s 0.3s linear both;  
  372.   -moz-animation: hide 0.5s 0.3s linear both;  
  373.   animation: hide 0.5s 0.2s linear both; }  
  374.   
  375. @-webkit-keyframes show {  
  376.   0% {  
  377.     opacity: 0; }  
  378.   
  379.   100% {  
  380.     opacity: 1; } }  
  381.   
  382. @-moz-keyframes show {  
  383.   0% {  
  384.     opacity: 0; }  
  385.   
  386.   100% {  
  387.     opacity: 1; } }  
  388.   
  389. @-o-keyframes show {  
  390.   0% {  
  391.     opacity: 0; }  
  392.   
  393.   100% {  
  394.     opacity: 1; } }  
  395.   
  396. @keyframes show {  
  397.   0% {  
  398.     opacity: 0; }  
  399.   
  400.   100% {  
  401.     opacity: 1; } }  
  402.   
  403. @-webkit-keyframes hide {  
  404.   0% {  
  405.     opacity: 1; }  
  406.   
  407.   100% {  
  408.     opacity: 0; } }  
  409.   
  410. @-moz-keyframes hide {  
  411.   0% {  
  412.     opacity: 1; }  
  413.   
  414.   100% {  
  415.     opacity: 0; } }  
  416.   
  417. @-o-keyframes hide {  
  418.   0% {  
  419.     opacity: 1; }  
  420.   
  421.   100% {  
  422.     opacity: 0; } }  
  423.   
  424. @keyframes hide {  
  425.   0% {  
  426.     opacity: 1; }  
  427.   
  428.   100% {  
  429.     opacity: 0; } }  
NOTE: if you want to change 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 callcabake fuction 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.
 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.

 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.

 clock.setTime(3600);

setCountdown(): This method will change the clock from counting up or down.

 clock.setCountdown(true);

getTime(): To get the clock time after it has been instantiated just call the .getTime() method on an FlipClock object.

 var time  = clock.getTime(); // Returns the FlipClock.Time object
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs