بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
STOP Watch atau Pencatat Waktu dapat kita temui semisal pada perlombaan lari jarak pendek atau Sprint. Sang juri memegang sebuah alat seperti arloji sebagai pencatat waktu sang pelari sampai ke garis finish. Alat itu penting sekali mengingat selisih sekian mili detik saja sudah menimbulkan dampak yang cuku[ signifikan. Tapi saat ini, bukan stop watch itu yang saya bicarakan. Tapi kali ini saya akan membahas bagaimana membuat Membuat Waktu Stop Watch dengan CSS3.
Dalam aplikasi yang banyak digunakan itu, kita tahu bahwa pencatat waktu sangat penting untuk menentukan keakuratan waktu yang diperlukan pada si pelari untuk mencari garis finish pertama kali mendahului lawan-lawannya. Dari situ bisa tercatat waktu berapa menit dan berapa detik sampai milidetik. Cukup mudah digunakan, tapi sangat besar manfaatnya. Dengan trik CSS3 kali ini, hal itu akan kita wujudkan.
Baca Juga :
Pada tutorial kali ini saya akan berbagi cara untuk membuat Stop Watch atau Pencatat Waktu dengan CSS3, dimana hasil dari stop watch ini tidak menggunakan seperti aplikasi online tetapi menggunakan bahasa pemrograman Cascading Style Sheet / CSS. Menarik bukan?
Tujuan dengan pembuatan ini adalah ketika kita ingin mencatat waktu, maka kita tinggal melihat blog kita saja : bisa lewat HP dan kebanyakan jaman sekarang memang orang menggunakan HP untuk melihat sebuah blog ketimbang lewat desktop. Tinggal pencet Mulai dan berakhir dengan Berhenti kemudian kita bisa mencatat berapa waktu yang diperlukan untuk menyelesaikan tugas itu.
Okelah tidak lama-lama lagi ya kita ngobrolnya. Kita mulai saja praktek hari ini membuat koding simple ini dan bisa kalian praktekkan di blog kalian nantinya. Supaya blog kalian ada stop watchnya iya khan? :D
Pencatat Waktu Stop Watch dengan CSS3
1. Seperti biasa kita masuk dulu ke Tema
2. Lalu pilih Sesuaikan : Edit HTML dan masuklah kita ke dapur template
3. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;}
.container{background:linear-gradient(90deg,rgba(8,131,235,1) 0%,rgba(14,159,173,1) 50%,rgba(13,235,184,1) 100%);width:40%;min-width:500px;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;padding:60px 0;border-radius:10px;}
.timerDisplay{position:relative;width:110%;background:#008B8B;left:-5%;padding:40px 0;font-family:'Roboto mono',monospace;color:#ffffff;font-size:40px;display:flex;align-items:center;justify-content:space-around;border-radius:5px;box-shadow:0 0 20px rgba(0,139,253,0.25);}
.buttons{width:80%;margin:60px auto 0 auto;display:flex;justify-content:space-around;}
.buttons button{padding:10px 20px;background-color:#ffffff;color:#141313;border:none;font-family:'Poppins',sans-serif;font-size:18px;border-radius:5px;cursor:pointer;outline:none;}4. Masuk ke Tata Letak dan taruh kode dibawah ini di halaman kosong disitu dan kemudian simpan.
<div class="container"><div class="timerDisplay">00:00:00:000</div>
<div class="buttons">
<button id="startTimer">Mulai</button>
<button id="pauseTimer">Berhenti</button>
<button id="resetTimer">Set Awal</button></div></div>5. Kita tambahkan kode javascriptnya ya. Masuk lagi ke Template dan cari kode </body> dan taruh kode dibawah ini diatas kode </body>. Jangan salah taruh ya nanti tidak dapat muncul stop watchnya.
<script type='text/javascript'>
//<![CDATA[
let [milliseconds,seconds,minutes,hours] = [0,0,0,0];let timerRef = document.querySelector('.timerDisplay');let int = null;document.getElementById('startTimer').addEventListener('click',()=>{if(int!==null){clearInterval(int);}
int = setInterval(displayTimer,10);}
);document.getElementById('pauseTimer').addEventListener('click',()=>{clearInterval(int);}
);document.getElementById('resetTimer').addEventListener('click',()=>{clearInterval(int);[milliseconds,seconds,minutes,hours] = [0,0,0,0];timerRef.innerHTML = '00:00:00:000 '}
);function displayTimer(){milliseconds+=10;if(milliseconds == 1000){milliseconds = 0;seconds++;if(seconds == 60){seconds = 0;minutes++;if(minutes == 60){minutes = 0;hours++;}};}
let h = hours <10 ? "0"+ hours:hours;let m = minutes <10 ? "0"+ minutes:minutes;let s = seconds <10 ? "0"+ seconds:seconds;let ms = milliseconds <10 ? "00"+ milliseconds:milliseconds <100 ? "0"+ milliseconds:milliseconds;timerRef.innerHTML = ` ${h;}
:${m;}
:${s;}
:${ms;}
`;}
//]]>
</script>Dan terakhir lihat di blog kamu. Atau kalian bisa lihat dulu di hasil akhir di blog contoh dibawah ini
Oke itu saja yang dapat saya sampaikan hari ini. Saya membuat ini disela waktu ya. Jadi jika ada kata dan kalimat yang tidak sesuai mohon dimaafkan. Disela waktu saya kerjakan, karena pagi hingga sore saya kerja di Rumah Sakit swasta di Kota Magelang. Yups, setelah itu semua dipraktekkan, waktunya simpan pekerjaan kamu ya. Supaya tampil maksimal, mohon teliti lagi kodenya jangan sampai ada yang salah atau keliru taruh. Karena tidak akan tampil bila itu terjadi. Inilah penjelasan dari tutorial membuat Pencatat Waktu Stop Watch dengan CSS3.
Lumayan mudah bukan, tinggal copas saja itu kode dan taruh di blog kamu. Terima kasih untuk kalian semua yang sudah mau mampir kesini dan membaca artikel Pencatat Waktu Stop Watch dengan CSS3. Hidup hanya sekali, maka pergunakanlah waktu singkat ini dengan ilmu yang mumpuni. Karena esok hari akan menyambut kita dengan riang hati. Sorak sorai burung menari menyambut mentari, menghiasi taman hati untuk diri kita sendiri. Selamat berkreasiii. Salam.
Label Postingan :
CSS
,
Javascript
,
Tips Blog
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Pencatat Waktu Selain Stop Watch dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
