Html, Css, JavaScript ile Dijital Saat: Her saniye arkaplan renkleri ve div renkleri farklı farklı değişiyor.
Şöyle bir notum var : function divTimee kısmında her saniye bir div seçiliyor ve o dive background veriliyor. Bilen arkadaşlar varsa o saniye hangi divi seçtiğini [0],[1],[2] gibisinden nasıl görebiliriz.
Onu beceremedim
Github Linki
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=,, initial-scale=1.0">
<title>Digital Clock</title>
</head>
<body>
<div id="clock">
<div class="timeWrapper">
<div class="time">
<h3 id="saat"></h3>
</div>
<span class="ara">:</span>
<div class="time" >
<h3 id="dakika" ></h3>
</div>
<span class="ara" id="red">:</span>
<div class="time" >
<h3 id="saniye" ></h3>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
height: 100vh;
background: #A723AC;
background: -webkit-linear-gradient(right, #A723AC, #6C940C);
background: -moz-linear-gradient(right, #A723AC, #6C940C);
background: linear-gradient(to left, #A723AC, #6C940C);
}
#clock{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.time{
margin-right: 10px;
background-color: #6C940C;
padding: 60px;
border-radius: 15px;
font-size: 50px;
font-family: 'Patrick Hand', cursive;
box-shadow: 0px 10px 5px black;
}
.ara{
color: rgb(117, 82, 5);
padding: 10px;
font-size: 6rem;
}
#red{
color: orange;
padding: 10px;
font-size: 6rem;
}
/* MOBILE DESIGN */
@media only screen and (max-width: 768px) {
.time{
margin-right: 10px;
background-color: #6C940C;
margin: 5px;
padding: 10px;
width: 100px;
height: 100px;
border-radius: 15px;
font-size: 50px;
font-family: 'Patrick Hand', cursive;
box-shadow: 0px 10px 5px black;
}
.timeWrapper{
overflow: hidden;
text-align: center;
width: 400px;
}
}
JavaScript:
let saat=document.getElementById("saat");
let dakika=document.getElementById("dakika");
let saniye=document.getElementById("saniye");
let ara=document.querySelector(".ara");
let red=document.getElementById("red");
let bg=document.getElementById("clock");
let divTime=document.querySelectorAll(".time");
// HER SANIYE BIR DIV SEÇİYOR VE O DIVE BG COLOR ATAMASI YAPILIYOR //
// BAZEN 2-3 KERE AYNI DIV SECILDIGI ICIN DIGER DIVLER DEFAULT RENK GREEN OLARAK KALIYOR //
function divTimee(){
let renk1=getRandomColor();
let renk2=getRandomColor();
divTime[Math.floor(Math.random()*divTime.length)].style.background=`linear-gradient(180deg, ${renk1}, ${renk2})`
}
function getRandomColor(){
let arkaplanlar=[
"red","blue","green","orange","white","black","orangered","aqua","cyan","purple","pink","#e7f26d","#7d5c10","#8278de","#e667f2",
"#c88cdd","#f98cbb","whitesmoke","goldenrod","gold","#632402","#13818e","#8066ca","#963d3a","#46083c","#4cab8c","#f69e03"
];
let randomArkaplan=arkaplanlar[Math.floor(Math.random()*arkaplanlar.length)];
return randomArkaplan;
}
function tarihGoster(){
let renk1=getRandomColor();
let renk2=getRandomColor();
divTimee();
bg.style.background=`linear-gradient(90deg, ${renk1}, ${renk2})`;
ara.style.color=renk1;
red.style.color=renk2;
const tarihim=new Date();
saat.innerHTML=tarihim.getHours();
dakika.innerHTML=tarihim.getMinutes();
saniye.innerHTML=tarihim.getSeconds();
if(saniye.innerHTML<10){
saniye.innerHTML=`0${tarihim.getSeconds()}`;
}
if(dakika.innerHTML<10){
dakika.innerHTML=`0${tarihim.getMinutes()}`;
}
if(saat.innerHTML<10){
saat.innerHTML=`0${tarihim.getHours()}`
}
}
setInterval(tarihGoster,1000);Şöyle bir notum var : function divTimee kısmında her saniye bir div seçiliyor ve o dive background veriliyor. Bilen arkadaşlar varsa o saniye hangi divi seçtiğini [0],[1],[2] gibisinden nasıl görebiliriz.
Onu beceremedim
Github Linki
Son düzenleme:
