Clock from w3school tutorial

Developer
Khalid Munir
Size
2,731 Kb
Views
28,336
  1. Clock from w3school tutorial Previews
  2. Clock from w3school tutorial HTML Codes
  3. Clock from w3school tutorial JS Codes

How do I make an clock from w3school tutorial?

What is a clock from w3school tutorial? How do you make a clock from w3school tutorial? This script and codes were developed by Khalid Munir on 26 August 2022, Friday.

Clock from w3school tutorial Previews
IQ Test

Clock from w3school tutorial - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clock from w3school tutorial</title>
</head>
<body> <canvas id="canvasFajar" width="200" height="200" style="background-color:#FFF"></canvas>
<canvas id="canvasZuhr" width="200" height="200" style="background-color:#999"></canvas>
<canvas id="canvasAsar" width="200" height="200" style="background-color:#FFF"></canvas>
<canvas id="canvasMaghrib" width="200" height="200" style="background-color:#FFF"></canvas>
<canvas id="canvasEsha" width="200" height="200" style="background-color:#FFF"></canvas>
<canvas id="canvasJumma" width="200" height="200" style="background-color:#FFF"></canvas> <script src="js/index.js"></script>
</body>
</html>

Clock from w3school tutorial - Script Codes JS Codes

drawClock('canvasFajar', "2015-07-30 5:40:00", "Fajar ", "فجر");
drawClock('canvasZuhr', "2015-07-30 13:45:00", "Zuhr ", "ظہر");
drawClock('canvasAsar', "2015-07-30 16:25:00", "Asar ", "عصر");
drawClock('canvasMaghrib', "2015-07-30 20:50:00", " Maghrib", "مغرب");
drawClock('canvasEsha', "2015-07-30 13:40:00", "Esha ", "عشاء");
drawClock('canvasJumma', "2015-07-30 14:30:00", "Jumma", "جمعہ");
// drawClock
// cid-[canvasID] = a cnvas id with width and height set as square
// ttime-[text time/date] = format like "2015-07-30 13:25:00"
// teng-[tet english] = "salat name" - spaces for padding to center -- TODO - function to center english text
// tarb-[text arabic/urdu] - use urdu keybord in notepad, then cut/paste i.e. "جمعہ"
// -- TODO - bind with knockout
// -- Add countdown to next salat
// -- change css based on salat status, i.e. past/immenent/next salat
// -- add (perhaps) masjid id/icon/name to clockface
function drawClock(cid, ttime, teng, tarb) { var canvas = document.getElementById(cid); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90; drawFace(ctx, radius); drawFaceText(ctx, teng, tarb); drawNumbers(ctx, radius); drawTime(ctx, radius, ttime);
}
function drawFace(ctx, radius) { drawNumbers(ctx, radius); drawTime(ctx, radius, ttime); drawFaceText(ctx, teng, tarb);
}
function drawFaceText(ctx, teng, tarb){ ctx.font = "30pt Helvetica"; var brandName = tarb; var brandNameSize = ctx.measureText(brandName); ctx.fillStyle = 'blue'; ctx.fillText(brandName, 30 - brandNameSize.width / 2, -40); ctx.font = "19pt Helvetica"; var brandName = teng; var brandNameSize = ctx.measureText(brandName); ctx.fillText(brandName, 40 - brandNameSize.width / 2, 30);
}
function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fillStyle = 'white'; ctx.fill(); grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); grad.addColorStop(0, '#333'); grad.addColorStop(0.5, 'white'); grad.addColorStop(1, '#333'); ctx.strokeStyle = grad; 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("20pt Helvetica"); ctx.font = radius*0.25 + "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.8); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.8); ctx.rotate(-ang); }
}
function drawTime(ctx, radius, ttime){ var now = new Date(ttime); 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);
}
Clock from w3school tutorial - Script Codes
Clock from w3school tutorial - Script Codes
Home Page Home
Developer Khalid Munir
Username khalidmunir
Uploaded August 26, 2022
Rating 3
Size 2,731 Kb
Views 28,336
Do you need developer help for Clock from w3school tutorial?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Khalid Munir (khalidmunir) Script Codes
Name
CSS TRICKS - corner ribbon
Single Image upload knockout
Broken Rule.js example1
Github 404 page is so cool
Masjid Timetable from Ajax source
NgHandsonTable - get value instead of formula
Generate a dynamic table - javascript and HTML
Scroll button detect
Part1 - make new static analog clock
Get Masjid data via json from dropdown
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!