Kategori: JS, JQUERY

Başlat Durdur Kontrollü,Ses Seviyesi Sabit Müzik Çalar

Öncelikle jquery kütüphanemizi script tagı ile yüklüyoruz.

Markdown
1 lines
https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Hemen altına script tagı içerisinde bu kodları yüklüyoruz.

JavaScript
21 lines
$(document).ready(function(){   
    $("audio").hide(); 
        var v = document.getElementsByTagName("audio")[0]; 
        v.volume = 0.5;//Ses seviyesi %50
        v.play();/*otomatik başlatır*/
    });
    var curPlaying;$(function() {           
        $(".playback").click(function() { 
            var song = $(this).next('audio')[0];       
            if(song.paused){    
                $(".playback").text("Durdur");
                song.play();            
                song.volume = 1;           
                if(curPlaying) $("audio", "#"+curPlaying)[0].pause();        
            } 
            else {
            song.pause(); 
                $(".playback").text("Başlat");
            }  
        });
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Sayfada istediğiniz yere bu kodları yerleştirin.

HTML
4 lines
<div class="playback">Durdur</div>
<audio controls="">
  <source src="http://thesoundeffect.com/music/mp3/AllMyLife.mp3" type="audio/mpeg">
</audio>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Basit sohbet robotu yapmak

index.php dosyası oluşturup jquery kütüphanesini script tagıyla ekleyin

Markdown
1 lines
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

altına style tagı açarak içerisine bu kodları ekleyin.

CSS
14 lines
.kutu {
        background:#eee;
        border: 1px solid #ddd;
        padding:10px;
        margin-bottom:10px;
                height:200px;
                weight:200px;
}
#sorular {
        height:150px;
        padding:10px;
        overflow:scroll;
        overflow-x:hidden;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

altına script tagı açarak içerisine bu kodları ekleyin.

JavaScript
11 lines
function sor() {
var soru = $("#konus :input").val();
if(soru != '') {
$.post("bot.php",$('#konus').serialize(), function(gelen) { 
$("#sorular").append("Misafir:"+soru+"<br />Bot:"+gelen+"<br />");
$("#soru").val("");
}); 
}else{
 alert("Birşeyler yazmayı deneyebilirsiniz?");  
}
return false; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

sayfa içerisine istediğiniz yere bu kodları yerleştirin.

HTML
10 lines
<div class="kutu">Sanal Bot ile Konuşun!
<div id="sorular">Bir şeyler yazın;<br /></div>
<form id="konus" name="form1" method="post" action="javascript:void(0);">
    <label>
        <input name="soru" type="text" id="soru" value="" size="30" />
         </label>
        <label>
            <input type="submit" name="button" id="button" value="Konuş" onclick="sor()"/>
        </label>
</form></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

bot.php dosyası oluşturup içine bu kodları ekleyin.

PHP
13 lines
<?php 
$soru = htmlspecialchars($_POST["soru"]);
$cevaplar = array("selam"=>"sana da selam","merhaba"=>"merhaba","naber"=>"iyidir senden","iyi"=>"sevindim","sa"=>"as","nasılsın?"=>"teşekkürler siz?","adın ne"=>"yapay zeka");
$anlamadim = array("anlayamadım?","afedersiniz?","bu konuyu bilmiyorum");
$sonuc=array_key_exists($_POST["soru"],$cevaplar);
if($sonuc){
    die($cevaplar[$_POST["soru"]]);
}else{
echo $anlamadim[rand(0,count($anlamadim)-1)];
}
?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Facebook Haber Kaynağı Tarzı Anlık Veri Güncellemek

Bu kod ile her saniye anlık olarak sayfa içeriğinizi yenileyebilirsiniz.

index.php dosyası oluşturup aşağıdaki jquery ve timers kütüphanelerini script tagı ile ekleyin

Markdown
2 lines
https//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
https://collabdev.googlecode.com/svn-history/r5/trunk/static/js/jquery.timers-1.0.0.js
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

ardında script tagı içerisinde bu kodları ekleyin.

JavaScript
15 lines
$(document).ready(function(){
 var j = jQuery.noConflict();
 j(document).ready(function()
 {
 j(".refresh").everyTime(1000,function(i){
 j.ajax({
 url: "refresh.php",
 cache: false,
 success: function(html){
 j(".refresh").html(html);
 }
 })
 })
 });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

son olarak sayfa içerisinde istediğiniz yere bu kodu ekleyin.

HTML
1 lines
<div class="refresh" style="font-size:24px;">Güncelleniyor</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

refresh.php dosyası oluşturup içerisine çekmek istediğiniz veriyi kodlayın.Örneğin;

PHP
1 lines
<?php echo time(); ?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Facebook Tarzı Anlık Geçen Süre

Facebooktaki gibi geçen zamanı anlık olarak görebilirsiniz.

Öncelikle jquery ve timeago kütüphanelerini script tagı ile çağırmalısınız.

Markdown
2 lines
https//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
http://timeago.yarp.com/jquery.timeago.js
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Hemen altına script tagı içerisinde bu kodları ekleyin.

JavaScript
31 lines
$.extend($.timeago, {
    settings: {
      refreshMillis: 1000,
      allowPast: true,
      allowFuture: false,
      localeTitle: false,
      cutoff: 0,
      strings: {
        prefixAgo: null,
        prefixFromNow: null,
        suffixAgo: "önce",
        suffixFromNow: "şimdi",
        inPast: 'sonra',
        seconds: "%d saniye",
        minute: "1 dakika",
        minutes: "%d dakika",
        hour: "1 saat",
        hours: "%d saat",
        day: "1 gün",
        days: "%d gün",
        month: "1 ay",
        months: "%d ay",
        year: "1 yıl",
        years: "%d yıl",
        wordSeparator: " ",
        numbers: []
      }
    }});
jQuery(document).ready(function() {
  jQuery("abbr.timeago").timeago();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Görünmesini istediğiniz yerde ise bu kodu kullanabilirsiniz.

PHP
1 lines
<abbr class="timeago" title="<?php echo date("c", time()); ?>">Hesaplanıyor</abbr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX