code.prehanto: Membuat Penghitung Waktu Dengan jQuery

Selamat malam sobat yang suka begadang bermain coding, Sering terlihat di suatu website terdapat penghitungan waktu, nah di sini saya akan membahas tentang cara membuat souce code timer.

1. Sobat harus download plugin yang akan digunakan.
2. Masukan link yang di download seperti dibawah ini

1<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

2<script type="text/javascript" src="js/kinetic.js"></script>

3<script type="text/javascript" src="../jquery.final-countdown.js"></script>

3. Include jga bostrap css 3.

1<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

4. Tulis struktur code seperti dibawah ini

01<div class="countdown-container container">

02<div class="clock row">

03

04<!-- days -->

05<div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">

06<div class="wrap">

07<div class="inner">

08<div id="canvas_days" class="clock-canvas"></div>

09<div class="text">

10<p class="val">0</p>

11<p class="type-days type-time">DAYS</p>

12</div>

13</div>

14</div>

15</div>

16

17<!-- hours -->

18

19<div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">

20<div class="wrap">

21<div class="inner">

22<div id="canvas_hours" class="clock-canvas"></div>

23<div class="text">

24<p class="val">0</p>

25<p class="type-hours type-time">HOURS</p>

26</div>

27</div>

28</div>

29</div>

30

31<!-- minutes -->

32<div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">

33<div class="wrap">

34<div class="inner">

35<div id="canvas_minutes" class="clock-canvas"></div>

36<div class="text">

37<p class="val">0</p>

38<p class="type-minutes type-time">MINUTES</p>

39</div>

40</div>

41</div>

42</div>

43

44<!-- seconds -->

45<div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">

46<div class="wrap">

47<div class="inner">

48<div id="canvas_seconds" class="clock-canvas"></div>

49<div class="text">

50<p class="val">0</p>

51<p class="type-seconds type-time">SECONDS</p>

52</div>

53</div>

54</div>

55</div>

56</div>

57

58</div>

5. Untuk CSSnya sebagai berikut

01html, body {
02height:100%;
03}
04html {
05background-image:url('../img/sample.jpg');
06background-position:center center;
07background-repeat:no-repeat;
08background-size: cover;
09}
10body {
11background-color: rgba(44,62,80 ,0.6 );
12background-image:url('../img/pattern.png');
13background-position:center;
14background-repeat:repeat;
15font-family:'Raleway','Arial',sans-serif;
16}
17.countdown-container {
18position:relative;
19top:50%;
20-webkit-transform: translateY(-50%);
21-moz-transform: translateY(-50%);
22transform: translateY(-50%);
23}
24.clock-item .inner {
25height:0px;
26padding-bottom:100%;
27position:relative;
28width:100%;
29}
30.clock-canvas {
31background-color: rgba(255,255,255, .1);
32border-radius:50%;
33height:0px;
34padding-bottom:100%;
35}
36.text {
37color:#fff;
38font-size:30px;
39font-weight:bold;
40margin-top:-50px;
41position:absolute;
42top:50%;
43text-align:center;
44text-shadow:1px 1px 1px rgba(0,0,0,1);
45width:100%;
46}
47.text .val {
48font-size:50px;
49}
50.text .type-time {
51font-size:20px;
52}
53 @media (min-width:768px) and (max-width:991px) {
54.clock-item {
55margin-bottom:30px;
56}
57}
58 @media (max-width:767px) {
59.clock-item {
60margin:0px 30px 30px 30px;
61}
62}

6. Java Script Jangan liupa ditambahkan js ini berfungsi untuk menghitung    durasi waktu yang diinginklan

1<script type="text/javascript">
2$('.countdown').final_countdown({
3start:'1362139200',
4end:'1388461320',
5now:'1387461319'
6});
7</script>

Cukup sekian tutorial dari saya, mungkin teman-teman masih binggung ya , langsung download aja di link http://destyy.com/q13gL8 atau di http://viahold.com/2ITM tapi jangala lupa share kepada yang membutuhkan. terimakasih

Sunday, August 13, 2017

Membuat Penghitung Waktu Dengan jQuery