00 : 00 : 00 : 00
Şimdi hazır paylaşımın varsa kayıt sekmesinden eklemek istediğin kaydı düzenle diyerek aç. Açılan yerden "HTML" seç ve eklemek isdeğin yaere gel. Öncesinde bir yazı varsa o yazının sonuna ekle ve sonra kodu yapıştır. Sonra yine ekle ve yazına devam et. çünki HTML olarak kodu öncekiyle kronometre kodunu ayrı ayrı kodlanmasını sağlıyor.
Kodu almadan önce bir kaç şey anlatayım.
Sayıları siz ayarlayabiliyorsunuz.
- timer_wrepper ile sayacın en-boy büyüklüğünü
- timer_body ile rakamların büyüklüğünü
- timer_body_text ile yazıların büyüklüğünü
- timer_body_wrapper ile tüşlarının en-boyunu
- timer_buttun ile tuşun büyüklüğünü ayarlıyorsunuz.
Kronometre kodu
<style>
.element_inactive {
opacity: 0.5;
pointer-events: none;
}
.timer_wrapper{
position: relative;
width: 75%;
}
.timer_body{
position: relative;
display: middle;
width: 100%;
height: 40px;
text-align: center;
}
.timer_body_text{
position: center;
display: table-cell;
vertical-align: middle;
font-size: 37px;
color: #444444;
}
.timer_buttons_wrapper{
position: relative;
display: inline-flex;
width: 50%;
height: 30px;
}
.timer_button{
position: center;
float: left;
width: calc((100% - 50px)/3);
height: 100%;
margin-right: 10px;
background-color: transparent;
font-size: 10px;
color: purple;
border: solid 1px purple;
border-radius: 4px;
outline: 0;
cursor: pointer;
}
.timer_buttons_wrapper .timer_button:last-child{
margin-right: 0;
}
.timer_button:hover{
background-color: purple;
color: #ffffff;
}
</style>
<div class="timer_wrapper">
<div class="timer_body">
<span class="timer_body_text">00 : 00 : 00 : 00</span>
</div>
<div class="timer_buttons_wrapper">
<input type="button" class="timer_button start_timer" value="Start">
<input type="button" class="timer_button stop_timer element_inactive" value="Stop">
<input type="button" class="timer_button reset_timer element_inactive" value="Reset">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var timer_state = 0; // Kronometrenin durumunu belirtir. 0 => ilk durum, 1 => başlatıldı, 2 => durduruldu
var right_now = 0; // Şu anı belirtir
var start_time = 0; // Kronometrenin başlatıldığı zamanı belirtir
var passed_time = 0; // Kronometre durdurulana kadar geçen süreyi belirtir
var timer = 0; // Geçen süreyi milisaniye cinsinden belirtir. İlk durumda 0 değerine sahiptir.
var timer_interval = 0; // 10 milisaniyede bir çalışacak olan interval fonksiyonunu belirtir. İlk durumda 0 değerine sahiptir.
// Start butonuna tıklanınca gerçekleşecek olaylar
$(".start_timer").click(function(){
start_timer();
});
// Start butonuna tıklanınca gerçekleşecek olaylar
// Stop butonuna tıklanınca gerçekleşecek olaylar
$(".stop_timer").click(function(){
stop_timer();
});
// Stop butonuna tıklanınca gerçekleşecek olaylar
// Reset butonuna tıklanınca gerçekleşecek olaylar
$(".reset_timer").click(function(){
reset_timer();
});
// Reset butonuna tıklanınca gerçekleşecek olaylar
function start_timer(){
if(timer_state == 0){ // Kronometre durumu 0 ise başlatılabilir.
$(".start_timer").addClass("element_inactive").val("Continue"); // Start butonunu tıklanamaz hale getir ve değerini Continue olarak değiştir.
$(".stop_timer, .reset_timer").removeClass("element_inactive"); // Stop ve Reset butonlarını tıklanabilir hale getir.
start_time = Date.now(); // Başlangıç zamanını güncelle
timer_state = 1; // Kronometre durumunu 1 yap.
// Kronometre başlatıldıktan sonra her 10 milisaniyede bir gerçekleşecek olaylar
timer_interval = setInterval(function(){
right_now = Date.now(); // Şu anı güncelle.
timer = right_now - start_time; // Şu andan başlangıç zamanını çıkararak geçen süreyi bul.
$(".timer_body_text").text(generate_timer_text(timer)); // Geçen süreyi formatlayan fonksiyon yardımıyla formatla ve ekrana yazdır.
},10);
// Kronometre başlatıldıktan sonra her 10 milisaniyede bir gerçekleşecek olaylar
}else if(timer_state == 2){ // Kronometre durumu 2 ise devam ettirilebilir.
$(".start_timer").addClass("element_inactive"); // Start butonunu tıklanamaz hale getir.
$(".stop_timer, .reset_timer").removeClass("element_inactive"); // Stop ve Reset butonlarını tıklanabilir hale getir.
start_time = Date.now(); // Başlangıç zamanını güncelle
timer_state = 1; // Kronometre durumunu 1 yap.
// Kronometre başlatıldıktan sonra her 10 milisaniyede bir gerçekleşecek olaylar
timer_interval = setInterval(function(){
right_now = Date.now(); // Şu anı güncelle.
timer = right_now - start_time + passed_time; // Şu andan başlangıç zamanını ve daha önceden geçen süreyi çıkararak geçen süreyi bul.
$(".timer_body_text").text(generate_timer_text(timer)); // Geçen süreyi formatlayan fonksiyon yardımıyla formatla ve ekrana yazdır.
},10);
// Kronometre başlatıldıktan sonra her 10 milisaniyede bir gerçekleşecek olaylar
}
}
function stop_timer(){
if(timer_state == 1){ // Kronometre durumu 1 ise durdurabilir.
$(".stop_timer").addClass("element_inactive"); // Stop butonunu tıklanamaz hale getir.
$(".start_timer, .reset_timer").removeClass("element_inactive"); // Start ve Reset butonlarını tıklanabilir hale getir.
passed_time = timer; // Geçen süreyi güncelle
timer_state = 2; // Kronometre durumunu 2 yap.
clearInterval(timer_interval); // 10 milisaniyede bir çalışan interval fonksiyonunu durdur.
}
}
function reset_timer(){
if(timer_state != 0){ // Kronometre durumu 0 değil ise resetlenebilir.
$(".stop_timer, .reset_timer").addClass("element_inactive"); // Stop ve Reset butonlarını tıklanamaz hale getir.
$(".start_timer").removeClass("element_inactive").val("Start"); // Start butonunu tıklanabilir hale getir.
$(".timer_body_text").text("00 : 00 : 00 : 00"); // Kronometre metnini sıfırla.
clearInterval(timer_interval); // 10 milisaniyede bir çalışan interval fonksiyonunu durdur.
timer_state = 0; // Kronometre durumunu 0 yap.
timer = 0; // Geçen süreyi 0 yap.
timer_interval = 0; // Saniyede bir çalışan interval fonksiyonunu 0 yap.
}
}
function generate_timer_text(timer){
var timer_text = "00 : 00 : 00 : 00"; // Kronometre metnini ifade eder. İlk durumu 00 : 00 : 00 : 00 şeklindedir.
var mili_sec = 0; // Milisaniye değerini belirtir. İlk durumu 0 değerine sahiptir.
var mili_sec_text = ""; // Milisaniye metnini belirtir. İlk durumu boştur.
var sec = 0; // Saniye değerini belirtir. İlk durumu 0 değerine sahiptir.
var sec_text = ""; // Saniye metnini belirtir. İlk durumu boştur.
var min = 0; // Dakika değerini belirtir. İlk durumu 0 değerine sahiptir.
var min_text = ""; // Dakika metnini belirtir. İlk durumu boştur.
var hour = 0; // Saat değerini belirtir. İlk durumu 0 değerine sahiptir.
var hour_text = ""; // Saat metnini belirtir. İlk durumu boştur.
if(timer != 0 && timer != null){ // Geçen süre 0 değil ve null değil ise;
if(timer < 1000){ // Geçen süre 1000 milisaniyeden (1 saniyeden) küçük ise;
mili_sec = Math.floor(timer / 10); // Milisaniye değerini hesapla.
mili_sec_text = mili_sec; // Milisaniye değerini milisaniye metnine ata.
if(mili_sec < 10){ // Milisaniye değeri 10 milisaniyeden küçük ise değer tek haneli olacağı için başına bir 0 ekleyebiliriz.
mili_sec_text = "0"+mili_sec;
}
timer_text = "00 : 00 : 00 : "+mili_sec_text; // Geçen süreyi formatlayarak geri dönüş değerine ata.
}else if(timer >= 1000 && timer < 60 * 1000){ // Geçen süre 1000 milisaniyeden (1 saniye) büyük eşit ve 60*1000 milisaniyeden (1 dakika) küçük ise;
sec = Math.floor(timer / 1000); // Saniye değerini hesapla.
sec_text = sec; // Saniye metnine saniye değerini ata.
if(sec < 10){ // Saniye değeri 10 saniyeden küçük ise değer tek haneli olacağı için başına bir 0 ekleyebiliriz.
sec_text = "0"+sec;
}
mili_sec = Math.floor((timer % 1000) / 10); // Milisaniye değerini hesapla.
mili_sec_text = mili_sec; // Milisaniye değerini milisaniye metnine ata.
if(mili_sec < 10){ // Milisaniye değeri 10 milisaniyeden küçük ise değer tek haneli olacağı için başına bir 0 ekleyebiliriz.
mili_sec_text = "0"+mili_sec;
}
timer_text = "00 : 00 : "+sec_text+" : "+mili_sec_text; // Geçen süreyi formatlayarak geri dönüş değerine ata.
}else if(timer >= 60 * 1000 && timer < 60 * 60 * 1000){ // Geçen süre 60*1000 milisaniyeden (1 dakika) büyük eşit ve 60*60*1000 milisaniyeden (1 saat) küçük ise;
min = Math.floor(timer / (60 * 1000)); // Dakika değerini hesapla.
min_text = min; // Dakika metnine dakika değerini ata.
if(min < 10){ // Dakika değeri 10 dakikadan küçük ise değer tek haneli olacağı için başına bir 0 ekleyebiliriz.
min_text = "0"+min;
}
sec = Math.floor((timer % (60 * 1000)) / 1000); // Saniye değerini hesapla.
sec_text = sec; // Saniye metnine saniye değerini ata.
if(sec < 10){ // Saniye değeri 10 saniyeden küçük ise değer tek haneli olacağı için başına bir 0 ekleyebiliriz.
sec_text = "0"+sec;
}
mili_sec = Math.floor((timer % 1000) / 10); // Milisaniye değerini hesapla.
mili_sec_text = mili_sec; // Milisaniye değerini milisaniye metnine ata.
if(mili_sec < 10){ // Milisaniye değeri 10 milisaniyeden küçük ise değer tek haneli olacağı için başına bir 0 ekleyebiliriz.
mili_sec_text = "0"+mili_sec;
}
timer_text = "00 : "+min_text+" : "+sec_text+" : "+mili_sec_text; // Geçen süreyi formatlayarak geri dönüş değerine ata.
}else if(timer >= 60 * 60 * 1000){ // Geçen süre 60*60*1000 milisaniyeden (1 saat) büyük eşit ise;
hour = Math.floor(timer / (60 * 60 * 1000)); // Saat değerini hesapla.
hour_text = hour; // Saat metnine saat değerini ata.
if(hour < 10){ // Saat değeri 10 saatten küçük ise değer tek haneli olacağı için başına bir 0 ekleyebiliriz.
hour_text = "0"+hour;
}
min = Math.floor((timer % (60 * 60 * 1000)) / (60 * 1000)); // Dakika değerini hesapla.
min_text = min; // Dakika metnine dakika değerini ata.
if(min < 10){ // Dakika değeri 10 dakikadan küçük ise değer tek haneli olacağı için başına bir 0 ekleyebiliriz.
min_text = "0"+min;
}
sec = Math.floor(((timer % (60 * 60 * 1000)) % (60 * 1000)) / 1000); // Saniye değerini hesapla.
sec_text = sec; // Saniye metnine saniye değerini ata.
if(sec < 10){ // Saniye değeri 10 saniyeden küçük ise değer tek haneli olacağı için başına bir 0 ekleyebiliriz.
sec_text = "0"+sec;
}
mili_sec = Math.floor((timer % 1000) / 10); // Milisaniye değerini hesapla.
mili_sec_text = mili_sec; // Milisaniye değerini milisaniye metnine ata.
if(mili_sec < 10){ // Milisaniye değeri 10 milisaniyeden küçük ise değer tek haneli olacağı için başına bir 0 ekleyebiliriz.
mili_sec_text = "0"+mili_sec;
}
timer_text = hour_text+" : "+min_text+" : "+sec_text+" : "+mili_sec_text; // Geçen süreyi formatlayarak geri dönüş değerine ata.
}
}
return timer_text; // Formatlanmış geçen süreyi geri döndür.
}
});
</script>
Yorumlar
Yorum Gönder