Created
May 23, 2023 09:46
-
-
Save grdw/3f945bae237ecb870c3cd802d81e9cf2 to your computer and use it in GitHub Desktop.
A date of birth field where you have to wait in real time until your correct date of birth appears
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Date of birth</title> | |
</head> | |
<body> | |
<canvas id="canvas" width="200" height="200"></canvas> | |
<form> | |
<label>Date of birth</label> | |
<input id="day" disabled="disabled" maxlength="2" name="date-of-birth-day"/> | |
<input id="month" disabled="disabled" maxlength="2" name="date-of-birth-month"/> | |
<input id="year" disabled="disabled" maxlength="4" name="date-of-birth-year"/> | |
<button id="stop">Stop</button> | |
</form> | |
<style> | |
input[name="date-of-birth-year"] { | |
width: 40px; | |
} | |
input[name="date-of-birth-day"], input[name="date-of-birth-month"] { | |
width: 20px; | |
} | |
</style> | |
<script> | |
const button = document.getElementById("stop"); | |
const day = document.getElementById("day"); | |
const month = document.getElementById("month"); | |
const year = document.getElementById("year"); | |
const canvas = document.getElementById("canvas"); | |
let ctx = canvas.getContext("2d"); | |
let radius = canvas.height / 2; | |
let t = 0; | |
setDate(t); | |
let i = setInterval(function() { | |
t += 1; | |
setDate(t); | |
drawClock(); | |
}, 1000); | |
ctx.translate(radius, radius); | |
radius = radius * 0.90 | |
button.addEventListener("click", function(e) { | |
e.preventDefault(); | |
clearInterval(i); | |
}); | |
function setDate(t) { | |
const d = new Date(t * 1000); | |
console.log(d); | |
year.value = d.getFullYear(); | |
month.value = d.getMonth() + 1; | |
day.value = d.getDate(); | |
} | |
function drawClock() { | |
drawFace(ctx, radius); | |
drawNumbers(ctx, radius); | |
drawTime(ctx, radius); | |
} | |
function drawFace(ctx, radius) { | |
ctx.beginPath(); | |
ctx.arc(0, 0, radius, 0, 2*Math.PI); | |
ctx.fillStyle = 'white'; | |
ctx.fill(); | |
ctx.lineWidth = radius*0.1; | |
ctx.stroke(); | |
ctx.beginPath(); | |
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); | |
ctx.fillStyle = '#333'; | |
ctx.fill(); | |
} | |
function drawNumbers(ctx, radius) { | |
var ang; | |
var num; | |
ctx.font = radius*0.15 + "px arial"; | |
ctx.textBaseline="middle"; | |
ctx.textAlign="center"; | |
for(num = 1; num < 13; num++){ | |
ang = num * Math.PI / 6; | |
ctx.rotate(ang); | |
ctx.translate(0, -radius*0.85); | |
ctx.rotate(-ang); | |
ctx.fillText(num.toString(), 0, 0); | |
ctx.rotate(ang); | |
ctx.translate(0, radius*0.85); | |
ctx.rotate(-ang); | |
} | |
} | |
function drawTime(ctx, radius){ | |
var now = new Date(); | |
var hour = now.getHours(); | |
var minute = now.getMinutes(); | |
var second = now.getSeconds(); | |
//hour | |
hour=hour%12; | |
hour=(hour*Math.PI/6)+ | |
(minute*Math.PI/(6*60))+ | |
(second*Math.PI/(360*60)); | |
drawHand(ctx, hour, radius*0.5, radius*0.07); | |
//minute | |
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); | |
drawHand(ctx, minute, radius*0.8, radius*0.07); | |
// second | |
second=(second*Math.PI/30); | |
drawHand(ctx, second, radius*0.9, radius*0.02); | |
} | |
function drawHand(ctx, pos, length, width) { | |
ctx.beginPath(); | |
ctx.lineWidth = width; | |
ctx.lineCap = "round"; | |
ctx.moveTo(0,0); | |
ctx.rotate(pos); | |
ctx.lineTo(0, -length); | |
ctx.stroke(); | |
ctx.rotate(-pos); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment