<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href='https://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Englebert' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Pattaya' rel='stylesheet'>
<style>
#tarih_saat_yeri{
background-image: url('saat.png');
margin: 0px;
text-align: center;
position: fixed;
right: 0px;
width: 150px;
height: 280px;
line-height: 50px;
font-family: 'Pattaya';
color:black;
font-size:40px;
}
#tarih_yeri{
font-size: 10px;
line-height:10px;
margin-top: 80px;
color: blue;
}
#dakika_yeri{
margin-top: 0px;
width: 50px;
float: left;
margin-left: 40px;
font-family: "ABeeZee";
}
#saniye_yeri{
float: left;
font-size: 20px;
width: 5px;
left:0px;
}
</style>
<script>
function zamanlayici_1(){
setInterval(tarih_yaz,1000);
}
function tarih_yaz()
{
tarih = new Date();
document.getElementById("tarih_yeri").innerHTML= tarih.getDate()+"/"+(tarih.getMonth()+1)+"/"+tarih.getFullYear();
document.getElementById("saat_yeri").innerHTML=tarih.getHours();
document.getElementById("dakika_yeri").innerHTML=tarih.getMinutes();
document.getElementById("saniye_yeri").innerHTML=tarih.getSeconds();
}
</script>
</head>
<body onload="zamanlayici_1()">
<div id="tarih_saat_yeri">
<div id="tarih_yeri"></div>
<div id="saat_yeri"></div>
<div id="dakika_yeri"></div><div id="saniye_yeri"></div>
</div>