Hallo sahabat dumenity berjumpa lagi dalam tutorial dumetschool, pada tutorial kali ini saya akan membahas tentang Cara Membikin Counter Dalam Javascript. Mungkin setiap hari pusing dan bosan harus mikir coding terus kali ini saya memutuskan untuk bermain-main dengan Javascript. Idenya apa sih mau bermain javascript, ide saya kali ini adalah untuk menciptakan sesuatu seperti counter di halaman ini menggunakan javascript, HTML dan sedikit CSS; menggunakan layout yang cukup simple. Jadi pada artikel kali sekedar tips dan triks membuat counter.
Saya pikir artikel ini sangat berguna untuk teman – teman semua, untuk memahami sedikit tentang javascript counter. Oke langsung saja Kita buatkan HTML-nya terlebih dahulu,
Silahkan teman – teman buat file HTML di bawah ini;
CounterJavascript.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="box"> <label for="qty"><abbr title="Quantity">Qty</abbr></label> <input id="qty" value="0" /> <button id="down" onclick="modify_qty(-1)">-1</button> <button id="up" onclick="modify_qty(1)">+1</button> </div> </body> </html> |
Oke kalau sudah silahkan teman – teman buat CSS di bawah ini untuk memparcantik tampilan counter javascript yang akan kita buat.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
body { font-family: helvetica, arial, verdana, sans-serif; } input { font-size: 2.4em; background-color: transparent; text-align: center; border-width: 0; width: 100%; margin: 0 0 .1em 0; color: #fff; } label { display: block; font-size: .8em; } button { /* basics */ color: #444; background-color: #B5B198; /* rounded corners */ -webkit-border-radius: 6px; border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; font-weight: bold; } button:hover, button:active, button:focus { background-color: #CBC7AE; } .box { /* basics */ background-color: #444; color: #C4BE92; text-align: center; /* rounded corners */ -webkit-border-radius: 12px; border-radius: 12px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; padding: .8em .8em 1em; width: 8em; margin: 0 auto; -webkit-box-shadow: 0px 0px 12px 0px #000; box-shadow: 0px 0px 12px 0px #000; |
Lumayan cukup panjang juga CSS yang kita buat, kalau sudah silahkan teman – teman buat fungsi javascript di bawah ini, supuya counter javascript kita berjalan.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> function modify_qty(val) { var qty = document.getElementById('qty').value; var new_qty = parseInt(qty,10) + val; if (new_qty < 0) { new_qty = 0; } document.getElementById('qty').value = new_qty; return new_qty; } |
Oke kalau sudah silahakan teman – teman save dan jalan pada browsernya untuk melihat hasilnya, Oke itulah tadi pembahasan saya tentang cara-membikin-counter-dalam-javascript, semoga bermanfaat.