Kategori: JS, JQUERY

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

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

https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js

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

$(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");
			}  
		});
	});

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

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

 

Basit sohbet robotu yapmak

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

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

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

.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;
}

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

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; }

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

<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>

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

<?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)];
}
?>

 

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

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

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

$(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);
 }
 })
 })
 });
});

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

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

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

<?php echo time(); ?>

 

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.

https//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
http://timeago.yarp.com/jquery.timeago.js

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

$.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();
});

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

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