Basit Javascript Örneği
Resimdeki gibi Javascript ile Ekolayzır Yapımı için kodları aşağıda paylaşıyorum.
Toplamda 3 dosya olacak index.html, css.css, js.js olarak kaydedebilirsiniz.(Aynı konumda olmalı)
index.html dosyasına yazılacak kodlar;
<html>
<head>
<LINK href=”css.css” rel=”stylesheet” type=”text/css”>
<body>
<script type=”text/javascript” language=”javascript” src=”js.js”>
</script>
<div class=”equalizer”>
<span class=”column” id=”purple”></span>
<span class=”column” id=”blue”></span>
<span class=”column” id=”cyan”></span>
<span class=”column” id=”green”></span>
<span class=”column” id=”yellow”></span>
<span class=”column” id=”orange”></span>
<span class=”column” id=”red”></span>
<span id=”black”></span>
<br/>
<input type=”button” onclick=”JavaScript: play();” value=”Başlat” id=button>
</div>
<br>
<br><br>
<center><font color=”white”>Powered ßy <b>Furkan Demirci</font></b></center>
</body>
</html>
css.css dosyasına yazılacak kodlar;
BODY {
background-color: black;
margin: 20px auto 20px auto;
}
.equalizer {
text-align: center;
margin: 10px auto;
width: 380px;
}
.column {
display: inline-block;
width: 40px;
margin: 5px;
}
#purple {
height: 160px;
background-color: #8800FF;
}
#blue {
height: 140px;
background-color: #0022FF;
}
#cyan {
height: 100px;
background-color: #22FFFF;
}
#green {
height: 140px;
background-color: #00BB00;
}
#yellow {
height: 180px;
background-color: #FFFF00;
}
#orange {
height: 70px;
background-color: #FF6600;
}
#red {
height: 200px;
background-color: #FF0000;
}
#black {
display: inline-block;
height: 240px;
width: 1px;
background-color: #000000;
}
js.js dosyasına yazılacak kodlar;
//A function to return a random number between a min and a max value
function randomNumber(min, max) {
number = Math.floor((Math.random()*(max-min))+ min);
return number;
}
//Initialise starting values
var purple, blue, cyan, green, yellow, orange, red;
purple = 160;
blue = 140;
cyan = 100;
green = 140;
yellow = 180;
orange = 70;
red = 200;
//To start with the equalizer is paused
var playing=false;
// A Function to change the height of a column more or less randomly
function changeHeight(column, height) {
height-=randomNumber(-20,20);
if (height>200) height=200;
if (height<5) height=5;
column.style.height=height + “px”;
return height;
}
//A Function that will be run every 50ms to animate the equalizer
function animate() {
if (playing) {
purple = changeHeight(document.getElementById(“purple”),purple); blue = changeHeight(document.getElementById(“blue”),blue);
cyan = changeHeight(document.getElementById(“cyan”),cyan);
green = changeHeight(document.getElementById(“green”),green);
yellow = changeHeight(document.getElementById(“yellow”),yellow);
orange = changeHeight(document.getElementById(“orange”),orange);
red = changeHeight(document.getElementById(“red”),red);
//Repeat this function every 50 ms
setTimeout(animate, 50);
}
}
//A Function to play or pause the animation
function play() {
if (playing) {
playing=false;
document.getElementById(“button”).value=”Play”;
} else {
playing=true;
document.getElementById(“button”).value=”Pause”;
animate();
}
}
