Notes
Notes - notes.io |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
width: 150px;
height: 150px;
background-color: #185AD8;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
border-radius: 15px;
}
.counter{
font-size: 4rem;
font-family: sans-serif;
}
.headling{
font-family: sans-serif;
}
button{
width: 40px;
height: 40px;
position: absolute;
cursor: pointer;
font-size: 1.2em;
background: white;
color: rgb(34, 34, 34);
box-shadow: 0 0 10px rgb(51,51,51,0.158);
border: none;
border-radius: 50px;
}
.decr{
bottom: -15%;
right: 10%;
}
.incr{
bottom: 10%;
right: -15%;
}
</style>
</head>
<body>
<div class="container">
<p class="heading">Sayaç</p>
<p class="counter" id="counter">0</p>
<button class="incr">+</button>
<button class="decr">-</button>
</div>
<script>
let counter = document.getElementById('counter');
let incr = document.querySelector('.incr');
let decr = document.querySelector('.decr');
let count = 0;
incr.addEventListener("click", ()=>{
count++;
updateDisplay();
});
decr.addEventListener("click", ()=>{
count--;
updateDisplay();
});
function updateDisplay(){
counter.innerHTML = count;
};
</script>
</body>
</html>
<!---------------------------------------------------------------SAYILARIN ÜZERİNE GELİNCE SAYININ OLDUĞU KUTU RENK DEĞİŞSİN-------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
.panel{
width: 240px;
margin:50px auto;
}
.kutu{
width: 50px;
height: 50px;
line-height: 50px;
margin:5px;
text-align: center;
border:solid 1px red;
float:left;
}
</style>
</head>
<body>
<div class="panel">
<div class="kutu">1</div>
<div class="kutu">2</div>
<div class="kutu">3</div>
<div class="kutu">4</div>
<div class="kutu">5</div>
<div class="kutu">6</div>
<div class="kutu">7</div>
<div class="kutu">8</div>
<div class="kutu">9</div>
<div class="kutu">10</div>
<div class="kutu">11</div>
<div class="kutu">12</div>
</div>
<script>
//tüm .kutu elementlerini bir düğüm listesi olarak seçin
const kutular = document.querySelectorAll(".kutu");
//for ile tüm kutular üzerinde hareket edin
//ilk index(0) ve son index kutular.length-1 dir
//örnek bir kutu seçme kutular[2]
for(var i=0;i<kutular.length;i++)
{
//her bir kutu ögesine bir tane anonim fonksiyon atayın, fare üzerine gelince çalışsın
kutular[i].onmouseover=function(){
//fare kutunun üzerine gelince kutunu rengine göre kırmızı beyaz yapsın
//kırmızı ise beyaz, kırmızı değilse kırmızı yapsın
if(this.style.backgroundColor=="red")
{
this.style.backgroundColor="white";
}
else
{
this.style.backgroundColor="red";
}
}
}
</script>
</body>
</html>
<!---------------------------------------------------------------MESAJ GÖNDERME MESENCIR GİBİ-------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{background-color: gray; font-weight: bold;}
#genelCerceve{background-color:lightblue; border-radius: 10px;
width: 400px; height: 500px; }
#mesajGirisi{background-color: white; border-radius: 10px;
width: 400px; height: 70px; }
#mesajGirisi > img{ width: 50px; height: 50px; float: left;
margin-left:30px; margin-top:10px; }
#mesajGirisi>input{ margin-top:30px; margin-left:10px; }
#mesajKutulari{ background-color: white; border-radius: 3px;
width: 380px; height: auto; margin-left:10px; }
.gidenMesaj{ border-bottom:2px gray solid; }
.gidenMesaj > img{ width: 20px; height: 20px; margin:5px 5px 0px 5px; }
#tarih{ color:gray; font-size:10px; }
</style>
</head>
<body>
<div id="genelCerceve">
<div id="mesajGirisi">
<img src="HIKO.PNG">
<input type="text" id="mesaj" placeholder="Mesajınızı giriniz.">
<input type="button" value="Gönder" onclick="mesajGonder()">
</div>
<hr>
<div id="mesajKutulari">
<!-- Buraya innerHTML komutu ile kodlar eklenecek -->
</div>
</div>
<script>
function mesajGonder(){
var mesaj=document.getElementById("mesaj").value;
var d = new Date();
var saat=d.getHours();
var dakika=d.getMinutes();
document.getElementById("mesajKutulari").innerHTML+=
"<div class='gidenMesaj'> <img src='ep.jpg'>"
+ mesaj +
"<span id='tarih'>"+saat+":"+dakika+"</span></div>";
document.getElementById("mesaj").value="";
}
</script>
</body>
</html>
<!--------------------------------------------------------------WEB SAYFASININ RENGINI BELIRLEME KOYUMU BEYAZMI ISTERSIN SORUSU----------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="background-color: gray;">
<form>
Web sayfasını <b>koyu</b> modda kullanmak ister misiniz?<br>
<input type="radio" name="mod" id="evet" >Evet<br>
<input type="radio" name="mod" id="hayır" >Hayır<br>
<input type="button" value="Mod Ayarla" onclick="modDegis()">
</form>
</div>
<script>
function modDegis(){
if(document.getElementById("evet").checked==true){
document.getElementsByTagName("body")[0].style.backgroundColor="black";
document.getElementsByTagName("body")[0].style.color="white"
}
else{
document.getElementsByTagName("body")[0].style.backgroundColor="white";
document.getElementsByTagName("body")[0].style.color="black"
}
}
</script>
</body>
</html>
<!--------------------------------------------------------------MELODİ OLUŞTUMA---------------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 id="potre"> </h3>
<input type="button" onclick="melodiBaslat()" value="Melodi Başlat">
<input type="button"onclick="melodiDurdur()" value="Melodi Durdur">
<script>
var metronom; //metronom doğru zamanlamayla çalmasını sağlar
function melodiBaslat(){
var notalar=["do","re","mi","fa","sol","la","si"];
metronom=setInterval(() => { //milisaniye cinsinden tanımlanan süreyle belirli aralıkta tanımlanan fonksiyonu çağırır
rastgele=Math.floor(Math.random() * 7); //0 ile 6 arasında rastgele tam sayı üretir.math.floor yuvarlar belli basamağa kadar
document.getElementById("potre").innerText+=notalar[rastgele] +"_";
}, 2000);
}
function melodiDurdur(){
clearInterval(metronom);//clearInterval ayarlanan zamanlayıcıyı iptal eder
}
</script>
</body>
</html>
<!-------------------------------------------------------------SAYI ARTTIRMA VE AZALTMA----------------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="background-color: lightskyblue; padding: 10px;">
<input type="button" onclick="arttir()" value="Sayıyı Artır">
<h1 id="sayac">0</h1>
<input type="button" onclick="azalt()" value="Sayıyı Azalt">
</div>
<script>
function arttir(){
document.getElementById("sayac").innerText++;
}
function azalt(){
document.getElementById("sayac").innerText--;
}
</script>
</body>
</html>
<!-------------------------------------TIKLADIĞINDA RENK DEĞİŞTİREN RENK BUTONU TIKLADIĞINDA BUTON RENK DEĞİŞİYOR------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#btnTikla{
background-color: #FF0000;
width: 100px;
height: 50px;
color: white;
line-height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<button id="btnTikla">TIKLA</button>
<script>
var btn=document.getElementById("btnTikla");
btnTikla.onclick=function(){
renk=window.getComputedStyle(btn).backgroundColor;
if(renk=="rgb(255, 0, 0)"){
btn.style.backgroundColor="#00FF00";
}
else{
btn.style.backgroundColor="#FF0000";
}
}
</script>
</body>
</html>
<!---------------------------------------------------------ÜRÜN EKLEME YAZDIĞIN ÜRÜNLERİ LİSTELİYOR------------------------------------------------------------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
padding:8px 30px;
margin-right:10px;
}
button{
background: #5f27cd;
color:#fff;
border:none;
padding:10px 30px;
}
</style>
</head>
<body>
<input type="text" name="" id="urun"><button id="ekle">Ürün Ekle</button><br>
<ul id="liste">
</ul>
<script>
const urun =document.querySelector("#urun");
const ekle =document.querySelector("#ekle");
const liste =document.querySelector("#liste");
ekle.onclick=function(){
let li=document.createElement("li");
li.textContent=urun.value;
liste.appendChild(li);
urun.value="";
urun.focus();
}
</script>
</body>
</html>
<!---------------------------------------------------OTOMATİK BİR ŞEKİLDE BUTONA BASARAK DİV OLUŞTURAN KODLAR------------------------------------------------------------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.kutu{
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
font-size:20px;
font-family: sans-serif;
font-weight: bold;
background: red;
color:white;
margin: 5px;
float:left;
}
</style>
</head>
<body>
<br>
<button id="btn1">Div Oluştur</button>
<div id="panel">
</div>
<script>
var btn1=document.querySelector("#btn1");
var panel=document.querySelector("#panel");
btn1.onclick=function(){
var div= document.createElement("div");
div.textContent="Merhaba Dünya";
div.classList="kutu";
panel.appendChild(div);
}
</script>
</body>
</html>
<!---------------------------BİR KUTUNUN İÇİNE YAZI YAZILDIĞINDA İÇERİSİNDE KAÇ KARAKTER DAHA KULLANILABİLECEĞİNİ SÖYLEYEN JS KODLARI---------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Yorum : <br>
<textarea rows="10" id="yazi"></textarea>
<div id="sonuc"></div>
<script>
var yazi=document.querySelector('#yazi');
var sonuc=document.querySelector('#sonuc');
yazi.oninput=function(){
var maksimum=30;
this.value=this.value.substr(0,maksimum);
var kalan= maksimum-this.value.length;
sonuc.innerHTML='Kalan Karakter : '+kalan;
}
</script>
</body>
</html>
<!-----------------------------------------------------TEXT KUTUSUNA GİRİLEN SAYIYA GÖRE DİV KUTUSUNU HAREKET ETTİRMEK---------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#kutu{
top:0px;
left: 0px;
width: 300px;
height: 300px;
position: absolute;
background: #3498db;
z-index: -1;
}
</style>
</head>
<body>
<input type="text" id="x" value="0">
<input type="text" id="y" value="0">
<div id="kutu"></div>
<script>
var x=document.getElementById("x");
var y=document.getElementById("y");
y.onkeyup=function(){
kutu.style.top=y.value+"px";
kutu.style.left=y.value+"px";
}
x.onkeyup=function(){
kutu.style.top=y.value+"px";
kutu.style.left=x.value+"px";
}
</script>
</body>
</html>
<!-------------------------------Farenıin tarayıcı üzerinde hareketini algılayan ve koordinat bilgisini veren JavaScript Örneği------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.konum{
width: 250px;
height: 50px;
line-height: 50px;
font-size: 2em;
background:#0066cc;
color:#FFFFFF;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<div id="x" class="konum">0</div>
<div id="y" class="konum">0</div>
<script>
//window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar
window.onmousemove=function(olay)
{
//gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor.
var xpos=olay.clientX;
var ypos=olay.clientY;
//clientX: farenin x eksenindeki konumu
//clientY farenin y eksenindeki konumu
document.getElementById('x').innerHTML=xpos;
document.getElementById('y').innerHTML=ypos;
}
</script>
</body>
</html>
<!---------------------------------------------------------------------KLASIK SORU---------------------------------------------------------------------------->
Varolanlar görünmeye devam ederken olmayanlarıda Jquery toggle metodu ile gizliyoruz.
//integrity: bu işlemin güvene alınmasını sağlıyor.
//container: Container genelde kapsayıcı DIV'lere verilen class'tır.Bootstrap'ta hazır bir takım CSS kodları getirmektedir.
//Eğer anonim şekilde erişmemiz gerekiyorsa yani herhangi bir bilgiye ihtiyaç yoksa crossorigin="anonymous" olarak kullanacağız.
//Rows özelliği metin alanının görünen yüksekliğini belirtir.
// rem birimi sadece html öğesinin font-size ölçüsünü baz almaktadır.
// margin-bottom : Aşağıdan boşluk bırakır. margin-right : Sağdan boşluk bırakır.
//column:sütun
// cursor:pointer genelde tıklanabilir bağlantılar için kullanılır.
// Fare üzerine geldiğinde olacak değişklikler için hover özelliğini kullanıyoruz.
// expanded-img:Genişletilmiş resim
// position: relative:Normal konumuna göre konumlandırılmıştır
// tabGallery($(this).attr("src")); img seçicisi kullanılarak img elemanları seçilir ve attr metoduyla çağrılır.
attr:html etiketlerinden birinin nitelik değerini alabilir veya değer vereblriz.
Removeattr: html etiketlerinin niteliklerinde birini silebiliriz .
// outline: none; Dış çizgisi yok
// overflow: hidden :Belirlediğimiz kutu elementinin içeriğinin sınırları aşması durumunda nasıl davranacağını bildiren bir özelliktir. Özelliğe atanan değerleri tek tek incelersek. hidden - kutu sınırları dışına taşan alanları gizle.
// position:absolute; özelliği olan bir eleman en yakın pozisyon değeri relative olan elemana göre kendini konumlandırır.
//CSS'de “text-decoration: none” özelliği, bir metin üzerindeki varsayılan altı çizgiyi kaldırmak için kullanılır.
//display:block; özelliği bir öğenin block-level olmasını sağlar. block-level öğeler h1, p, div gibi, her ha ir HTML öğesini gizlemek ve yok saymak için display:none; özelliğini kulanabilirsiniz. display:none; özelliği atanan bir öğe içeriği ile birlikte tarayıcılar tarafından yok sayılır ve web sayfasında gösterilmez. ngi başka bir dışarıdan CSS etkisi olmadığı takdirde alt alta sıralanacaktır. display:flex; özelliği flexbox/esnek kutu modelini kullanmanızı sağlar. flexbox özelliği ile öğeleri istediğiniz şekilde hizalayabilir ve konumlandırabilirsiniz.
<!---------------------------------------------------------------------JQUERY İLE TABLODA ARAMA YAPMAK--------------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#myInput {
max-width: 300px;
}
.row {
margin-bottom: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<input id="myInput" class="form-control" type="text" placeholder="Ara..">
</div>
<div class="row">
<table class="table table-bordered table-hover table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
<!---------------------------------------------------------------------JQUERY İLE BEĞENDİM – BEĞENMEDİM UYGULAMASI------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.like, .dislike {
color: #41ADD1;
text-decoration: none;
border: 1px solid #41ADD1;
padding: 8px 16px;
margin-right: 10px;
cursor: pointer;
border-radius: 4px;
display: inline-block;
font-size: 18px;
}
.vertical-line {
width: 2px;
height: 12px;
background: #41ADD1;
display: inline-block;
}
.like-score, .dislike-score {
color: #41ADD1;
}
</style>
</head>
<body>
<div>
<div class="like">
<i class="fa fa-thumbs-up"></i>
<span>Beğen</span>
<span class="vertical-line"></span>
<span class="like-score">0</span>
</div>
<div class="dislike">
<i class="fa fa-thumbs-down"></i>
<span>Beğenme</span>
<span class="vertical-line"></span>
<span class="dislike-score">0</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".like").click(function () {
var likeScore = parseInt($(".like-score").text());
likeScore++;
$(".like-score").text(likeScore);
});
$(".dislike").click(function () {
var dislikeScore = parseInt($(".dislike-score").text());
dislikeScore++;
$(".dislike-score").text(dislikeScore);
});
});
</script>
</body>
</html>
<!---------------------------------------------------------------------div ile resim galerisi------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tab-gallery {
width: 400px;
height: 390px;
border: 1px solid black;
}
#tab-gallery .columns .column {
float: left;
width: 25%;
}
#tab-gallery .columns .column img {
opacity: 0.8;
cursor: pointer;
width: 90px;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
#tab-gallery .columns .column img:hover {
opacity: 1;
}
#tab-gallery .columns::after {
content: "";
display: table;
clear: both;
}
#tab-gallery .tab-container {
position: relative;
margin-bottom: 20px;
}
#tab-gallery .tab-container #expanded-img {
width: 100%;
}
</style>
</head>
<body>
<div id="tab-gallery">
<div class="tab-container">
<img id="expanded-img" src="1.jpg" />
</div>
<div class="columns">
<div class="column">
<img id="tab-1" src="araba1.jpg"/>
</div>
<div class="column">
<img id="tab-2" src="araba2.jpg"/>
</div>
<div class="column">
<img id="tab-3" src="araba3.jpg"/>
</div>
<div class="column">
<img id="tab-4" src="araba4.jpg"/>
</div>
</div>
</div>
<script>
function tabGallery(src) {
$("#expanded-img").attr("src", src);
}
$("#tab-1").click(function() {
tabGallery($(this).attr("src"));
});
$("#tab-2").click(function() {
tabGallery($(this).attr("src"));
});
$("#tab-3").click(function() {
tabGallery($(this).attr("src"));
});
$("#tab-4").click(function() {
tabGallery($(this).attr("src"));
});
</script>
</body>
</html>
<!-----------------------------------------------------------------10 sanıye içinde başka siteye yönlendirme------------------------------------------------------------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function ysYonlendir(ID, adres, saniye) {
if (saniye == 0) {
window.location.href = adres;
return;
}
document.getElementById(ID).innerHTML = saniye + " saniye sonra yönlendiriliyorsunuz.";
saniye--;
setTimeout(function() {
ysYonlendir(ID, adres, saniye);
}, 1000);
}
</script>
<div id="uyari"></div>
<script>
ysYonlendir("uyari", "https://yeditepe.edu.tr/tr", 10);
</script>
</body>
</html>
<!-------------------------------------------------------------gizli göster ile bir şeyi buton yardımcılığı ile gizli gösteriri------------------------------------------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="gizleGoster('sonuc');">Gizle / Göster</button>
<p id="sonuc" style="display: none;">Gizlenip gösterilen nesne</p>
<script>
function gizleGoster(ID) {
var secilenID = document.getElementById(ID);
if (secilenID.style.display == "none") {
secilenID.style.display = "";
} else {
secilenID.style.display = "none";
}
}
</script>
</body>
</html>
<!-------------------------------------------------------------------HESAP MAKİNESİ---------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#hesapMakinesi {
margin: 0 auto;
width: 350px;
height: auto;
background-color: slategray;
border-radius: 5px;
padding: 10px;
}
#ekran {
padding: 10px 0px 10px 0px;
text-align: center;
}
#sonuc {
padding: 10px;
width: 90%;
border: none;
border-radius: 5px;
text-align: right;
font-size: 50px;
word-wrap: break-word;
}
#sayilar {
text-align: center;
}
button {
width: 70px;
height: 50px;
margin: 4px;
border-radius: 5px;
background-color: whitesmoke;
border: none;
outline: none;
}
</style>
</head>
<body>
<div id="hesapMakinesi">
<div id="ekran">
<input type="text" id="sonuc">
</div>
<div id="sayilar">
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>/</button>
<button>0</button>
<button>.</button>
<button>=</button>
<button>*</button>
</div>
</div>
<script>
"use strict";
var _sayilar = document.getElementsByTagName("button"),
_sayiUzunluk = _sayilar.length,
i = 0;
for (i = 0; i < _sayiUzunluk; i++) {
_sayilar[i].onclick = hesapla;
}
</script>
<script>
"use strict";
var _sonuc = document.getElementById("sonuc");
function hesapla() {
var _deger = this.innerHTML;
if (_deger == "=") {
try {
_sonuc.value = eval(_sonuc.value);
} catch (e) {
_sonuc.value = "0";
}
return;
}
_sonuc.value += _deger;
}
</script>
<script>
"use strict";
var _sayilar = document.getElementsByTagName("button"),
_sayiUzunluk = _sayilar.length,
i = 0,
_sonuc = document.getElementById("sonuc");
for (i = 0; i < _sayiUzunluk; i++) {
_sayilar[i].onclick = hesapla;
}
function hesapla() {
var _deger = this.innerHTML;
if (_deger == "=") {
try {
_sonuc.value = eval(_sonuc.value);
} catch (e) {
_sonuc.value = "0";
}
return;
}
_sonuc.value += _deger;
}
</script>
</body>
</html>
<!-----------------------------------------------RESİM GALERİSİ AMA ÖNCEKİ VE SONRAKİ TUŞLARIYLA RESMİ DEĞİŞME------------------------------------------------------>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#slider {
font: 19px sans-serif;
margin: 0px auto;
position: relative;
width: 600px;
height: 300px;
overflow: hidden;
}
#kontrol {
position: absolute;
right: 0px;
bottom: 10px;
}
#kontrol a {
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="slider">
<div class="slayt"><img src="https://unsplash.it/600/300?image=0" /></div>
<div class="slayt"><img src="https://unsplash.it/600/300?image=1" /></div>
<div class="slayt"><img src="https://unsplash.it/600/300?image=2" /></div>
<div class="slayt"><img src="https://unsplash.it/600/300?image=3" /></div>
<div id="kontrol">
<a href="javascript:oncekiSlayt()">Önceki</a>
<a href="javascript:sonrakiSlayt()">Sonraki</a>
</div>
</div>
<script>
"use strict";
var _slayt = document.getElementsByClassName("slayt");
var slaytSayisi = _slayt.length;
var slaytNo = 0;
var i = 0;
slaytGoster(slaytNo);
function sonrakiSlayt() {
slaytNo++;
slaytGoster(slaytNo);
}
function oncekiSlayt() {
slaytNo--;
slaytGoster(slaytNo);
}
function slaytGoster(slaytNumarasi) {
slaytNo = slaytNumarasi;
if (slaytNumarasi >= slaytSayisi) slaytNo = 0;
if (slaytNumarasi < 0) slaytNo = slaytSayisi - 1;
for (i = 0; i < slaytSayisi; i++) {
_slayt[i].style.display = "none";
}
_slayt[slaytNo].style.display = "block";
}
</script>
</body>
</html>
<!--------------------------------------------SAYI TAHMİN OYUNU----------------------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#sayiTahmin {
width: 100%;
text-align: center;
}
input,
button {
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="sayiTahmin">
<input type="text" id="sayi" />
<button id="tahminEt" disabled>Tahmin Et</button>
<button id="yeniOyun">Yeni OYUN</button>
<p id="sonuc"></p>
</div>
<script>
"use strict";
var hakSayisi = 0;
var rastgeleSayi = 0;
var _tahminEt = document.getElementById("tahminEt");
var _yeniOyun = document.getElementById("yeniOyun");
var _sonuc = document.getElementById("sonuc");
var _sayi = document.getElementById("sayi");
_yeniOyun.onclick = yeni;
_tahminEt.onclick = tahmin;
"use strict";
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function yeni() {
rastgeleSayi = randomInt(0, 99);
hakSayisi = 10;
_sonuc.innerHTML = "";
_sayi.value = "";
_tahminEt.disabled = false;
_yeniOyun.disabled = true;
}
"use strict";
function tahmin() {
if (hakSayisi == 0) return;
var girilenSayi = parseInt(_sayi.value);
var mesaj = "";
if (isNaN(girilenSayi)) return;
if (rastgeleSayi > girilenSayi) {
mesaj = "Daha BÜYÜK değer deneyin";
} else if (girilenSayi > rastgeleSayi) {
mesaj = "Daha küçük değer deneyin";
} else {
mesaj = "Tebrikler!!!";
_tahminEt.disabled = true;
_yeniOyun.disabled = false;
}
hakSayisi--;
_sonuc.innerHTML = mesaj
_sonuc.innerHTML += "<br />"
_sonuc.innerHTML += "Kalan hak sayısı : " + hakSayisi
if (hakSayisi == 0) {
_tahminEt.disabled = true;
_yeniOyun.disabled = false;
}
}
"use strict";
var hakSayisi = 0;
var rastgeleSayi = 0;
var _tahminEt = document.getElementById("tahminEt");
var _yeniOyun = document.getElementById("yeniOyun");
var _sonuc = document.getElementById("sonuc");
var _sayi = document.getElementById("sayi");
_yeniOyun.onclick = yeni;
_tahminEt.onclick = tahmin;
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function yeni() {
rastgeleSayi = randomInt(0, 99);
hakSayisi = 10;
_sonuc.innerHTML = "";
_sayi.value = "";
_tahminEt.disabled = false;
_yeniOyun.disabled = true;
}
function tahmin() {
if (hakSayisi == 0) return;
var girilenSayi = parseInt(_sayi.value);
var mesaj = "";
if (isNaN(girilenSayi)) return;
if (rastgeleSayi > girilenSayi) {
mesaj = "Daha BÜYÜK değer deneyin";
} else if (girilenSayi > rastgeleSayi) {
mesaj = "Daha küçük değer deneyin";
} else {
mesaj = "Tebrikler!!!";
_tahminEt.disabled = true;
_yeniOyun.disabled = false;
}
hakSayisi--;
_sonuc.innerHTML = mesaj
_sonuc.innerHTML += "<br />"
_sonuc.innerHTML += "Kalan hak sayısı : " + hakSayisi
if (hakSayisi == 0) {
_tahminEt.disabled = true;
_yeniOyun.disabled = false;
}
}
</script>
</body>
</html>
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
