CSS Jam Dengan Model Polar

Artikel pertama di tahun baru ini, saya akan membuat artikel yang simple, yaitu membuat 'Polar Clock' seperti gambar yang ada pada dibawah ini.

Script ini saya dapat dari github/pritipg yang terinspirasi dari Raphael JS.
nah untuk melihat script/demo aslinya lihat dibawah

• DEMO

untuk script/demo modif dari pritipg yang saya dapat dari github, lihat dibawah ini.

• DEMO

nah, disini saya hanya mengubah sedikit dari pritipg,
saya hanya mengubah warna dan mengubah waktu menjadi 24jam, yang dimana sebelumnya hanya 12 jam saja, karena negara kita menggunakan waktu dalam durasi 24 jam.

langsung saja ke pointnya.
tambah CSS ini ke web/blog kalian

* {
 margin: 0;
 padding: 0;
}
canvas {
 background: #ecf0f1;
 font-family: "Orbitron", sans-serif;
}

Selanjutnya tambahkan JS ini ke web atau blog kalian.

var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")

canvas.style.width = window.innerWidth + "px"
canvas.style.height = window.innerHeight + "px"

canvas.width = window.innerWidth
canvas.height = window.innerHeight

var centerX = canvas.width / 2
var centerY = canvas.height / 2

var date = new Date()
var seconds = date.getSeconds()
var minutes = date.getMinutes()
var hours = date.getHours()

if (hours > 23)
    hours -= 24

var PI  = Math.PI
var cos = Math.cos
var sin = Math.sin

function draw() {
    clearScreen()
    
    drawHand(200, (2 * PI / 60) * seconds, "#002b36")
    drawHand(150, (2 * PI / 60) * minutes, "#34495e")
    drawHand(100, (1.6 * PI / 24) * hours,   "#3498db")

    drawTime(hours, minutes, seconds)
  
    update()    
}

function drawHand(radius, theta, color, width) {
    width = width || 35
    
    ctx.beginPath()
    ctx.arc(centerX, centerY, radius, 3 * PI / 2, (3 * PI / 2) + theta)
    ctx.lineTo(centerX + (radius + width) * cos((PI / 2) - theta),
               centerY - (radius + width) * sin((PI / 2) - theta))
    ctx.arc(centerX, centerY, radius + width, (3 * PI / 2) + theta, 3 * PI / 2, true)
    ctx.closePath()

    ctx.fillStyle = color
    ctx.fill()
}

function drawTime(hours, minutes, seconds) {
    var timeString = ""
    timeString += (hours < 10) ? "0" + hours : hours
    timeString += (minutes < 10) ? ":0" + minutes : ":" + minutes
    timeString += (seconds < 10) ? ":0" + seconds : ":" + seconds
    
    ctx.font = "32px Orbitron, Arial, sans-serif"
    ctx.fillStyle = "#b58900"
    ctx.textAlign = "center"
    ctx.textBaseline = "middle"
    ctx.fillText(timeString, centerX, centerY)
}

function clearScreen() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)  
}

function update() {
    if (seconds == 59) {
        seconds = 0
        if (minutes == 59) {
            minutes = 0
            if (hours == 23) {
                hours = 0
            } else {
                hours = hours + 1
            }
        } else {
            minutes = minutes + 1
        }
    } else {
        seconds = seconds + 1
    }
}

setInterval(draw, 1000)
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Orbitron:400,400italic,700,700italic")

lalu tambahkan tag html berikut ini ke web atau blog kalian, letakkan diposisi yang ingin kalian tampilkan.

<canvas></canvas>

dan sekarang cek web kalian,
untuk demo yang telah saya ubah sedikit bisa klik tombol dibawah.

• DEMO

ok, sampai disini saja, artikel yang tidak berguna ini 😂