William Crusader
Hectopat
- Katılım
- 11 Kasım 2020
- Mesajlar
- 5.359
- Makaleler
- 1
- Çözümler
- 14
Daha fazla
- Cinsiyet
- Erkek
- Meslek
- Yok
Normalde kodda ilk olarak bir butona basıldığında o butonun resmi değişmeli. Bu çalışıyor, fakat sıra iki butonluğa geldiğinde çalışmıyor. Ayrıca herhangi bir hata da almıyorum.
HTML:
CSS:
Javascript:
HTML:
JustPaste.it - Share Text & Images the Easy Way
justpaste.it
CSS:
CSS:
/*
Keyframes kısmını sallamayın.
Ne olduğunu bir ben bir de ben biliyorum.
*/
@keyframes onethatgetbigger{
from{top:55px; left: 55px; width: 380px; height: 430px; opacity: 0.5; position: absolute;}
to{top:55px; left: 55px; width: 440px; height: 470px; opacity: 1; position: absolute;}
}
@keyframes onethatgetsmaller{
from{top:55px; left: 55px; width: 440px; height: 470px; opacity: 1; position: absolute;}
to{top:55px; left: 55px; width: 380px; height: 430px; opacity: 0.5; position: absolute;}
}
@keyframes onethatgetbigger2{
from{top:55px; left: 955px; width: 380px; height: 430px; opacity: 0.5; position: absolute;}
to{top:55px; left: 855px; width: 440px; height: 470px; opacity: 1; position: absolute;}
}
@keyframes onethatgetsmaller2{
from{top:55px; left: 855px; width: 440px; height: 470px; opacity: 1; position: absolute;}
to{top:55px; left: 955px; width: 380px; height: 430px; opacity: 0.5; position: absolute;}
}
img{
width: 52px;
height: 58px;
position: relative;
cursor: pointer;
}
/*DOKUNMAYIN*/
.thirtysix{
top: 400px;
left: 425px;
position: absolute;
}
.thirtyfive{
top: 400px;
left: 363px;
position: absolute;
}
.thirtyfour{
top: 400px;
left: 301px;
position: absolute;
}
.thirtythree{
top: 400px;
left: 239px;
position: absolute;
}
.thirtytwo{
top: 400px;
left: 175px;
position: absolute;
}
.thirtyone{
top: 400px;
left: 113px;
position: absolute;
}
.thirty{
top: 330px;
left: 425px;
position: absolute;
}
.twentynine{
top: 330px;
left: 363px;
position: absolute;
}
.twentyeight{
top: 330px;
left: 301px;
position: absolute;
}
.twentyseven{
top: 330px;
left: 239px;
position: absolute;
}
.twentysix{
top: 330px;
left: 175px;
position: absolute;
}
.twentyfive{
top: 330px;
left: 113px;
position: absolute;
}
.twentyfour{
top: 265px;
left: 425px;
position: absolute;
}
.twentythree{
top: 265px;
left: 363px;
position: absolute;
}
.twentytwo{
top: 265px;
left: 301px;
position: absolute;
}
.twentyone{
top: 265px;
left: 239px;
position: absolute;
}
.twenty{
top: 265px;
left: 175px;
position: absolute;
}
.nineteen{
top: 265px;
left: 113px;
position: absolute;
}
.eighteen{
top: 196px;
left: 425px;
position: absolute;
}
.seventeen{
top: 196px;
left: 363px;
position: absolute;
}
.sixteen{
top: 196px;
left: 301px;
position: absolute;
}
.fifteen{
top: 196px;
left: 239px;
position: absolute;
}
.fourteen{
top: 196px;
left: 175px;
position: absolute;
}
.thirteen{
top: 196px;
left: 113px;
position: absolute;
}
.twelve{
top: 130px;
left: 425px;
position: absolute;
}
.eleven{
top: 130px;
left: 363px;
position: absolute;
}
.ten{
top: 130px;
left: 301px;
position: absolute;
}
.nine{
top: 130px;
left: 239px;
position: absolute;
}
.eight{
top: 130px;
left: 175px;
position: absolute;
}
.seven{
top: 130px;
left: 113px;
position: absolute;
}
.six{
top: 63px;
left: 425px;
position: absolute;
}
.five{
top: 63px;
left: 363px;
position: absolute;
}
.four{
top: 63px;
left: 301px;
position: absolute;
}
.three{
top: 63px;
left: 237px;
position: absolute;
}
.two{
top: 63px;
left: 175px;
position: absolute;
}
.one{
top: 63px;
left: 113px;
position: absolute;
}
/*DOKUNMAYIN*/
/*Birinci saat (png)*/
.clockone{
width: 140px;
height: 70px;
top: 220px;
left: 504px;
position: absolute;
}
/*İkinci saat (png)*/
.clocktwo{
position: absolute;
width: 140px;
height: 70px;
top: 220px;
left: 700px;
}
/*Birinci tahta*/
.board1{
position: absolute;
top: 5px;
left: 5px;
transition: 1s;
}
/*İkinci tahta*/
.board2{
width: 420px;
height: 470px;
position: absolute;
top: 100px;
left: 870px;
transition: 1s;
}
/*Büyüme animasyonu için özel sınıf.*/
.getbigger-class {
animation: onethatgetbigger 1s;
animation-fill-mode: forwards;
}
/*Küçülme animasyonu için özel sınıf.*/
.getsmaller-class {
animation: onethatgetsmaller 1s;
animation-fill-mode: forwards;
}
/*Aynı şey ama ikinci tahta için.*/
.getbigger2-class {
animation: onethatgetbigger2 1s;
animation-fill-mode: forwards;
}
.getsmaller2-class {
animation: onethatgetsmaller2 1s;
animation-fill-mode: forwards;
}
/*Bütün yazıları etkileyen düzenleme.*/
text{
font-family: 'Comfortaa', cursive;
color: red;
font-size: 45px;
transition: 1s;
z-index: 5;
}
/*Birinci saat (yazı)*/
.clock1text{
position: absolute;
top: 236px;
left: 517px;
}
/*İkinci saat (yazı)*/
.clock2text{
position: absolute;
top: 236px;
left: 715px;
}
Javascript:
JavaScript:
let clock1 = "00:05" //Birinci saat
let clock2 = "00:00" //İkinci saat
let başlat = false
let onboat = "1"
let boat1 = [firstblock = ""]
let boat2 = [firstblock2 = "", secondblock2 = ""]
let boat3 = [firstblock3 = "", secondblock3 = "", thirdblock3 = ""]
let boat4 = [firstblock4 = "", secondblock4 = "", thirdblock4 = "", fourblock4 = ""]
window.onload = function(){ //Sayfa yüklendiğinde çalışır.
clock1 = "00:05" //Bilmediğim bir sebepten ötürü bu olmadan site çalışmıyor.
clock2 = "00:00"
onboat = "1"
document.getElementById("board1").className = 'getbigger-class'
document.getElementById("board2").className = 'getsmaller2-class'
}
function putboat(clicked_id){
if (onboat == "1"){
document.getElementById(clicked_id).src="1 kare.png"
boat1[0] = clicked_id
onboat += 1
}
if (onboat == "2"){
document.getElementById(clicked_id).src="2 kare.png"
document.getElementById(clicked_id + 1).src="2 kare.png"
boat2[0] = clicked_id
boat2[1] = clicked_id + 1
onboat += 1
}
}
function clock1load(){ //Birinci saatin çalışması için fonksiyon.
if (clock1 == "00:05"){
//Birinci tahta büyür, ikinci tahta küçülür.
document.getElementById("board1").className = 'getbigger-class'
document.getElementById("board2").className = 'getsmaller2-class'
clock1 = "00:04"
}
else if (clock1 == "00:04"){
clock1 = "00:03"
}
else if (clock1 == "00:03"){
clock1 = "00:02"
}
else if (clock1 == "00:02"){
clock1 = "00:01"
}
else if (clock1 == "00:01"){
clock1 = "00:00"
}
}
function clock2load(){ //İkinci saatin çalışması için fonksiyon.
if (clock1 == "00:00" & clock2 == "00:00"){
clock2 = "00:05"
}
else if (clock1 == "00:00" & clock2 == "00:05"){
//büyüme/küçülme efektlerini çalıştırır.
//ikince tahta büyür, birinci tahta küçülür.
document.getElementById("board2").classList.remove("getsmaller2-class")
document.getElementById("board2").className = 'getbigger2-class'
document.getElementById("board1").classList.remove("getbigger-class")
document.getElementById("board1").className = 'getsmaller-class'
clock2 = "00:04"
}
else if (clock1 == "00:00" & clock2 == "00:04"){
clock2 = "00:03"
}
else if (clock1 == "00:00" & clock2 == "00:03"){
clock2 = "00:02"
}
else if (clock1 == "00:00" & clock2 == "00:02"){
clock2 = "00:01"
}
else if (clock1 == "00:00" & clock2 == "00:01"){
clock2 = "00:00"
clock1 = "00:05"
}
}
putboat()
//clock1load ve clock2load fonksiyonlarını her 1 saniyede çalıştırır.
//bunu durdurmak istediğinizde closeInvertal() kullanabilirsiniz.
setInterval(() => {
document.getElementById("clock1text").innerHTML = clock1
document.getElementById("clock2text").innerHTML = clock2
clock1load()
clock2load()
}, 1000);