Skip to content

Instantly share code, notes, and snippets.

@hirohitokato
Created January 8, 2025 14:50
Show Gist options
  • Save hirohitokato/bdc5938ae202e6072aa0d7924dafd2d1 to your computer and use it in GitHub Desktop.
Save hirohitokato/bdc5938ae202e6072aa0d7924dafd2d1 to your computer and use it in GitHub Desktop.
Shows current time by QR code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Clock</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: auto;
}
#qrcode {
margin-left: auto;
margin-right: auto;
justify-content: center;
position: relative;
display: flex;
}
</style>
</head>
<body>
<h1>Current time is:</h1>
<div id="qrcode"></div>
<script>
var qrcode = new QRCode("qrcode");
function updateClock() {
const now = moment().format('hh:mm:ss');
qrcode.makeCode(now);
}
// Update QR code every second
setInterval(updateClock, 1000);
// Initial fetch
updateClock();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment