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>
  5. <head>
  6. <link href="style/flipclock.css" rel="stylesheet" />
  7. <style>
  8. .clock
  9. {
  10. display: none;
  11. }
  12. </style>
  13. </head>
  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>
  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. }
  14. .flip-clock-wrapper a {
  15. cursor: pointer;
  16. text-decoration: none;
  17. color: #ccc;
  18. }
  20. .flip-clock-wrapper a:hover {
  21. color: #fff;
  22. }
  24. .flip-clock-wrapper ul {
  25. list-style: none;
  26. }
  28. .flip-clock-wrapper.clearfix:before,
  29. .flip-clock-wrapper.clearfix:after {
  30. content: " ";
  31. display: table;
  32. }
  34. .flip-clock-wrapper.clearfix:after {
  35. clear: both;
  36. }
  38. .flip-clock-wrapper.clearfix {
  39. *zoom: 1;
  40. }
  42. /* Main */
  43. .flip-clock-wrapper {
  44. font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
  45. -webkit-user-select: none;
  46. }
  48. .flip-clock-meridium {
  49. background: none !important;
  50. box-shadow: 0 0 0 !important;
  51. font-size: 36px !important;
  52. }
  54. .flip-clock-meridium a {
  55. color: #313333;
  56. }
  58. .flip-clock-wrapper {
  59. text-align: center;
  60. position: relative;
  61. width: 100%;
  62. margin: 1em;
  63. }
  65. .flip-clock-wrapper:before,
  66. .flip-clock-wrapper:after {
  67. content: " ";
  68. /* 1 */
  69. display: table;
  70. /* 2 */
  71. }
  73. .flip-clock-wrapper:after {
  74. clear: both;
  75. }
  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. }
  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. }
  102. .flip-clock-wrapper ul li:first-child {
  103. z-index: 2;
  104. }
  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. }
  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. }
  128. .flip-clock-wrapper ul li a div .shadow {
  129. position: absolute;
  130. width: 100%;
  131. height: 100%;
  132. z-index: 2;
  133. }
  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. }
  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. }
  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. }
  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. }
  181. .flip-clock-wrapper ul li a div.up div.inn {
  182. top: 0;
  183. }
  185. .flip-clock-wrapper ul li a div.down div.inn {
  186. bottom: 0;
  187. }
  189. /* PLAY */
  190. .flip-clock-wrapper ul.play li.flip-clock-before {
  191. z-index: 3;
  192. }
  194. .flip-clock-wrapper .flip {
  195. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
  196. }
  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. }
  205. .flip-clock-divider {
  206. float: left;
  207. display: inline-block;
  208. position: relative;
  209. width: 20px;
  210. height: 50px;
  211. }
  213. .flip-clock-divider:first-child {
  214. width: 0;
  215. }
  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. }
  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. }
  236. .flip-clock-divider.minutes .flip-clock-label {
  237. right: -88px;
  238. }
  240. .flip-clock-divider.seconds .flip-clock-label {
  241. right: -91px;
  242. }
  244. .flip-clock-dot.top {
  245. top: 30px;
  246. }
  248. .flip-clock-dot.bottom {
  249. bottom: 30px;
  250. }
  252. @-webkit-keyframes asd {
  253. 0% {
  254. z-index: 2;
  255. }
  257. 20% {
  258. z-index: 4;
  259. }
  261. 100% {
  262. z-index: 4;
  263. }
  264. }
  266. @-moz-keyframes asd {
  267. 0% {
  268. z-index: 2;
  269. }
  271. 20% {
  272. z-index: 4;
  273. }
  275. 100% {
  276. z-index: 4;
  277. }
  278. }
  280. @-o-keyframes asd {
  281. 0% {
  282. z-index: 2;
  283. }
  285. 20% {
  286. z-index: 4;
  287. }
  289. 100% {
  290. z-index: 4;
  291. }
  292. }
  294. @keyframes asd {
  295. 0% {
  296. z-index: 2;
  297. }
  299. 20% {
  300. z-index: 4;
  301. }
  303. 100% {
  304. z-index: 4;
  305. }
  306. }
  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. }
  315. @-webkit-keyframes turn {
  316. 0% {
  317. -webkit-transform: rotateX(90deg);
  318. }
  320. 100% {
  321. -webkit-transform: rotateX(0deg);
  322. }
  323. }
  325. @-moz-keyframes turn {
  326. 0% {
  327. -moz-transform: rotateX(90deg);
  328. }
  330. 100% {
  331. -moz-transform: rotateX(0deg);
  332. }
  333. }
  335. @-o-keyframes turn {
  336. 0% {
  337. -o-transform: rotateX(90deg);
  338. }
  340. 100% {
  341. -o-transform: rotateX(0deg);
  342. }
  343. }
  345. @keyframes turn {
  346. 0% {
  347. transform: rotateX(90deg);
  348. }
  350. 100% {
  351. transform: rotateX(0deg);
  352. }
  353. }
  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. }
  362. @-webkit-keyframes turn2 {
  363. 0% {
  364. -webkit-transform: rotateX(0deg);
  365. }
  367. 100% {
  368. -webkit-transform: rotateX(-90deg);
  369. }
  370. }
  372. @-moz-keyframes turn2 {
  373. 0% {
  374. -moz-transform: rotateX(0deg);
  375. }
  377. 100% {
  378. -moz-transform: rotateX(-90deg);
  379. }
  380. }
  382. @-o-keyframes turn2 {
  383. 0% {
  384. -o-transform: rotateX(0deg);
  385. }
  387. 100% {
  388. -o-transform: rotateX(-90deg);
  389. }
  390. }
  392. @keyframes turn2 {
  393. 0% {
  394. transform: rotateX(0deg);
  395. }
  397. 100% {
  398. transform: rotateX(-90deg);
  399. }
  400. }
  402. .flip-clock-wrapper ul li.flip-clock-active {
  403. z-index: 3;
  404. }
  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. }
  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. }
  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. }
  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. }
  456. @-webkit-keyframes show {
  457. 0% {
  458. opacity: 0;
  459. }
  461. 100% {
  462. opacity: 1;
  463. }
  464. }
  466. @-moz-keyframes show {
  467. 0% {
  468. opacity: 0;
  469. }
  471. 100% {
  472. opacity: 1;
  473. }
  474. }
  476. @-o-keyframes show {
  477. 0% {
  478. opacity: 0;
  479. }
  481. 100% {
  482. opacity: 1;
  483. }
  484. }
  486. @keyframes show {
  487. 0% {
  488. opacity: 0;
  489. }
  491. 100% {
  492. opacity: 1;
  493. }
  494. }
  496. @-webkit-keyframes hide {
  497. 0% {
  498. opacity: 1;
  499. }
  501. 100% {
  502. opacity: 0;
  503. }
  504. }
  506. @-moz-keyframes hide {
  507. 0% {
  508. opacity: 1;
  509. }
  511. 100% {
  512. opacity: 0;
  513. }
  514. }
  516. @-o-keyframes hide {
  517. 0% {
  518. opacity: 1;
  519. }
  521. 100% {
  522. opacity: 0;
  523. }
  524. }
  526. @keyframes hide {
  527. 0% {
  528. opacity: 1;
  529. }
  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