What Color İs İt yapımı

What Color İs İt yapımı

HTML CSS ve çok az JQuery bilgisi ile What color is it yapacağız.

Arkadaşlar merhaba , 

Bu dersimizde yaklaşık 3-4 ay önce çok popüler olan WhatColorIsIt uygulumasını göstermeye çalışacağım.HTML CSS ve çok temel düzeyde JQuery kullanarak yapacağız.Kodlar açık bir şekilde aşağıdadır.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Whatcolorisit</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300" rel="stylesheet" type="text/css">
</head>
<body>
<style>
    body {
        transition: all 1s ease-in-out;
    }
    #time {
        margin-top: 15%;
        text-align: center;
        font-size: 116px;
        color: white;
        font-family: "Open Sans",sans-serif;
        font-weight: 300;
    }
    #color {
        margin-top: 5%;
        text-align: center;
        font-size: 30px;
        color:rgba(240, 240, 240, 1);
        font-family: "Open Sans", sans-serif;
        font-weight: 300;
    }
</style>
<script type="text/javascript">
/**
* Created by PC on 09.06.2016.
*/
function whatcolorIsIt () {
var date = new Date(),
hour = date.getHours(),
minute = date.getMinutes(),
second = date.getSeconds();
second = second <=9 ? '0' + second : second ;
minute = minute <=9 ? '0' + minute : minute
document.body.style.backgroundColor = '#' + hour + String(minute) + second ;
document.getElementById('time').innerHTML = hour + " : " + minute + " : " + second ;
document.getElementById('color').innerHTML = "#" + hour + minute + second ;
}
setInterval(whatcolorIsIt, 1000);
</script>
<div id="time"></div>
<div id="color"></div>
</body>
</html>

 

Selim Hamzaoğulları
Sakarya üniversitesi Bilgisayar Mühendisliği Bölümü mezunuyum.Lise yıllarımdan bu yana yazılımla özellikle Web tarafında Front-end ile uğraşıyorum.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Faydalandım. Teşekkürler :)
Araya bu satırıda ekleyin renklerin değişimi daha hızlı oluyor :) hour = hour <= 9 ? '0' + hour : hour;
Teşekkür ederim öneri için deneyeceğim :)

Yukarı Git