Merhaba gençler bu uygulamamızda sizlerle birlikte sesli ve titreşimli bir uyarı kutusu hazırlayacağız. Uygulamamızda bir < div / > nesnesinin sağa ve sola doğru hareket ederek titremesini ve bu arada da kullanıcıya dikkat çeken bir sesli uyarı vermesini sağlayacağız. Uygulama temelde çok basit bir prensibe dayanıyor; öncelikle < div / > nesnesini left özelliğini kullanarak sağa ve sola ekranda konumlandırmak ve bu işlemi her defasında daha az sağa ve sola hareket edecek şekilde azaltmak ve en nihayetinde de işleme son vermek olarak bunu özetleyebiliriz. Uygulamamızın ekran tasarımı aşağıda verdiğim gibi bir < h1 > ile başlık, < input type="button" / >ile bir test düğmesi ve tabi ki son olarak < div / > bir mesaj kutusundan oluşmaktadır.
Bu tasarımı elde etmek için aşağıda verilen html kodlarını yazmanız yeterli olacaktır. Elbette bunları buradan kopyalayarak ya da kullanabilirsiniz ancak öğrenebilmek için bunu yapmak yerine tasarımı kendinizin yapması ve sonunda da JavaScript kodların doğru bir şekilde işleyebilmesi için nesnelere gereken id'lerin verilmesi daha yerinde olacaktır. Son tercih elbette sizin...
<html>
<head>
<meta charset="utf-8">
<title>Sallanan uyari kutusu</title>
<style type="text/css">
.yeniSatir{
height:20px;
}
#uyariKutusu{
position: relative;
background-color: dodgerblue;
width:300px;
height: 100px;
color: white;
text-align:center;
line-height: 24px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Uyarı kutusu sallama efekti</h1>
<div id="sesKatmani"></div>
<input type="button" id="btnSalla" onclick="mesajVer()" value="Test et" />
<div class="yeniSatir"></div>
<div id="uyariKutusu"></div>
</body>
</html>
Son olarak bu çalışmanın işlerllik kazanması için yazılması gereken JavaScript kodlarına ki onlar da aşağıda verdiğim gibidir. Kodlarda yeterince açıklama satırı kullandığım için burada ayrıca detaylı bir açıklama yazma gereği duymuyorum. Butona basıldığında mesajVer() fonksiyonu çağrılır o da her 10 milisaniyede bir defa salla() fonksiyonunu çağırır. Salınım aralığı belirli bir değerin altına indiğinde clearIntrval() çağrılarak tekrarlama işlemine son verilir. Şimdiden sizlere kolay gelsin diyor mutlu kodlama günleri diliyorum. Bu arada alt ve ust degiskenlerinin degerleri salınım aralığını belirliyor bunları değiştirerek daha fazla ya da az salınım elde edebilirsiniz.
<script type="text/javascript" language="javascript">
var islemID=0;
var alt=0,ust=30,sayac=0,durum=true;
function mesajVer(){
///////////////////////////////////////////////////////////////////////////////////////
// Kodlama : Bilal SERT
// Tarih-saat : .../.../2020
// Amaç : kullaniciya sesli ve titresimli uyari mesaji vermek
// Giriş-çıkış : -
// Çağrıldığı yer : btnSalla.click()
// Çağırdıkları : salla()
///////////////////////////////////////////////////////////////////////////////////////
alt=0; ust=50; sayac=0;
var mesaj="\n Lütfen size ayrılan alanları eksiksiz doldurunuz!"
var ses= ";
ses+= "\"sesler/alert.mp3\" type=\"audio/mpeg\">";
ses+="";
//sesli uyari verelim
document.getElementById("sesKatmani").innerHTML=ses;
//uyari mesajini ekleyelim
document.getElementById("uyariKutusu").innerText=mesaj;
//uyari kutusuna golge efekti verelim
nesne=document.getElementById("uyariKutusu").style.boxShadow="3px 3px 3px gray";
//uyari kutusunu sallayalim
clearInterval(islemID); ;
islemID=setInterval("salla()",10)
}//shake
function salla(){
///////////////////////////////////////////////////////////////////////////////////////
// Kodlama : Bilal SERT
// Tarih-saat : .../.../2020
// Amaç : Sönümlü bir sag-sol arasinda gidis gelis olayi yaratmak
// Giriş-çıkış : -
// Çağrıldığı yer : mesajVer()
// Çağırdıkları : -
///////////////////////////////////////////////////////////////////////////////////////
var nesne=document.getElementById("uyariKutusu");
//nesne.innerHTML="alt:" + alt + "
" + "ust:" + ust;
if((ust-alt)<10){
//salinim sona erdi
clearInterval();
nesne.style.left=0;
//uyari kutusunun golge efektini kaldiralim
nesne=document.getElementById("uyariKutusu").style.boxShadow="";
return;
}
if(durum){
if(sayac<ust){
sayac+=5;
nesne.style.left=sayac;
}else{
//alt=0;
ust-=5;
durum=false;
}
}else{
if(sayac>alt){
sayac-=5;
nesne.style.left=sayac;
}else{
alt+=5;
durum=true;
}
}//durum
}//end of salla
< /script>