mahevi.solutions

Clock with weeks

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>

Suchergebnisse

Clock with weeks

Clock with weeks

Kommentare

die erste Woche fehlt