H0lligan
Üye
Butona Tıklayınca Animasyonlu Olarak Rastgele Renk Değiştiren Arka Plan.
Ön izlemeye buradan erişebilirsiniz;
Kodlara da Change View kısımından Editor Viewe geçerek erişebilirsiniz.
Bunu farklı bir şeyin arka planını değiştirmek için de kullanabilirsiniz, yapmanız gereken;
HTML den belirlediğiniz taga bir id verin sonrada var Java Script de bulunan " var Body = document.getElementById("body"); " satırındaki tırnak içinde body yazan yere taga verdiğiniz id yi yazın. Arka plan yerine direk rengini değiştirmek içinse " Body.style.backgroundColor = renk; " satırındaki backgroundColor ı color yapın.
Örnek:
Linkleri görüntülemek için kayıt olmalısınız
Kodlara da Change View kısımından Editor Viewe geçerek erişebilirsiniz.
Bunu farklı bir şeyin arka planını değiştirmek için de kullanabilirsiniz, yapmanız gereken;
HTML den belirlediğiniz taga bir id verin sonrada var Java Script de bulunan " var Body = document.getElementById("body"); " satırındaki tırnak içinde body yazan yere taga verdiğiniz id yi yazın. Arka plan yerine direk rengini değiştirmek içinse " Body.style.backgroundColor = renk; " satırındaki backgroundColor ı color yapın.
Örnek:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<body bgcolor="#ababab" id="body">
<h1 id="bubirid">Yazı
</h1>
<center><button id="button" onclick="rastgelerenk()"></button><center>
<script>
var Buton = document.getElementById("button");
var Body = document.getElementById("bubirid");
var yazı = 'Renk Değişimi İçin Tıkla!';
function rastgelerenk() {
var renk = '#' + Math.random().toString(16).substr(2, 6);
Body.style.color = renk;
}
Body.setAttribute('style', 'transition-duration: 1s; -moz-transition-duration:1s; -webkit-transition-duration: 1s;');
Buton.setAttribute('style', 'background-color:indigo; color:#FFF; padding:12px; border:2px solid black; outline:none; position:fixed; transform:translate(-50%); top: 90%;');
Buton.innerHTML = yazı;
</script>
</body>
</html>
