HTML, CSS, JS ile ömüründe kalan saat dakika ve saniye hesabı yapan bir sayfa yazalım. Ne kadar zamanının kaldığını hesaplamak için önce Amerika Birleşik Devletleri Sosyal Güvenlik kurulunun halka açtığı ortalama insan ömürlerini çekeceğiz. Buradan ulaşabilirsiniz. Sonra kişiden yaş bilgisini isteyip ortalama ömürden çıkartıp detaylı bir sonuca ulaşacağız.
Canlı site görüntüsü:
http://kodblogum.com/consol/kalan_yas/
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Grayscale</title> <link rel="stylesheet" href="css.css"> </head> <body> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <div class="container"> <input type="text" id="how-old" class="visible" placeholder="Yaşın ?"> <p class="content"><span class="line" id="line-1"><a href="http://www.ssa.gov/oact/STATS/table4c6.html">ABD Sosyal Güvenlik Kurulu</a>'ndan çekilen, insanların ortalama ölüm yaşına göre senin kalan zamanın:</span><span id="timer"></span></p> <p class="content"><br />Tamam bakıp durma git birşeyler yap!</p> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js.js"></script> </body> </html> |
CSS
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 |
.container { max-width:500px; padding:100px 15px; margin:0 auto; font-family:Montserrat; text-transform:uppercase; } input { border:none; outline:none; font-size:1.8em; font-weight:300; opacity:0; -webkit-transition:all 0.2s ease; } .content { opacity:0; -webkit-transition:all 0.2s 1.2s ease; } .visible { opacity:1; } #line-1 { font-size:0.65em; } #line-2 { font-size:3.8em; } #line-3 { font-size:4.5em; } #line-4 { font-size:2.0em; } |
Javascript
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 |
function addCommas(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } $(document).ready(function() { $('#how-old').focus(); $('#how-old').change(function() { var age = $(this).val(); var expectancy = 78; var life = expectancy - age; var totalSecs = life * 31536000; $(this).removeClass('visible'); $('.content').addClass('visible'); setInterval(function(){ if (life > 08) { var h = Math.floor(totalSecs / 3600); var hrem = totalSecs % 3600; var m = Math.floor(hrem / 60); var s = hrem % 60; $('#timer').html('<span class="line" id="line-2"><br />' + addCommas(h) + ' saat <br /></span><span class="line" id="line-3">' + m + ' dakika </span><span class="line" id="line-4"><br />' + s + ' saniye '); totalSecs--; } },1000); }); }); |
onu siz bilemezsiniz kardeş
Abi adamı imana getirir bu 🙂
Bence bu kodlar verileri oradan anlık çekmiyor. Oradaki verilerin ortalamasına göre hesaplama yapıyor.
Evet Api kullanımı yoktur. Verilerin ortalamasına göre yazıldı.
daha çok varmış güzel, az hesaplasaydı beğenmicektim 😀