Disini kita akan mencoba membuat dimana kita mempunyai sebuah array, dan isi array itu kita ingin tampilkan hanya beberapa digit saja ya, disini berguna sekali ketika kita ingin menampilkan sebuah bulan dan nama bulan itu saya ingin menampilkan 3 huruf depannya saja, bagaimana caranya simak terus ya teman-teman untuk menampilkan jumlah digit isi array sesuai keinginan.
Cara yang saya gunakan disini untuk menampilkan jumlah digit isi array sesuai keinginan, saya akan menggunakan jquery ya teman-teman. dengan bantuan jquery mau berapa huruf atau berapa digit yang berada pada sebuah array kita bisa menampilkan sesuai ke inginan kita, bagaimana caranya teman-teman perhatikan ya:
|
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 |
<style> body{ background: rgba(128, 154, 82, 0.7); } .container{ width: 800px; margin: auto; background: rgba(204, 182, 0, 0.5); } h3{ text-align:center; padding: 20px; } li { float: left; width: 100px; background: cyan; text-align: center; padding: 10px; border-radius: 5px; margin: 2px; list-style: none; } li:hover{ background: magenta; cursor: pointer; } </style> |
Ini adalah classnya saya sedikit menstyle ya teman-teman supaya enak di lihat hasilnya:
|
1 2 3 4 5 |
<div class="container"> <h3>Sekarang Nama Bulan yang tadinya Penulisannya Lengkap Sekarang ditampilkan Menjadi 3 Huruf saja</h3> <ul id="bulan"> </ul> </div> |
dan ini kontennya, cukup sederhana saja saya buat disini: dan sekarang inilah script yang saya gunakan, coba teman-teman perhatikan ya:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> $(document).ready(function() { var bulan = [ 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember']; bulan = $.map(bulan, function(value, i) { return value.substr(0, 3); }); $('#bulan').html( '<li>' + bulan.join('</li><li>') + '</li>' ); }); </script> |
Coba teman-teman perhatikan saya tetap menggunakan atau menulis sebuah array dengan nama bulan lengkap ya, tetapi disini saya akan mencoba menampilkan 3 digit saja.
Oke disini jika teman-teman ingin mengcopy langsung dan ini struktur lengkapnya:
|
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 51 52 53 54 55 |
<html> <head> <title>Menampilkan Jumlah Digit isi Array Sesuai Keinginan</title> <style> body{ background: rgba(128, 154, 82, 0.7); } .container{ width: 800px; margin: auto; background: rgba(204, 182, 0, 0.5); } h3{ text-align:center; padding: 20px; } li { float: left; width: 100px; background: cyan; text-align: center; padding: 10px; border-radius: 5px; margin: 2px; list-style: none; } li:hover{ background: magenta; cursor: pointer; } </style> </head> <body> <div class="container"> <h3>Sekarang Nama Bulan yang tadinya Penulisannya Lengkap Sekarang ditampilkan Menjadi 3 Huruf saja</h3> <ul id="bulan"> </ul> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { var bulan = [ 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember']; bulan = $.map(bulan, function(value, i) { return value.substr(0, 3); }); $('#bulan').html( '<li>' + bulan.join('</li><li>') + '</li>' ); }); </script> </body> </html> |
silahkan teman-teman copy, dan nantinya hasilnya akan seperti ini:
bagaimana cukup simple bukan, oke saya rasa cukup sampai disini belajar kita tentang  menampilkan jumlah digit isi array sesuai keinginan, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.