schliessen
Suchergebnisse
Seite
|
Webseite
(+43) 664 2081526
info@mahevi.solutions
Diese Seite verwendet Cookies um Dir ein angenehmes Surfen zu ermöglichen. Indem Du weitersurfst, stimmst Du – jederzeit für die Zukunft widerruflich – dieser Datenverarbeitung zu.
Akzeptieren
Details
Portfolio
Blog
Tools
QR Code Generator
Darlehensrechner
Umschuldungsrechner
Canvas
Login
Clock with weeks
Home
Canvas List
Clock with weeks
Alexander
2/22/2021
Canvas
Canvas, JS Uhr mit Wochen, Monaten Stunde, Minute und Sekunde
kopieren
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div class="vertical-center"> <canvas id="clockcanvas" width="350" height="350"></canvas> </div> <style> .vertical-center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> <script> //define clocknumbers var clockDisplay = 12; var daySplit = "am"; var chours = 12; var cminutes = 60; var cseconds = 60; var chundreds = 100; var cstyles = "basic"; // define Canvas var canvas = document.getElementById('clockcanvas'); var context = canvas.getContext('2d'); // define circle var x = canvas.width / 2; var y = canvas.height / 2; var circ = Math.PI * 2; var quart = Math.PI / 2; //design var cstart = -quart; var cproportion = 1; chours = chours / cproportion; cminutes = cminutes / cproportion; cseconds = cseconds / cproportion; chundreds = chundreds / cproportion; var textAlign = "center"; var primaryColour = "rgba( 11, 79, 108, 1 )"; var secondaryColour = "rgba( 11, 79, 108, 0.1 )"; var hourColour = "rgba( 11, 79, 108, 1 )"; var minuteColour = "rgba( 11, 79, 108, 1 )"; var secondColour = "rgba( 11, 79, 108, 1 )"; var hundredColour = "rgba( 11, 79, 108, 1 )"; // define distances var radiushour = canvas.width / 4 - 30; var hsegDist = 100; // distance of segments var hWidth = 6; // width of segment var hradDist = 6; // shift circles var radiusminute = canvas.width / 4 - hWidth - 30; var msegDist = 100; var mWidth = 6; var mradDist = 4; var radiussecond = canvas.width / 4 - hWidth - mWidth - 30; var ssegDist = 100; var sWidth = 2; var sradDist = 4; var radiushundred = canvas.width / 4 - hWidth - mWidth - sWidth - 30; var husegDist = 1000; var huWidth = 2; var huradDist = 1; //draw clock function set(hour, minute, second, hundred) { context.clearRect(0, 0, canvas.width, canvas.height); //Line context.lineWidth = 2; context.strokeStyle = primaryColour; //text time context.textAlign = textAlign; context.textBaseline = "middle"; context.font = "30px Nunito"; if (minute < 10) { minute = "0" + minute; } context.fillText(hour + ":" + minute, x, y + 3); //text second context.textAlign = textAlign; context.textBaseline = "middle"; context.font = "16px Nunito"; context.fillText(second, x, y + 30); //text Daysplit context.textAlign = textAlign; context.textBaseline = "middle"; context.font = "18px Nunito"; context.fillText(daySplit, x, y - 25); //hour circle setCircle(chours, hour, radiushour, hWidth, hradDist, hsegDist, true, hourColour); //minute circle setCircle(cminutes, minute, radiusminute, mWidth, mradDist, msegDist, true, minuteColour); //second circle setCircle(cseconds, second, radiussecond, sWidth, sradDist, ssegDist, true, secondColour); //hundreds circle setCircle(chundreds, hundred, radiushundred, huWidth, huradDist, husegDist, false, hundredColour); //month circle setCircle( 12, 2, canvas.width / 2 -30, 7, 5, 120, true, hourColour ); var color ="#F5F5F5"; var dt = new Date(); for ( var d = new Date( dt.getFullYear(), 0, 1 ); d < new Date( dt.getFullYear(), 11, 31 ); d.setDate( d.getDate() + 1 ) ) { var w = weekNum( d ); var tw = weeksInYear( d.getFullYear() ); var wa = 360 / tw; if ( d.toDateString() === dt.toDateString() ) { color = "rgba(255, 0 ,0 , 1)"; } else if ( d.valueOf()<dt.valueOf()) { color = "rgba(11, 79, 108, 1)"; } else { color = "rgba(11, 79, 108, 0.1)"; }; setPoint( wa * w -wa/2, d.getDay( d ),color ); } } // draw circles function setCircle(segments, segment, radius, lineWidth, radDist, segDist, cumul, colour) { var circleseg = segments; for (i = 0; i < circleseg * cproportion; i++) { if (segment > i && cumul) { context.lineWidth = lineWidth; context.strokeStyle = colour; } else if (segment == i && !cumul) { context.lineWidth = lineWidth; context.strokeStyle = colour; } else { context.lineWidth = lineWidth; context.strokeStyle = secondaryColour; }; // draw segments context.beginPath(); var outerstart = cstart + circ / circleseg * i; var outerend = outerstart + circ / circleseg - (circ / (segDist / cproportion)); context.arc(x, y, radius + radDist, outerstart, outerend, false); context.stroke(); }; }; var weekday = new Array( 7 ); weekday[ 0 ] = 7; weekday[ 1 ] = 1; weekday[ 2 ] = 2; weekday[ 3 ] = 3; weekday[ 4 ] = 4; weekday[ 5 ] = 5; weekday[ 6 ] = 6; function setPoint ( positiondegree, daynum ,color) { // define positions var px = x + ( canvas.width / 4 - 20 + 10 * weekday[daynum] ) * Math.cos( Math.PI * 2 * (positiondegree / 360 -0.25) ) var py = y + ( canvas.height / 4 - 20 + 10 * weekday[daynum] ) * Math.sin( Math.PI * 2 * (positiondegree / 360-0.25) ); context.save(); context.fillStyle = color; context.beginPath(); context.arc( px, py, 3 , 0 * Math.PI, 2 * Math.PI, false ); context.fill(); context.restore(); }; function weekNum ( dt ) { var tdt = new Date( dt.valueOf() ); var dayn = ( dt.getDay() + 6 ) % 7; tdt.setDate( tdt.getDate() - dayn + 3 ); var firstThursday = tdt.valueOf(); tdt.setMonth( 0, 1 ); if ( tdt.getDay() !== 4 ) { tdt.setMonth( 0, 1 + ( ( 4 - tdt.getDay() ) + 7 ) % 7 ); } return 1 + Math.ceil( ( firstThursday - tdt ) / 604800000 ); } function weeksInYear ( year ) { var month = 11, day = 31, week; do { d = new Date( year, month, day-- ); week = weekNum( d ); } while ( week == 1 ); return week; } // loop time and draw canvas setInterval(function () { var hour = new Date().getHours(); if (hour > clockDisplay) { hour = hour - clockDisplay; daySplit = "pm"; } else { daySplit = "am"; }; var minute = new Date().getMinutes(); var second = new Date().getSeconds(); var millisecond = new Date().getMilliseconds(); set(hour, minute, second, Math.round(millisecond / 10)); }, 10); </script> </body> </html>
Link teilen
buy me a coffee
send some bucks
send bitcoin fract
Kommentare
Kommentar hinzufügen
rednax
- 22 Feb 2021
die erste Woche fehlt
antworten
Bitcoin
×
Überweisung
×
Kommentare
die erste Woche fehlt